随着像jQuery这样的JavaScript框架使客户端web应用程序更丰富，功能更强大，我开始注意到一个问题…
你到底是怎么组织起来的?
把所有的处理程序放在一个地方，并为所有事件编写函数? 创建函数/类来包装您的所有功能? 疯狂地写作，只希望结果是最好的? 放弃，找一份新工作?
我提到了jQuery，但它实际上是一般的JavaScript代码。我发现，当一行一行开始堆积时，管理脚本文件或找到您要找的内容变得越来越困难。我发现的最大问题可能是，做同一件事有太多的方法，很难知道哪一种是目前普遍接受的最佳实践。
有什么通用的建议可以让你的.js文件像你的应用程序的其他部分一样漂亮整洁吗?或者这只是IDE的问题?还有更好的选择吗?
EDIT
这个问题主要是关于代码组织，而不是文件组织。有一些合并文件或拆分内容的好例子。
我的问题是:目前普遍接受的组织实际代码的最佳实践方式是什么?您的方法是什么，甚至推荐的方法是什么，以与页面元素交互并创建互不冲突的可重用代码?
有些人列出了名称空间，这是个好主意。还有什么其他方法，更具体地说，处理页面上的元素并保持代码的组织和整洁?
当前回答
我为所有我真的不需要在屏幕上实例化几次的东西创建单例，为其他所有东西创建一个类。所有这些都放在同一个文件的同一个名称空间中。所有的东西都是用UML、状态图进行注释和设计的。javascript代码是清楚的html，所以没有内联javascript，我倾向于使用jquery来最小化跨浏览器的问题。
其他回答
我很惊讶没有人提到MVC框架。我一直在使用Backbone.js来模块化和解耦我的代码，这是非常宝贵的。
有相当多这样的框架，其中大多数也非常小。我个人的观点是，如果您想为华丽的UI编写几行jQuery以外的东西，或者想要一个丰富的Ajax应用程序，那么MVC框架将使您的工作更加轻松。
在我之前的工作中，我成功地将Javascript模块模式应用到Ext JS应用程序中。它提供了一种创建良好封装代码的简单方法。
几天前，37Signals的人发布了一个RTE控件。他们制作了一个库，使用一种预处理器命令捆绑javascript文件。
我一直在用它来分离我的JS文件，然后在最后合并为一个。这样我就可以分离关注点，并且最终只有一个文件通过管道(gzip的)。
在模板中，检查是否处于开发模式，并包含单独的文件，如果处于生产模式，则包括最后一个文件(您必须自己“构建”)。
遵循良好的OO设计原则和设计模式有助于使代码易于维护和理解。 但我最近发现的最好的东西之一是信号和槽，也就是发布/订阅。 看看http://markdotmeyer.blogspot.com/2008/09/jquery-publish-subscribe.html 简单的jQuery实现。
这个想法在其他语言的GUI开发中也得到了很好的应用。当代码中某个重要的事件发生时，你会发布一个全局合成事件，其他对象中的其他方法可能会订阅该事件。 这提供了很好的对象分离。
我认为Dojo(和Prototype?)有这种技术的内置版本。
参见什么是信号和槽?
代码组织要求采用约定和文档标准: 1. 物理文件的命名空间代码;
Exc = {};
2. 在这些命名空间javascript中分组类; 3.设置原型或相关的函数或类来表示真实世界的对象;
Exc = {};
Exc.ui = {};
Exc.ui.maskedInput = function (mask) {
this.mask = mask;
...
};
Exc.ui.domTips = function (dom, tips) {
this.dom = gift;
this.tips = tips;
...
};
4. 设置约定以改进代码。例如，将其所有内部函数或方法分组在对象类型的class属性中。
Exc.ui.domTips = function (dom, tips) {
this.dom = gift;
this.tips = tips;
this.internal = {
widthEstimates: function (tips) {
...
}
formatTips: function () {
...
}
};
...
};
5. 制作名称空间、类、方法和变量的文档。必要时也讨论一些代码(一些fi和for，它们通常实现代码的重要逻辑)。
/**
* Namespace <i> Example </i> created to group other namespaces of the "Example".
*/
Exc = {};
/**
* Namespace <i> ui </i> created with the aim of grouping namespaces user interface.
*/
Exc.ui = {};
/**
* Class <i> maskdInput </i> used to add an input HTML formatting capabilities and validation of data and information.
* @ Param {String} mask - mask validation of input data.
*/
Exc.ui.maskedInput = function (mask) {
this.mask = mask;
...
};
/**
* Class <i> domTips </i> used to add an HTML element the ability to present tips and information about its function or rule input etc..
* @ Param {String} id - id of the HTML element.
* @ Param {String} tips - tips on the element that will appear when the mouse is over the element whose identifier is id <i> </i>.
*/
Exc.ui.domTips = function (id, tips) {
this.domID = id;
this.tips = tips;
...
};
这些只是一些技巧，但这对组织代码有很大帮助。记住，你必须自律才能成功!
