Question

我遇到的问题是在我的所有页面上加载相同的脚本而不必一遍又一遍地定义它们。

我想出了一个半完整的解决方案，看起来像......

var scriptLocs = [];

function loadScripts() {
    for (var i = 0; i < scriptLocs.length; i++) {
        var crtElement = document.createElement('script');
        crtElement.src = scriptLocs[i];
        var hh = document.getElementsByTagName('head')[0];
        // Getting head tag
        hh.appendChild(crtElement);
        //Adding it to head
    }
}

阵列可能非常大，例如大约120个脚本（2.5MB），其中包括jQuery和Knockout等......

我遇到的问题是这可能是不可靠的，我的功能似乎错过了，或加载的顺序与我的数组中定义的顺序不同。顺序非常重要，因为有些东西可能依赖于jQuery，所以它必须在其他脚本之前加载。

每次刷新时也有不同的错误......例如也许是不同的装载顺序？

是否要在元素中定义所有脚本，然后立即附加大量脚本？这会有用吗？

更新：

使用此test.js文件

for (var i = 0; i < scriptLocs.length; i++) {
    document.write("<script type=\"text/javascript\" src=\"" + scriptLocs[i] + "\"><\/script>");
}

并将其作为头脑中的第一件事包括在内......

<!DOCTYPE HTML>
<html>
    <head>
        <title>Test</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script type="text/javascript" src="test.js"></script>

似乎解决了这个问题

Answer 1

使用那么多脚本，您应该考虑压缩和连接它们并将它们作为一个缩小的脚本提供。

您可以使用Googles closure compiler或the YUI compressor执行此操作，例如：

Answer 2

听起来你正在寻找一种方法来声明依赖关系并指定加载顺序，这是require js处理得很好的东西。另外，

RequireJS有一个优化工具...... [c] ombines 相关脚本一起构建到构建层并通过它们缩小它们 UglifyJS（默认值）或Closure Compiler（使用时的选项）爪哇）。

这将允许您在应用程序的所有页面中包含一个缩小的脚本。

Answer 3

这是document.write()的用途。它经常被滥用，但在这种情况下，它是一个不错的选择：

var scriptLocs = [...];
for (var i = 0; i < scriptLocs.length; i++) {
    document.write("<script type=\"text/javascript\" src=\""+scriptLocs[i]+"\"><\/script>");
}

但是不要将它放在函数中或从事件处理程序中调用它。该页面加载时应立即运行此脚本。在dom加载后调用document.write()会导致问题。

Answer 4

你检查了你正在调用的脚本的大小吗？数组将遵循您的顺序，元素创建将遵循您的订单，但记住您在javascript中调用它们，所以它永远不会等待脚本加载然后加载另一个，即如果您正在加载jquery，这是100例如，你正在调用一些10 kb的本机脚本，所以你的脚本将首先加载到jquery。你添加属性异步，使dom不等你的脚本。

在每个页面上加载脚本

4 个答案: