javascript - 为什么将我的 JavaScript 库包装在一个匿名函数中可以修复我的竞态条件？

Question

问题:为什么将我的 JavaScript 库包装在匿名函数中可以修复我的竞争条件？

注意:我也对有关同步和异步加载外部 JavaScript 资源的优秀解决方案的评论感兴趣。

我正在从事一个涉及使用 crossrider 编写浏览器扩展的项目。如果您不熟悉跨骑手扩展，它们是用 JavaScript 实现的，您有一个可以与应用程序页面通信的后台页面。应用程序页面可以与每个打开的选项卡一起运行，并且可以操作 DOM。我计划在用户请求打开时远程加载大部分扩展代码。最近我在向页面 referencing Raphael 添加脚本标记时遇到了竞争条件，然后是我 build 的东西 out of graffle

据我了解，如果页面加载时已经存在这些脚本标签，那么执行将同步进行，尽管由于我附加了脚本标签，执行是异步进行的。这是大多数人似乎都有的相反问题。弄乱它我了解到将我的代码 graffle 代码包装在一个匿名函数中可以修复我的竞争条件。为什么？我在 wrapping whole Javascript files in anonymous functions 上阅读了这篇文章，这似乎与竞争条件没有任何关系。

我的调用代码:

var scriptsToLoad   = [ "http://example/Scripts/lib/raphael.js",
                "http://example/Scripts/lib/graffle.js",
                "http://example/Scripts/lib/log4javascript.js"];

for(var i in scriptsToLoad) {
    (function(){
        $("head")
            .append($("<script></script>")
                .attr("type", "text/javascript")
                .attr("src", scriptsToLoad[i]));
    })()
}

Answer 1

关于您的问题，我认为没有针对 <script /> 的顺序设置任何特定标准。标签被加载和评估；很容易引入竞争条件。

关于 (a) 同步脚本加载，使用 jQuery，执行此操作:

var scriptsToLoad = [
    "http://example/Scripts/lib/raphael.js",
    "http://example/Scripts/lib/graffle.js",
    "http://example/Scripts/lib/log4javascript.js"
];

$.each(scriptsToLoad, function (index, script) {
    $.ajax({
        url      : script,
        async    : false,
        dataType : 'script'
    });
});