如何構建我的JavaScript/jQuery代碼？

我正在用一個非常強大的基於Ajax的jQuery Web應用程序。這是一個點，我幾乎沒有跟蹤哪些事件應該觸發什麼行動等如何構建我的JavaScript/jQuery代碼？

我有點感覺我的JavaScript結構是錯誤的，在一個更基本的水平。你們如何構建你的JavaScript/jQuery代碼，事件處理等，任何建議新手JavaScript開發人員。

2009-02-09 Egil Hansen

AMDS！

已經有一段時間了，因爲第一個答案發布到這個問題，許多事情已經改變。首先，JS瀏覽器世界似乎正朝着代碼組織的AMD（異步模塊定義）邁進。

的作品是你寫的所有代碼爲AMD模塊的方式，如：

define('moduleName', ['dependency1', 'dependency2'], function (dependency1, dependency2) { 
    /*This function will get triggered only after all dependency modules loaded*/ 
    var module = {/*whatever module object, can be any JS variable here really*/}; 
    return module; 
});

然後模塊開始使用AMD加載器加載像curl.js或require.js等，爲例如：

curl(
    [ 
     'myApp/moduleA', 
     'myApp/moduleB' 
    ], 
).then(
    function success (A, B) { 
     // load myApp here! 
    }, 
    function failure (ex) { 
     alert('myApp didn't load. reason: ' + ex.message); 
    } 
);

優點是：

您只需在您的頁面上加載單個<script>元素，以加載AMD加載程序本身（其中一些非常小）。
之後，所有的JS文件將被自動提取異步非阻塞！時尚，因此方式更快！
必要的模塊只有在依賴關係加載後纔會被執行。
模塊化（這意味着代碼更容易維護和重用）。
如果使用得當，全局變量污染可以完全控制。

老實說，一旦概念有在你的頭上點擊，你將永遠不會回到你的老路上。

P.S：jQuery自1.7版本開始註冊爲AMD模塊。在AMDS

的更多信息：

來源

2011-11-14 19:45:59 ThatGuy

爲JavaScript代碼，我發現從基督教海爾曼不可或缺

我也很喜歡彼得·米肖here

描述的jQuery方法以下鏈接，我衷心推薦閱讀關於Authoring的指南d我發現jQuery的plugin patterns非常好本教程

來源

2009-02-09 15:42:28 Steerpike

+1用於推薦創作鏈接。我必須爲新手。 – bendewey 2009-02-09 20:11:34

我喜歡創作鏈接（我不得不感謝你），但我不得不承認，我並不是jQuery插件公開方法暴露方式的忠實粉絲。我想我只是發現基督徒的揭露單一公共對象或保羅的公衆回報更清晰的方法來閱讀。 – Steerpike 2009-02-09 20:21:32

基督徒剛剛指出我另一個模塊的選項，更優雅： http://www.wait-till-i.com/2007/08/22/again-with-the-module-pattern-reveal-something -to-the-world/ – 2009-07-20 16:52:05

我的js文件通常遵循一個類似的命名約定：

xxx.utility.js
mypage.events.js
XXX。 common.js
/LIB/
/OS-DoNotDistribute/LIB/

凡

'我的空間' 是HTML， ASPX，PHP等文件的名稱。
'xxx'是概念。（即orders.common.js）
「實用」意味着它是一個可重複使用的庫腳本（即ajax.utility.js，controlfader.utility.js）
「共同」這個應用程式可重複使用的功能，但不能重複使用跨其他項目
「LIB」爲任何外部或庫腳本
子目錄「OS-DoNotDistribute」是一個子目錄，以確保沒有OS許可的代碼，如果應用程序是曾經賣到分佈。

另外，對於ajax，我有一個特殊的回調函數命名約定，所以很容易分辨出它們是什麼。

我不確定它接近你要找的東西，但我希望它有幫助。

來源

2009-02-09 16:03:13

讓我的事件在控制我使用了一個發佈/訂閱機制

jQuery.subscribe = function(eventName, obj, method){ 
    $(window).bind(eventName, function() { 
     obj[method].apply(obj, Array.prototype.slice.call(arguments, 1)); 
    }); 
    return jQuery; 
} 

jQuery.publish = function(eventName){ 
    $(window).trigger(eventName, Array.prototype.slice.call(arguments, 1)); 
    return jQuery; 
}

下面是使用它的一個例子

// a couple of objects to work with 
var myObj = { 
    method1: function(arg) { 
     alert('myObj::method1 says: '+arg); 
    }, 
    method2: function(arg1, arg2) { 
     alert(arg1); 
     //republish 
     $.publish('anEventNameIMadeUp', arg2); 
    } 
} 

var myOtherObj = { 
    say: function(arg){ 
     alert('myOtherObj::say says: ' + arg); 
    } 
} 



// you can then have all your event connections in one place 

//myObj::method2 is now listening for the 'start' event 
$.subscribe('start', myObj, 'method2'); 

//myOtherObj::say is now listening for the 'another' event 
$.subscribe('anotherEvent', myOtherObj, 'say'); 

//myObj::method1 is now listening for the 'anEventNameIMadeUp' event 
$.subscribe('anEventNameIMadeUp', myObj, 'method1'); 
//so is myOtherObj::say 
$.subscribe('anEventNameIMadeUp', myOtherObj, 'say'); 


// ok, trigger some events (this could happen anywhere) 
$.publish('start', 'message1', 'message2'); 
$.publish('anotherEvent', 'another message');

來源

2009-02-09 16:16:19 meouw

我肯定會推薦上除了對象文本模式閱讀起來模塊模式;這裏是一個很好的書面記錄：

http://ajaxian.com/archives/show-love-to-the-object-literal

來源

2009-02-09 18:32:50 rmurphey

(function($, window, slice) 
{ 

    $.subscribe = function(eventName, obj, method) 
    { 
     $(window).bind(eventName, function() 
     { 
      obj[method].apply(obj, slice.call(arguments, 1)); 
     }); 
     return $; 
    }; 

    $.publish = function(eventName) 
    { 
     $(window).trigger(eventName, slice.call(arguments, 1)); 
     return jQuery; 
    }; 

})(jQuery, window, Array.prototype.slice);

來源

2009-06-23 12:08:55

要添加到現有的答案，這裏有一個great post，涵蓋構建於模塊模式更先進的技術。

一旦您的Javascript代碼達到一定的大小，您將不可避免地想要通過將其分解成多個文件/模塊/子模塊來重構它。如果您不確定如何使用模塊模式來完成此任務，則必須閱讀本文。

來源

2011-01-25 03:39:04 mbreining