0

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

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

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>

似乎可以解决这个问题

4

4 回答 4

3

对于这么多脚本，您可能应该考虑压缩和连接它们并将它们作为一个缩小的脚本提供。

您可以使用Google 的闭包编译器或YUI 压缩器来执行此操作，例如：

于 2012-07-25T10:50:06.200 回答
1

听起来您正在寻找一种声明依赖关系并指定加载顺序的方法，这需要 js处理得很好。此外，

RequireJS 有一个优化工具... [c] 将相关脚本组合到构建层中，并通过 UglifyJS（默认）或 Closure Compiler（使用 Java 时的一个选项）将它们缩小。

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

于 2012-07-25T10:58:03.290 回答
1

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

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

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

于 2012-07-25T11:09:48.923 回答
0

你检查过你正在调用的脚本的大小吗？数组将按照您的顺序进行，元素创建将按照您的顺序进行，但请记住您是在 javascript 中调用它们，因此它永远不会等待脚本加载然后加载另一个脚本，即如果您正在加载 100 的 jquery例如 kb 并且您正在调用一些 10 kb 的本机脚本，因此您的脚本将首先加载这个 jquery。您添加属性 async 以使 dom 不等待您的脚本。

于 2012-07-25T10:59:45.433 回答