Question

动态加载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）。

Answer 1

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

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

JavaScript中延迟加载的最佳实践

1 个答案: