Question

当使用importjs（）类型的函数时（参见下面的示例），jQuery似乎在其后面的代码之前没有加载。

这是一个示例html文件：

<html>
  <head></head>
  <body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      function importjs(jsFile) {
        var body = document.getElementsByTagName('head').item(0);
        var scpt = document.createElement('script');
        scpt.src = jsFile;
        scpt.type = 'text/javascript';
        body.appendChild(scpt);
      }
      var f1="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
      //importjs(f1);
      var $j=jQuery;
      alert("hello stackoverflow!");
    </script>
  </body>
</html>

使用上面的代码，警报应该成功触发。

接下来，注释掉第一个脚本块，即显式加载jQuery的脚本块，并取消注释第二个脚本块中的importjs（f1）行。这次，警报不开火，至少在firefox和safari中。

现在，在“var $ j = jQuery”行之前添加一个额外的警报。对我来说，它适用于两种浏览器，无论我等待的时间长短。一个setTimeout可能也可以做到这一点，但它也不是一个理想的编程方式。

如果javascript是单线程的，为什么importjs会失败？是因为importjs创建的新元素在第一个块完成之前不会被“执行”，或者新元素是否应该在创建后立即执行？

Answer 1

这里有几个问题：

你有jQuery重复，一个在html中，一个在js中

动态添加的javascript将无法立即使用如果以这种方式加载脚本，依赖代码应该在回调函数中

function importjs(jsFile, callback) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = jsFile;
    script.type = 'text/javascript';
    script.onload = script.onreadystatechange = function() {
      // execute callback
      if (callback) callback();
      // prevent memory leak in IE
      script.onload = null;
      head.removeChild(script);
    };
    head.appendChild(script);
}

然后你应该用它作为：

importjs("jquery.js", function(){
    // all jQuery dependant code
    // goes here...
});

更新

有一个更强大的解决方案，包括javascript文件，允许您：

包含多个相关的文件
确保按顺序执行
以非阻塞方式加载它们（与其他资源并行）

我还在工作 on this script ，但现在几乎可以正常工作。一定要看看。

它结合了不同技术的优点，为页面加载时间带来了巨大的好处。以下是相关文章： Loading Scripts Without Blocking

语法为：

include(['jquery.js','jquery-ui.js'], myjQueryCode); // executed in order

为什么不加载jQuery？

1 个答案:

更新