html中脚本插入的奇怪行为

Question

我想在页脚 html 部分插入 2 个脚本，但我的行为很奇怪。如果我在 html 本身中使用标签手动插入，它可以工作（index1.html）。但是，如果我使用 IIFE 创建标签并将它们插入相同的位置和相同的顺序 (index2.html)，控制台中会显示一个错误，告诉“未定义虚拟变量”。常识告诉我错误是可以的（因为dummy是在使用后定义的），但是为什么它适用于index1.html？

index1.html：

    ...
    <script src="script1.js" async></script>
    <script src="script2.js"></script>
    </body>
</html>

index2.html：

    ...
    <script>
        (function(){
            var loadScript = function(data, callback) {
                var script = document.createElement('script');
                script.src = data.src;
                if (data.opts) {
                    if (data.opts.async) script.async = data.opts.async;
                }
                document.body.appendChild(script);
            }

            var loadScriptRecursive = function(scripts, index) {
                loadScript(scripts[index], function () {
                    if (++index < scripts.length) loadScriptRecursive(scripts, index);
                });
            }

            var scripts = [{src: 'script1.js'}, {src: 'script2.js', opts: {async: false}}];
            loadScriptRecursive(scripts, 0);
        })()
    </script>

    </body>
</html>

script1.js：

$(document).ready(function () {
    if (dummy) ...
    ...
}

script2.js：

var dummy = true

Answer 1

首先，您声明callback，但从来没有我们。我假设你的意思是这样的script.onload = callback;。

(function() {
  var loadScript = function(data, callback) {
    var script = document.createElement("script");
    script.src = data.src;
    script.onload = callback; // NEW LINE
    if (data.opts) {
      if (data.opts.async) script.async = data.opts.async;
    }
    document.body.appendChild(script);
  };

  var loadScriptRecursive = function(scripts, index) {
    loadScript(scripts[index], function() {
      if (++index < scripts.length) {
        loadScriptRecursive(scripts, index);
      }
    });
  };

  var scripts = [
    { src: "script1.js" },
    { src: "script2.js", opts: { async: false } }
  ];
  loadScriptRecursive(scripts, 0);
})();

但这还不足以解决这个问题，因为$(document).ready()。

让我们看看文档是怎么说的：

.ready() 方法提供了一种在页面的文档对象模型 (DOM) 变得可以安全操作时立即运行 JavaScript 代码的方法。 [jQuery]

当初始 HTML 文档完全加载和解析时触发 DOMContentLoaded 事件，无需等待样式表、图像和子框架完成加载。 [MDN]

在第一个示例中，DOMContentLoaded 在 JS 文件加载后触发：

在第二个示例中，DOMContentLoaded 立即触发，无需等待 JS 文件：

---

这就是为什么你需要使用$(window).on("load", function() {}); 而不是$(document).ready(function() {});