javascript - 如何创建 AJAX 半同步行为

Question

在想出一种简单的方法来动态加载和链接存储在服务器上但显然在客户端初始化的 HTML Canvas 类之前，上个月的大部分时间我都在用头撞墙(当顺序在异步环境中很重要时，比听起来更难)。

我想知道是否有人可以帮我找到一种方法来加载简单的 javascript 脚本。让我们定义一个 load('foo.js')指示客户端加载脚本的函数 foo.js从服务器并将其作为 javascript 代码执行。

给定三个文件，存储在服务器上:

A.js

a = 10;

B.js

load('A.js');
b = a + 10;

C.js

load('B.js');
c = b + 10;

如果客户端发出命令 load('C.js');实现它的最简单/最可靠的方法是什么。我的一个想法是在服务器端扫描代码并立即返回所有脚本。这需要最少量的 php 请求。但是，如果客户端已经请求了C.js以前，脚本应该存在于客户端，这将是无效的，特别是如果 C.js及其所有依赖文件都很大。我考虑的另一个选择是将所有这些服务器端脚本包装在一个对象中，例如 C.js。以上:

{
  depenencies: ['B.js'] ,
  code : 'c.age = b.age + 10;'
}

我只是不知道如何“暂停”脚本的执行 C.js在load('B.js')之后语句，然后在 B.js 之后恢复它已加载。

编辑 感谢 redsqaure 建议 yepnope 和 requirejs。不幸的是，出于几个原因我不喜欢它们。首先，requirejs 很难(我相信我会因此而受到批评)。我对此的主要提示是，如果它这么难学，我还不如自己重新创造它，在这个过程中学习它，并更好地控制它。其次，它需要你改变你的写作风格。切换到 Dojo 并不得不使用 dojo.declare("ClassName", [ParentA,ParentB], {...});声明类是一回事，但在 require(['A','B',...], function(){}); 中包装每个 代码片段是另一个。最后，我不知道指示在哪里查找文件会有多简单。我希望用户能够在服务器端定义“PATH”变量，并在“PATH”的每个文件夹/子文件夹中进行搜索

Answer 1

取决于您想要的优化程度。您可以走同步 XHR 的路线，也可以使用回调(异步和推荐)。如果您选择第二条路线，您的代码将类似于:

// Say C.js is dependent on A.js and B.js..
load(["A.js","B.js"], function() {       
     // code goes here    
});

编辑

在您反馈您想要的内容后再看一遍在某种程度上是可能的，但是会很脆弱并且很难用 javascript 编写。下面我有一个依赖加载器的示例/未经测试的实现，其中一个文件只能调用一次 load("file.js") 。对于多个可能的依赖关系，这将更加复杂。我还假设这些文件来自同一个域。

// Usage: load("A.js")
// A.js -> B.js -> C.js
window.load = (function() {

    var loaded = {};

    return function(str, /* internally used */ callback) {

        if(!loaded[str]) {

            loaded[str] = true;

            $.get(str, function(data) {
                var matches = data.match(/load\(['|"](.*)["|']\)/);

                if(matches.length > 1) { // has deps

                    window.load(matches[1], function() {
                        window.eval(data);
                        if(!!callback) callback();
                    });

                } else { // no deps
                    window.eval(data);
                }

            });

        } 
    }
})();