随着像jQuery这样的JavaScript框架使客户端web应用程序更丰富，功能更强大，我开始注意到一个问题…
你到底是怎么组织起来的?
把所有的处理程序放在一个地方，并为所有事件编写函数? 创建函数/类来包装您的所有功能? 疯狂地写作，只希望结果是最好的? 放弃，找一份新工作?
我提到了jQuery，但它实际上是一般的JavaScript代码。我发现，当一行一行开始堆积时，管理脚本文件或找到您要找的内容变得越来越困难。我发现的最大问题可能是，做同一件事有太多的方法，很难知道哪一种是目前普遍接受的最佳实践。
有什么通用的建议可以让你的.js文件像你的应用程序的其他部分一样漂亮整洁吗?或者这只是IDE的问题?还有更好的选择吗?
EDIT
这个问题主要是关于代码组织，而不是文件组织。有一些合并文件或拆分内容的好例子。
我的问题是:目前普遍接受的组织实际代码的最佳实践方式是什么?您的方法是什么，甚至推荐的方法是什么，以与页面元素交互并创建互不冲突的可重用代码?
有些人列出了名称空间，这是个好主意。还有什么其他方法，更具体地说，处理页面上的元素并保持代码的组织和整洁?
当前回答
对于JavaScript组织一直使用以下
Folder for all your javascript Page level javascript gets its' own file with the same name of the page. ProductDetail.aspx would be ProductDetail.js Inside the javascript folder for library files I have a lib folder Put related library functions in a lib folder that you want to use throughout your application. Ajax is the only javascript that I move outside of the javascript folder and gets it's own folder. Then I add two sub folders client and server Client folder gets all the .js files while server folder gets all the server side files.
其他回答
我使用一个受Ben Nolan的行为启发的自定义脚本(很遗憾，我再也找不到这个脚本的当前链接了)来存储我的大多数事件处理程序。例如，这些事件处理程序由元素className或Id触发。 例子:
Behaviour.register({
'a.delete-post': function(element) {
element.observe('click', function(event) { ... });
},
'a.anotherlink': function(element) {
element.observe('click', function(event) { ... });
}
});
我喜欢动态地包含大多数Javascript库，除了那些包含全局行为的库。为此，我使用Zend Framework的headScript()占位符帮助器，但您也可以使用javascript加载其他脚本，例如Ajile。
几天前，37Signals的人发布了一个RTE控件。他们制作了一个库，使用一种预处理器命令捆绑javascript文件。
我一直在用它来分离我的JS文件，然后在最后合并为一个。这样我就可以分离关注点，并且最终只有一个文件通过管道(gzip的)。
在模板中，检查是否处于开发模式，并包含单独的文件，如果处于生产模式，则包括最后一个文件(您必须自己“构建”)。
你可以使用jquery mx(在javascriptMVC中使用)，这是一组允许你使用模型、视图和控制器的脚本。我曾在一个项目中使用它，并帮助我创建结构化javascript，由于压缩，脚本大小最小。以控制器为例:
$.Controller.extend('Todos',{
".todo mouseover" : function( el, ev ) {
el.css("backgroundColor","red")
},
".todo mouseout" : function( el, ev ) {
el.css("backgroundColor","")
},
".create click" : function() {
this.find("ol").append("<li class='todo'>New Todo</li>");
}
})
new Todos($('#todos'));
如果对视图和模型部分不感兴趣，也可以只使用querymx的控制器端。
使用继承模式组织大型jQuery应用程序。
对于JavaScript组织一直使用以下
Folder for all your javascript Page level javascript gets its' own file with the same name of the page. ProductDetail.aspx would be ProductDetail.js Inside the javascript folder for library files I have a lib folder Put related library functions in a lib folder that you want to use throughout your application. Ajax is the only javascript that I move outside of the javascript folder and gets it's own folder. Then I add two sub folders client and server Client folder gets all the .js files while server folder gets all the server side files.
