将 jQuery 函数分成异步组

Question

这是一个寻找方法/解决方案以解决以下要求的问题：

• 你有一个运行 jQuery 的网站
• 您网站上的所有 jQuery 函数都可以分为两组：a) 业务相关逻辑（本地函数，如导航等）和 b) 用于获取不太重要的内容（如广告）的函数)，我们称 a) 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。干杯。