javascript - JavaScript通常的公认的最佳实践代码

  显示原文与译文双语对照的内容

像jQuery这样的JavaScript框架使得客户端web应用程序更加丰富和功能更加强大,我开始注意到一个问题。

你在世界中保持这个组织的时间是多少?

  • 将所有处理程序放在一个位置,并为所有事件编写函数?
  • 创建用于包装所有功能的函数/类?
  • 写得疯狂,希望它能在最好的地方工作?
  • 放弃并获得一个新的职业?

我提到了 jQuery,但它实际上是任何JavaScript代码。 我发现线对线开始堆积,它变得难以管理脚本文件或者找到你寻找的东西。 很可能是最大的propblems我发现是有很多方法来做同样的事情,很难知道哪一个是当前普遍接受的最佳实践。

有什么一般建议保持最好的方法。js文件应用程序的其余部分一样漂亮整洁? 或者这只是一个内部问题? 还有更好的选择?


编辑

这里问题旨在更多关于代码组织而不是文件组织。 已经有一些非常好的例子来合并文件或者拆分内容。

我的问题是:目前最常用的最佳实践方式来组织你的实际代码? 什么是你的建议,或甚至away设法互动with页,reuseable过要素和减损《与法律发生冲突的每项其他?

有些人列出了名称空间,这是一个好主意。 还有什么其他方法,更具体地处理页面上的元素并保持代码整洁整洁?

时间:

这将是一个很多更好的如果javascript内置的名称空间,但是我发现组织之类的达斯汀·迪亚兹描述帮助我很多。


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 。 所有代码都封装到类中,每个类都在它自己的文件中。 对于开发,我有单独的<脚本> 标记来包含每个js文件,但是它们合并成一个较大的包,以减少HTTP请求的开销。

通常,每个应用程序都有一个'主要'js文件。 所以,如果我正在编写一个"调查"应用程序,我将有一个名为" survey.js"的js文件。 这将包含进入jQuery代码的入口点。 我在实例化过程中创建了jQuery引用,然后将它们作为参数传递给我的对象。 这意味着javascript类是'纯'并且不包含任何对 CSS ids或者类名的引用。


//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();
});

我也发现命名约定对于可读性很重要。 例如:我将'j'附加到所有的jQuery实例。

在上面的例子中,有一个名为DimScreen的类。 ( 假设这将使屏幕变暗并弹出一个警告框) 它需要一个div元素,它可以放大屏幕,然后添加一个警告框,这样我就可以传递一个jQuery对象。 jQuery有一个plug-in概念,但它似乎限制了( 例如。 实例不是持久的,不能被访问( 没有真正的向上) 。 所以DimScreen类是一个恰好使用jQuery的标准javascript类。


//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>');
//...
};

我用这种方法构建了一些相当复杂的appliations 。

代码组织需要采用约定和文档标准:
1.物理文件的命名空间代码;

 
Exc = {};

 


2.在这些命名空间的javascript中分组类;
3 。设置Prototype或者相关函数或者类以表示真实对象;


Exc = {};
Exc.ui = {};
Exc.ui.maskedInput = function (mask) {
 this.mask = mask;
. . .
};
Exc.ui.domTips = function (dom, tips) {
 this.dom = gift;
 this.tips = tips;
. . .
};


4.设置约定以改进代码。 例如将它的所有内部函数或者方法分组到对象类型的类属性中。


Exc.ui.domTips = function (dom, tips) {
 this.dom = gift;
 this.tips = tips;
 this.internal = {
 widthEstimates: function (tips) {
. . .
 }
 formatTips: function () {
. . .
 }
 };
. . .
};


5.为命名空间,类,方法和变量编制文档。 必要时还讨论一些代码( 它们通常实现代码的重要逻辑) 。


/**
 * 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;
. . .
};


这些只是一些技巧,但这对组织代码有很大的帮助。 记住你必须有成功的规则 !

Dojo从第一天起就有了模块系统。 事实上,它被认为是Dojo的一个基石,它把它放在一起:

使用模块Dojo实现以下目标:

  • Dojo代码和自定义代码( dojo.declare() ) —的命名空间不会污染全局空间,与其他库共存,以及用户代码的non-Dojo-aware 。
  • 通过名称( dojo.require() ) 同步或者异步加载模块。
  • 通过分析模块依赖来创建一个单一文件或者一组相互依赖的文件( 所谓图层) 来自定义构建,只包括你的web应用程序需要的内容。 自定义构建可以包括Dojo模块和customer-supplied模块。
  • 透明的CDN-based访问Dojo和用户代码。 AOL和谷歌都以这种方式来承载 Dojo,但是一些客户也为他们的定制web应用程序做了一些准备。
...