随着像jQuery这样的JavaScript框架使客户端web应用程序更丰富，功能更强大，我开始注意到一个问题…
你到底是怎么组织起来的?
把所有的处理程序放在一个地方，并为所有事件编写函数? 创建函数/类来包装您的所有功能? 疯狂地写作，只希望结果是最好的? 放弃，找一份新工作?
我提到了jQuery，但它实际上是一般的JavaScript代码。我发现，当一行一行开始堆积时，管理脚本文件或找到您要找的内容变得越来越困难。我发现的最大问题可能是，做同一件事有太多的方法，很难知道哪一种是目前普遍接受的最佳实践。
有什么通用的建议可以让你的.js文件像你的应用程序的其他部分一样漂亮整洁吗?或者这只是IDE的问题?还有更好的选择吗?
EDIT
这个问题主要是关于代码组织，而不是文件组织。有一些合并文件或拆分内容的好例子。
我的问题是:目前普遍接受的组织实际代码的最佳实践方式是什么?您的方法是什么，甚至推荐的方法是什么，以与页面元素交互并创建互不冲突的可重用代码?
有些人列出了名称空间，这是个好主意。还有什么其他方法，更具体地说，处理页面上的元素并保持代码的组织和整洁?
当前回答
您可以将脚本分解为单独的文件进行开发，然后创建一个“发布”版本，在这个版本中，您可以将它们全部塞在一起，并在上面运行YUI Compressor或类似的程序。
其他回答
我认为这可能与DDD(领域驱动设计)有关。我正在开发的应用程序，虽然缺乏正式的API，但确实通过服务器端代码(类/文件名等)给出了提示。有了这些，我创建了一个顶级对象作为整个问题域的容器;然后，我在需要的地方添加名称空间:
var App;
(function()
{
App = new Domain( 'test' );
function Domain( id )
{
this.id = id;
this.echo = function echo( s )
{
alert( s );
}
return this;
}
})();
// separate file
(function(Domain)
{
Domain.Console = new Console();
function Console()
{
this.Log = function Log( s )
{
console.log( s );
}
return this;
}
})(App);
// implementation
App.Console.Log('foo');
我尽量避免在HTML中包含任何javascript。所有代码都封装在类中，每个类都在自己的文件中。对于开发，我有单独的<script>标记来包含每个js文件，但是它们被合并到一个更大的包中用于生产，以减少HTTP请求的开销。
通常，我会为每个应用程序创建一个“main”js文件。所以，如果我正在编写一个“调查”应用程序，我将有一个名为“survey.js”的js文件。这将包含进入jQuery代码的入口点。我在实例化期间创建jQuery引用，然后将它们作为参数传递到我的对象中。这意味着javascript类是“纯粹的”，不包含任何对CSS id或类名的引用。
// file: survey.js
$(document).ready(function() {
var jS = $('#surveycontainer');
var jB = $('#dimscreencontainer');
var d = new DimScreen({container: jB});
var s = new Survey({container: jS, DimScreen: d});
s.show();
});
我还发现命名约定对于可读性很重要。例如:我在所有jQuery实例前加'j'。
在上面的例子中，有一个类叫做DimScreen。(假设这会使屏幕变暗并弹出一个警告框。)它需要一个div元素，它可以放大以覆盖屏幕，然后添加一个警告框，因此我传入一个jQuery对象。jQuery有一个插件概念，但它似乎有局限性(例如，实例不是持久的，不能访问)，没有真正的好处。因此，DimScreen类将是一个标准的javascript类，只是恰好使用jQuery。
// file: dimscreen.js
function DimScreen(opts) {
this.jB = opts.container;
// ...
}; // need the semi-colon for minimizing!
DimScreen.prototype.draw = function(msg) {
var me = this;
me.jB.addClass('fullscreen').append('<div>'+msg+'</div>');
//...
};
我已经使用这种方法构建了一些相当复杂的应用程序。
我为所有我真的不需要在屏幕上实例化几次的东西创建单例，为其他所有东西创建一个类。所有这些都放在同一个文件的同一个名称空间中。所有的东西都是用UML、状态图进行注释和设计的。javascript代码是清楚的html，所以没有内联javascript，我倾向于使用jquery来最小化跨浏览器的问题。
遵循良好的OO设计原则和设计模式有助于使代码易于维护和理解。 但我最近发现的最好的东西之一是信号和槽，也就是发布/订阅。 看看http://markdotmeyer.blogspot.com/2008/09/jquery-publish-subscribe.html 简单的jQuery实现。
这个想法在其他语言的GUI开发中也得到了很好的应用。当代码中某个重要的事件发生时，你会发布一个全局合成事件，其他对象中的其他方法可能会订阅该事件。 这提供了很好的对象分离。
我认为Dojo(和Prototype?)有这种技术的内置版本。
参见什么是信号和槽?
Dojo从一开始就使用模块系统。事实上，它被认为是Dojo的基石，是将所有Dojo结合在一起的粘合剂:
dojo。要求——官方文件。 理解dojo.declare, dojo。Require和dojo. provider。 引入Dojo。
使用模块Dojo可以实现以下目标:
Namespaces for Dojo code and custom code (dojo.declare()) — do not pollute the global space, coexist with other libraries, and user's non-Dojo-aware code. Loading modules synchronously or asynchronously by name (dojo.require()). Custom builds by analyzing module dependencies to create a single file or a group of interdependent files (so-called layers) to include only what your web application needs. Custom builds can include Dojo modules and customer-supplied modules as well. Transparent CDN-based access to Dojo and user's code. Both AOL and Google carry Dojo in this fashion, but some customers do that for their custom web applications as well.
