獨立jQuery函數爲異步組

Question

這是爲了解決以下要求尋找一個方法/解決一個問題：

• 你必須運行的jQuery
網站
• 網站上的所有jQuery函數可分組爲兩組：a）業務相關邏輯（本地功能，如導航等）和b）取得不太重要內容的功能（如廣告），我們稱之爲：GROUP L和其他GROUP E（用於外部）。
• 目標是確保E組的延遲不妨礙組L執行，因此組L和E應該平行運行，不會相互影響。

這怎麼能實現？

很簡單的例子：

本地組L：

<script> 
    $(document).ready(function() { 
    ... local functions, e.g. event listeners for your local navigation ... 
    } 
</script> 

E組： 外部各方提供任何JavaScript

<script> 
    $(document).ready(function() { 
    ... external java script code, e.g. Advertiser JS-snippets ... 
    } 
</script> 

Answer 1

你可以用module patterns做到這一點：

(function(main, $, undefined){ 

    GROUP_L = { 
     group_l_variable : null, 
     group_l_function : function(data){ 
      //... local functions, e.g. event listeners for your local navigation ... 
     }, 
    } 
    GROUP_E = { 
     group_e_variable : 'cats', 
     group_e_function : function(data){ 
      //... external java script code, e.g. Advertiser JS-snippets ... 
     }, 
    } 

}(window.main = window.main || {}, jQuery)); 

您可以隨時撥打這些電話;在你的遊戲機上試用一下：

>>GROUP_E.group_e_variable 
>>'cats' 

>>GROUP_E.group_e_function(my_data) 
>> //whatever your function does 

有很多更多的方法可以做到這一點，這種方式恰好是我的最愛。

更多模塊模式：http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

Answer 2

以防萬一你不知道它。我個人建議您使用RequireJS來學習AMD（異步模塊定義）。你甚至可以load individual pieces of jQuery using AMD。乾杯。