Question

我们的页面由一个主视图文件组成，然后是几个“元素”（可重用的部分，例如在渲染时注入视图的bootstrap-modals）。一些元素包含脚本标记以获取其特定功能所需的外部js，即：

<script src="//some.external.cdn/lib.min.js">

元素代码将通过以下方式应用它自己的功能：

<script>
     $.ready(function(){
       // attach some element-specific listeners.
     });
</script>

在我们决定将元素移动到通过AJAX加载的页面之前，这一切都正常。脚本被执行，但是所需的库文件不再阻止$ .ready（function（）{}）的执行;在元素内。现在看来这些依赖项是异步加载的。

我意识到我们可以将<script src="//....">标记移动到基页中，因此在执行任何Ajax之前加载它，但是这使得元素不那么“可插拔”，因为无论哪个页面包含它都需要知道它还需要在其自己的标题中包含该脚本标记。

处理此问题的最佳方法是什么？我已经研究过使用RequireJS来处理元素本身中的其他依赖项（因为我相信这可以重新启用'阻塞'性质），但不确定这是否有点过分。

Answer 1

根据你所说的，看来你的AJAX加载内容依赖于外部脚本，正确处理这种场景的唯一方法是通过依赖管理器，如requireJS，yepnope，head.JS等。另外一件事你可以做的是使用jQuery的$.getScript()函数来异步加载外部脚本，然后将依赖于该脚本的代码放在回调中，因为jQuery知道在脚本加载并执行后调用回调函数。 / p>

Answer 2

在使用可重用组件构建网站时，我通常会以相反的方式处理此问题;而不是HTML块引入他们的脚本，让脚本带来他们的HTML。

作为require.js中的基本示例，您可以执行以下操作：

mainView.html

<div id="headerRegion"></div>

<script src="require.js" data-main="mainView.js"></script>

mainView.js

require(['headerWidget'], function (HeaderWidget) {
    var headerElement = $('#headerRegion');
    var header = new HeaderWidget(headerElement);
});

headerWidget.html

<header><h1>Wow!</h1></header>

headerWidget.js

define(['text!headerWidget.html'], function (headerTemplate) {
    return function (element) {
        $(headerTemplate.appendTo(element);
    };
});

请注意，这使用require.js文本插件将HTML文件作为字符串加载到javascript函数中。

这当然不是唯一的方法，但它是我通常喜欢的方式。 r.js优化器也可以处理将html文件拉入优化的.js文件，或者如果没有通过r.js优化器运行，可以在运行时加载它。

ajax响应中的外部脚本src和$ .ready（）

2 个答案: