随着像jQuery这样的JavaScript框架使客户端web应用程序更丰富，功能更强大，我开始注意到一个问题…
你到底是怎么组织起来的?
把所有的处理程序放在一个地方，并为所有事件编写函数? 创建函数/类来包装您的所有功能? 疯狂地写作，只希望结果是最好的? 放弃，找一份新工作?
我提到了jQuery，但它实际上是一般的JavaScript代码。我发现，当一行一行开始堆积时，管理脚本文件或找到您要找的内容变得越来越困难。我发现的最大问题可能是，做同一件事有太多的方法，很难知道哪一种是目前普遍接受的最佳实践。
有什么通用的建议可以让你的.js文件像你的应用程序的其他部分一样漂亮整洁吗?或者这只是IDE的问题?还有更好的选择吗?
EDIT
这个问题主要是关于代码组织，而不是文件组织。有一些合并文件或拆分内容的好例子。
我的问题是:目前普遍接受的组织实际代码的最佳实践方式是什么?您的方法是什么，甚至推荐的方法是什么，以与页面元素交互并创建互不冲突的可重用代码?
有些人列出了名称空间，这是个好主意。还有什么其他方法，更具体地说，处理页面上的元素并保持代码的组织和整洁?
当前回答
您没有提到服务器端语言是什么。或者，更确切地说，您在服务器端使用什么框架(如果有的话)。
IME，我在服务器端组织东西，让它全部震动到网页上。该框架的任务不仅是组织每个页面必须加载的JS，还包括与生成的标记一起工作的JS片段。这样的片段通常不希望发出超过一次——这就是为什么它们被抽象到框架中，以便代码处理该问题。: -)
对于必须发出自己的JS的最终页面，我通常发现生成的标记中有一个逻辑结构。这种本地化的JS通常可以在这种结构的开始和/或结束处组装。
请注意，这些都不能免除您编写高效JavaScript的责任!: -)
其他回答
看看JavasciptMVC吧。
你可以:
将代码分成模型层、视图层和控制器层。 将所有代码压缩到一个生产文件中 自动生成代码 创建并运行单元测试 还有更多……
最重要的是，它使用jQuery，所以你也可以利用其他jQuery插件。
你的问题是去年年底困扰我的一个问题。区别在于——将代码交给从未听说过私有方法和公共方法的新开发人员。我必须建造一些简单的东西。
最终的结果是一个小框架(大约1KB)，它将对象文字转换为jQuery。语法在视觉上更容易扫描，如果你的js变得非常大，你可以编写可重用的查询来查找使用的选择器、加载的文件、依赖的函数等。
在这里发布一个小框架是不切实际的，所以我写了一篇博客文章和例子(我的第一个。那真是一次冒险!)欢迎您来看看。
对于这里有几分钟时间来查看的其他人，我非常感谢反馈!
推荐使用FireFox，因为它支持对象查询示例的toSource()。
干杯!
Adam
在我的上一个项目- viajeros.com -我使用了几种技术的组合。我不知道如何组织一个网页应用程序——Viajeros是一个面向旅行者的社交网站，它有明确定义的部分，所以很容易将每个部分的代码分开。
我根据站点部分使用名称空间模拟和延迟加载模块。在每个页面加载我声明一个“vjr”对象，并总是加载一组常用函数到它(vjr.base.js)。然后每个HTML页面用简单的语句决定哪些模块需要:
vjr.Required = ["vjr.gallery", "vjr.comments", "vjr.favorites"];
Vjr.base.js从服务器获取并执行每一个gzip文件。
vjr.include(vjr.Required);
vjr.include = function(moduleList) {
if (!moduleList) return false;
for (var i = 0; i < moduleList.length; i++) {
if (moduleList[i]) {
$.ajax({
type: "GET", url: vjr.module2fileName(moduleList[i]), dataType: "script"
});
}
}
};
每个“模块”都有这样的结构:
vjr.comments = {}
vjr.comments.submitComment = function() { // do stuff }
vjr.comments.validateComment = function() { // do stuff }
// Handlers
vjr.comments.setUpUI = function() {
// Assign handlers to screen elements
}
vjr.comments.init = function () {
// initialize stuff
vjr.comments.setUpUI();
}
$(document).ready(vjr.comments.init);
鉴于我有限的Javascript知识，我知道一定有更好的方法来管理这个，但到目前为止，它为我们工作得很好。
我很惊讶没有人提到MVC框架。我一直在使用Backbone.js来模块化和解耦我的代码，这是非常宝贵的。
有相当多这样的框架，其中大多数也非常小。我个人的观点是，如果您想为华丽的UI编写几行jQuery以外的东西，或者想要一个丰富的Ajax应用程序，那么MVC框架将使您的工作更加轻松。
我认为这可能与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');
