随着像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.
}
};
其他回答
代码组织要求采用约定和文档标准: 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;
...
};
这些只是一些技巧，但这对组织代码有很大帮助。记住，你必须自律才能成功!
你的问题是去年年底困扰我的一个问题。区别在于——将代码交给从未听说过私有方法和公共方法的新开发人员。我必须建造一些简单的东西。
最终的结果是一个小框架(大约1KB)，它将对象文字转换为jQuery。语法在视觉上更容易扫描，如果你的js变得非常大，你可以编写可重用的查询来查找使用的选择器、加载的文件、依赖的函数等。
在这里发布一个小框架是不切实际的，所以我写了一篇博客文章和例子(我的第一个。那真是一次冒险!)欢迎您来看看。
对于这里有几分钟时间来查看的其他人，我非常感谢反馈!
推荐使用FireFox，因为它支持对象查询示例的toSource()。
干杯!
Adam
我用这个小东西。它为JS和HTML模板提供了“include”指令。它完全消除了混乱。
https://github.com/gaperton/include.js/
$.include({
html: "my_template.html" // include template from file...
})
.define( function( _ ){ // define module...
_.exports = function widget( $this, a_data, a_events ){ // exporting function...
_.html.renderTo( $this, a_data ); // which expands template inside of $this.
$this.find( "#ok").click( a_events.on_click ); // throw event up to the caller...
$this.find( "#refresh").click( function(){
widget( $this, a_data, a_events ); // ...and update ourself. Yep, in that easy way.
});
}
});
看看JavasciptMVC吧。
你可以:
将代码分成模型层、视图层和控制器层。 将所有代码压缩到一个生产文件中 自动生成代码 创建并运行单元测试 还有更多……
最重要的是，它使用jQuery，所以你也可以利用其他jQuery插件。
您没有提到服务器端语言是什么。或者，更确切地说，您在服务器端使用什么框架(如果有的话)。
IME，我在服务器端组织东西，让它全部震动到网页上。该框架的任务不仅是组织每个页面必须加载的JS，还包括与生成的标记一起工作的JS片段。这样的片段通常不希望发出超过一次——这就是为什么它们被抽象到框架中，以便代码处理该问题。: -)
对于必须发出自己的JS的最终页面，我通常发现生成的标记中有一个逻辑结构。这种本地化的JS通常可以在这种结构的开始和/或结束处组装。
请注意，这些都不能免除您编写高效JavaScript的责任!: -)
