JavaScript中代码组织常用的最佳实践
随着jQuery等JavaScript框架使客户端Web应用程序更加丰富和功能更强大，我开始注意到一个问题......
你如何保持这种有组织的？
我提到了jQuery，但它通常是任何JavaScript代码。 我发现随着线条开始堆积起来，管理脚本文件或找到您要查找的内容变得更加困难。 我发现最大的可能性是有很多方法可以做同样的事情，很难知道哪一个是目前普遍接受的最佳实践。
有没有关于如何让你的.js文件像应用程序的其他部分一样漂亮整洁的最佳方法的一般建议？ 或者这只是IDE的问题？ 那里有更好的选择吗？
编辑
这个问题旨在更多地关注代码组织，而不是文件组织。 有一些非常好的合并文件或分割内容的例子。
我的问题是：目前普遍接受的最佳实践方法是如何组织实际的代码？ 你用什么方式，甚至是推荐的方式来与页面元素进行交互，并创建不会相互冲突的可重用代码？
有些人列出了名字空间 ，这是一个好主意。 还有其他什么方式，更具体地处理页面上的元素并保持代码的组织和整齐？
如果javascript内置了命名空间，那将会好很多，但是我发现组织Dustin Diaz这样的组织可以帮助我很多。
var DED = (function() {
var private_var;
function private_method()
{
// do stuff here
}
return {
method_1 : function()
{
// do stuff here
},
method_2 : function()
{
// do stuff here
}
};
})();
我将不同的“命名空间”和有时单独的文件放在不同的文件中。 通常我从一个文件开始，当一个类或名称空间变得足够大以保证它时，我将它分离出它自己的文件。 使用工具来组合所有文件以进行生产也是一个很好的主意。
我尽量避免在HTML中包含任何javascript。 所有代码都封装到类中，每个类都在它自己的文件中。 对于开发，我有单独的<script>标签来包含每个js文件，但是它们被合并到一个更大的包中进行生产，以减少HTTP请求的开销。
通常，我将为每个应用程序提供一个“主”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>');
//...
};
我使用这种方法构建了一些相当复杂的应用程序。
您可以将脚本分成单独的文件进行开发，然后创建一个“发布”版本，将所有脚本塞到一起并运行YUI Compressor或类似的东西。
链接地址: http://www.djcxy.com/p/5325.html上一篇: Commonly accepted best practices around code organization in JavaScript