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應用程序做了一些準備。
...