requirejs加载顺序_Javascript文件加载：LABjs和RequireJS

传统上，加载Javascript文件都是使用

就像下面这样：

(1)严格的读取顺序。由于浏览器按照

(2)性能问题。浏览器采用"同步模式"加载

为了解决这些问题，可以使用DOM方法，动态加载Javascript文件。

function loadScript(url){

var script = document.createElement("script");

script.type = "text/javascript";

script.src = url;

document.body.appendChild(script);

}

这样做的原理是，浏览器即时创造出一个

外部函数库LABjs和RequireJS，可以帮助我们更有效地管理Javascript加载。

下面根据ScriptJunkie的文章，举一个最简单的例子，来说明这两个函数库的基本用法。更高级的用法，请参阅它们的文档。

initScript1();

initScript2();

initScript3();

上面这段代码，将依次加载4个javascript文件：script1.js、script2-a.js、script2-b.js和script3.js。在加载完前三个文件后，运行两个函数initScript1()和initScript2()；加载完第四个文件后，再运行函数initScript3()。

下面，用LABjs对其进行改写：

$LAB

.script("script1.js").wait()

.script("script2-a.js")

.script("script2-b.js")

.wait(function(){

initScript1();

initScript2();

})

.script("script3.js")

.wait(function(){

initScript3();

});

首先，$LAB对象替代了

这里需要注意的是，可以同时运行多条$LAB链，但是它们之间是完全独立的，不存在次序关系。如果你要确保一个Javascript文件在另一个文件之后运行，你只能把它们写在同一个链操作之中。只有当某些脚本是完全无关的时候，你才应该考虑把它们分成不同的$LAB链，表示它们之间不存在相关关系。

接下来是requireJS的改写：

require([

"script1.js",

"script2-a.js",

"script2-b.js",

"script3.js"

],

function(){

initScript1();

initScript2();

initScript3();

}

);

require()接受两个参数，第一个数组表示所要加载的Javascript文件，第二个是加载完成后所要运行的回调函数。原生的require()不支持按次序加载，所以四个Javascript文件到底先加载哪个，无法事前知道，require()只保证这四个文件全部加载完成之后，才会运行所指定的回调函数。

如果按次序加载对你很重要，你可以使用官方提供的order插件。

(完)