Question

我创建了一些函数（应该）将另一个文件加载到我的页面（我正在创建一个库，我想让所有js文件在一行中加载）。

这是HTML文件的一部分：

<head>

    <title>Example</title>

    <script src="ENGINE/libs/jquery.js"></script>
    <script src="ENGINE/load.js"></script>

    <script src="EXAMPLE.js"></script>

</head>

并加载.js：

function loadJSfromFile(src) {
    var h = document.getElementsByTagName('head').item(0);
    var s = document.createElement("script");
    //s.type = "text/javascript";
    s.src = src;
    h.appendChild(s);
};
loadJSfromFile("libs/canvasManager.js");
loadJSfromFile("libs/mainFunctions.js");
loadJSfromFile("libs/animations.js");
loadJSfromFile("libs/objects.js");
loadJSfromFile("libs/collisions.js");

问题是：我收到错误，因为本网站上的其他脚本声称库中的函数未定义。这些文件是异步加载的吗？如果是，如何在加载库之前停止加载页面？

Answer 1

我使用RequireJS，它比你想象的更有帮助。

您可以将其添加到您的html页面，如：

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

和data-main属性适用于您的main.js。无论何时您想使用脚本或其他外部JavaScript库，它都会对您有所帮助：

//let's say you have util.js in the scripts folder
require(["scripts/util"], function(util) {

});

它甚至修复了不同javascript库之间的冲突，它为jQuery及其AMD模块提供了非常好的解决方案，如：

require.config({
baseUrl: 'js/lib',
paths: {
    // the left side is the module ID, the right side is the path to
    //the jQuery file, relative to baseUrl. Also, the path should NOT include
    // the '.js' file extension. This example is using jQuery 1.9.0 located at
    // js/lib/jquery-1.9.0.js, relative to the HTML page.
        jquery: 'jquery-1.9.0'
    }
});

Answer 2

这是我用来在运行时加载单独的JS文件的代码。

 function loadScript(url, success) {
    var script = document.createElement("script");
    script.src = url;
    var head = document.getElementsByTagName("head")[0],
            done = false;
    script.onload = script.onreadystatechange = function() {
       if (!done && (!this.readyState ||
               this.readyState === "loaded" ||
               this.readyState === "complete")) {
          done = true;
          if (success)
             success();
          script.onload = script.onreadystatechange = null;
          head.removeChild(script);
       }
    };
    head.appendChild(script);
 }

然后，为了确保加载脚本，我检查了我想要使用的函数：

 var myModule = (function(my) {
    my.doOperations = function(a, b) {
       var ret = {};
       ret.c = my.addNumbers(a, b);
       ret.d = my.difNumbers(a, b);

       if (myModule.hasOwnProperty("multNumbers")) {
          ret.e = my.multNumbers(a, b);
       }
       else {
          myModule.printToPage("Script not loaded yet")
       }
       return ret;
    };
    my.printToPage = function(textToPrint) {
       var newDiv = document.createElement("div");
       newDiv.innerHTML = textToPrint;
       document.getElementsByTagName("body")[0].appendChild(newDiv);
    };
    return my;
 }(myModule || {}));

Answer 3

我实际上创建了一个可以帮助解决此问题的系统。您可以通过回调链使用它来加载一些公共库：

/* Initialize all external resources */
skitch.initLibs("jquery","js",function() {
    skitch.initLibs('bootstrap','js',function(){
        skitch.initLibs('bootstrap','css',function(){
            myCodeStart();
        });
    });
});
/* Begin Code */
function myCodeStart(){  
        alert("Everything's loaded!")
}

以下是可重用系统的代码：

var skitch = {
    initLibs: function (t, n, r) {
        if (n == "js") {
            if (t == "$" || t == "jquery" || t == "jQuery") {
                var i = document.getElementsByTagName("head")[0];
                var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "http://code.jquery.com/jquery-latest.min.js";
                s.onreadystatechange = r;
                s.onload = r;
                i.appendChild(s);
                console.log("jquery js")
            }
            if (t == "bootstrap") {
                var i = document.getElementsByTagName("head")[0];
                var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "http://twitter.github.io/bootstrap/assets/js/bootstrap.min.js";
                s.onreadystatechange = r;
                s.onload = r;
                i.appendChild(s);
                console.log("bootstrap js")
            }
        } else if (n == "css") {
            if (t == "bootstrap") {
                var o = document;
                var u = "myCss";
                if (!o.getElementById(u)) {
                    var i = o.getElementsByTagName("head")[0];
                    var a = o.createElement("link");
                    a.id = u;
                    a.rel = "stylesheet";
                    a.type = "text/css";
                    a.href = "http://twitter.github.io/bootstrap/assets/css/bootstrap.css";
                    a.media = "all";
                    a.onreadystatechange = r;
                    a.onload = r;
                    i.appendChild(a);
                    console.log("bootstrap css")
                }
            }
        }
    }
}

这不是一个完整的证明方法，并且需要在加载所有内容后发生内联脚本。我建议您查看RequireJS（http://requirejs.org/），了解完整的系统。

Answer 4

是的，默认情况下，脚本是异步加载的。我给你写了一个类似的代码并遇到了同样的问题。我的代码最初看起来像这样：

var scripts = [
  'http://' + window.location.host + '/jquery/jquery-1.11.2.min.js',
  'http://' + window.location.host + '/jquery-ui-1.11.4/jquery-ui.min.js',
  'http://' + window.location.host + '/d3/d3.min.js'
  'http://' + window.location.host + '/my/stuff.js'
];

var head = document.getElementsByTagName('head')[0];
for (i = 0; i < scripts.length; i++) {
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = scripts[i];
  head.appendChild(newScript);
}

发生的事情是必须重新加载带有应用程序的网页，因为在第一次尝试时由于某些原因导致jQuery加载太晚而且由于缺少依赖性而导致UI被破坏，所以基本上页面只是每次都正确加载第二次。在我禁用JS脚本的异步加载后，问题就消失了，这可以通过将脚本的async属性设置为false来完成：

var scripts = [
  'http://' + window.location.host + '/jquery/jquery-1.11.2.min.js',
  'http://' + window.location.host + '/jquery-ui-1.11.4/jquery-ui.min.js',
  'http://' + window.location.host + '/d3/d3.min.js'
  'http://' + window.location.host + '/my/stuff.js'
];

var head = document.getElementsByTagName('head')[0];
for (i = 0; i < scripts.length; i++) {
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = scripts[i];
  newScript.async = false;
  head.appendChild(newScript);
}

所以在你的情况下应该是：

function loadJSfromFile(src) {
    var h = document.getElementsByTagName('head').item(0);
    var s = document.createElement("script");
    //s.type = "text/javascript";
    s.src = src;
    s.async = false;
    h.appendChild(s);
};

使用javascript加载脚本以进行分页

4 个答案: