JavaScript 中延迟加载的最佳实践答案

【问题标题】：Best practice for lazy loading in JavaScriptJavaScript 中延迟加载的最佳实践
【发布时间】：2014-01-27 15:00:22
【问题描述】：

动态加载 HTML 内容并将其注入页面的最佳方式是什么（当 HTML 包含 <script src="..." /> 标记和对这些脚本的函数调用时）？

考虑这种方法（为简单起见，我会考虑 jQuery）：

<script>
$.ajax({
    url: 'http://...',
    success: function(html) {
        $("body").append(html);
    }
});
</script>

假设返回的 html 包含如下内容：

<script src="some_script.js"></script>
<script>
some_function(); // function defined in some_script.js
</script>

由于some_function() 是在 some_script.js 中定义的，它仅在加载 some_script.js 后才可用，但（通常）它将在加载 some_script.js 之前执行（从而导致错误）。

显然，有一些解决方案可以解决这个问题，但在这种情况下，最佳做法是什么？应该改用RequireJS之类的库吗？

上面的例子是我使用的模式的结果：我有一个组件，只有在将要使用它时才加载它（此时我进行 Ajax 调用以检索 HTML 和所需的脚本）。尽管如此，仍然可能需要许多脚本，并且将它们编写为 HTML 模板中的一组标签比通过 JavaScript 加载它们更容易（这也是首选，因为脚本 URL 可能在应用程序内部生成，因此纯 JS脚本可能不知道绝对脚本 URL）。

【问题讨论】：

由于 JavaScript 的动态性可能会变得很复杂，我可能建议您不要仅在执行某些函数时加载脚本，而是使用 Require.JS 之类的东西来更好地控制加载的时间.

标签： javascript jquery ajax lazy-loading

【解决方案1】：

实际上 Safari 和 Internet Explorer（很可能还有其他）不会执行作为安全措施通过 Ajax 注入的<script>。

我可以推荐的是，当您需要一个相当大的库（但实际使用 Web 应用程序不需要）时，最好将包含该库的 .js 文件加载到您的文档中，然后您可以使用库中定义的所有属性和方法。将回调侦听器附加到脚本加载器并执行回调中的所有代码，而不是外部 .js 文件本身。

【讨论】：