如何创建 AJAX 半同步行为

Question

上个月的大部分时间我都在苦苦挣扎，直到我想出了一种简单的方法来动态加载并将存储在服务器上的 HTML 画布类链接在一起，但显然，在客户端上初始化（比当排序在异步环境中很重要时，它会发出声音）。

我想知道是否有人可以帮助我找到一种加载简单 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 的执行。在 load('B.js') 语句之后调用 js，然后在加载 B.js 后恢复它。

编辑 感谢 redsqaure 建议 yepnope 和 requirejs。不幸的是，我不喜欢它们有几个原因。其一，requirejs 很困难（我确信我会因此而受到批评）。我对此的主要抱怨是，如果它这么难学，我还不如自己重新创建它，在这个过程中学习它，并更好地控制它。其次，它需要你改变你的写作风格。切换到 Dojo 并必须使用 dojo.declare("ClassName", [ParentA,ParentB], {...}); 来声明类是一回事，但包装 everyrequire(['A','B',...], function(){}); 中的strong> 代码片段是另一个。最后，我不知道指示在哪里查找文件会有多简单。我希望用户能够定义“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);
                }

            });

        } 
    }
})();

Answer 2

为什么不研究像 yepnope.js 或 require.js