随着像jQuery这样的JavaScript框架使客户端web应用程序更丰富，功能更强大，我开始注意到一个问题…
你到底是怎么组织起来的?
把所有的处理程序放在一个地方，并为所有事件编写函数? 创建函数/类来包装您的所有功能? 疯狂地写作，只希望结果是最好的? 放弃，找一份新工作?
我提到了jQuery，但它实际上是一般的JavaScript代码。我发现，当一行一行开始堆积时，管理脚本文件或找到您要找的内容变得越来越困难。我发现的最大问题可能是，做同一件事有太多的方法，很难知道哪一种是目前普遍接受的最佳实践。
有什么通用的建议可以让你的.js文件像你的应用程序的其他部分一样漂亮整洁吗?或者这只是IDE的问题?还有更好的选择吗?
EDIT
这个问题主要是关于代码组织，而不是文件组织。有一些合并文件或拆分内容的好例子。
我的问题是:目前普遍接受的组织实际代码的最佳实践方式是什么?您的方法是什么，甚至推荐的方法是什么，以与页面元素交互并创建互不冲突的可重用代码?
有些人列出了名称空间，这是个好主意。还有什么其他方法，更具体地说，处理页面上的元素并保持代码的组织和整洁?
当前回答
创建假类，并确保任何可以被扔进单独函数的有意义的东西都被这样做了。还要确保大量注释，而不是编写面条式的代码，而是将代码分块编写。例如，一些无意义的代码描述了我的理想。显然，在现实生活中，我也编写了许多包含它们功能的库。
$(function(){
//Preload header images
$('a.rollover').preload();
//Create new datagrid
var dGrid = datagrid.init({width: 5, url: 'datalist.txt', style: 'aero'});
});
var datagrid = {
init: function(w, url, style){
//Rendering code goes here for style / width
//code etc
//Fetch data in
$.get(url, {}, function(data){
data = data.split('\n');
for(var i=0; i < data.length; i++){
//fetching data
}
})
},
refresh: function(deep){
//more functions etc.
}
};
其他回答
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.
我使用一个受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的)。
在模板中，检查是否处于开发模式，并包含单独的文件，如果处于生产模式，则包括最后一个文件(您必须自己“构建”)。
创建假类，并确保任何可以被扔进单独函数的有意义的东西都被这样做了。还要确保大量注释，而不是编写面条式的代码，而是将代码分块编写。例如，一些无意义的代码描述了我的理想。显然，在现实生活中，我也编写了许多包含它们功能的库。
$(function(){
//Preload header images
$('a.rollover').preload();
//Create new datagrid
var dGrid = datagrid.init({width: 5, url: 'datalist.txt', style: 'aero'});
});
var datagrid = {
init: function(w, url, style){
//Rendering code goes here for style / width
//code etc
//Fetch data in
$.get(url, {}, function(data){
data = data.split('\n');
for(var i=0; i < data.length; i++){
//fetching data
}
})
},
refresh: function(deep){
//more functions etc.
}
};
我的老板仍然在谈论他们编写模块化代码(C语言)的时代，并抱怨现在的代码是多么糟糕!据说程序员可以在任何框架中编写程序集。总有一种策略可以克服代码组织。最基本的问题是那些把java脚本当作玩具的人，从来没有尝试去学习它。
在我的例子中，我在UI主题或应用程序屏幕的基础上编写js文件，使用适当的init_screen()。使用适当的id命名约定，我确保在根元素级别上没有名称空间冲突。在不引人注目的window.load()中，我根据顶级id将内容绑定起来。
我严格使用java脚本闭包和模式来隐藏所有私有方法。这样做之后，再也没有遇到属性/函数定义/变量定义冲突的问题。然而，当与团队一起工作时，通常很难执行同样的严格性。
