不存在次序关系
标签:
什么是LABjsLABjs是一个动态的脚本加载器,LABjs的界说特性是能够在浏览器允许的范畴内以最快的速度并行加载所有JavaScript文件,但是如果文件之间存在依赖关系,,则可以选择确保正确的执行挨次。
总计来说就是:动态并行加载脚本文件以及打点加载脚本文件的执行挨次
使用要领$LAB东西替代了<script>标签,然后.script()要领暗示加载Javascript文件,不带参数的.wait()要领暗示当即运行适才加载的Javascript文件,带参数的.wait()要领也是当即运行适才加载的Javascript文件,并在运行完毕后还运行参数中指定的函数。
LABjs鼓励链式操纵,因此每个要领城市返回$LAB东西的引用,需要下载多个脚本文件,只需要链式挪用$LAB.script()要领
这里需要注意的是,可以同时运行多条$LAB链,但是它们之间是完全独立的,不存在序次关系。如果你要确保一个Javascript文件在另一个文件之后运行,你只能把它们写在同一个链操纵之中。只有当某些脚本是完全无关的时候,你才应该考虑把它们分成差此外$LAB链,暗示它们之间不存在相关关系。
注意:wait()不会影响并行下载,所有的文件都是并行下载,wait()决定哪个先执行
改写<script src=http://www.mamicode.com/"script1.js"></script> <script src=http://www.mamicode.com/"script2-a.js"></script> <script src=http://www.mamicode.com/"script2-b.js"></script> <script type=http://www.mamicode.com/"text/javascript"> initScript1(); initScript2(); </script> <script src=http://www.mamicode.com/"script3.js"></script> <script type=http://www.mamicode.com/"text/javascript"> initScript3(); </script>
上面这段代码,将依次加载4个javascript文件:script1.js、script2-a.js、script2-b.js和script3.js。在加载完前三个文件后,运行两个函数initScript1()和initScript2();加载完第四个文件后,再运行函数initScript3()。
下面,用LABjs对其进行改写:
<script src=http://www.mamicode.com/"LAB.js"></script> <script type=http://www.mamicode.com/"text/javascript"> $LAB .script("script1.js").wait() .script("script2-a.js") .script("script2-b.js") .wait(function(){ initScript1(); initScript2(); }) .script("script3.js") .wait(function(){ initScript3(); }); </script>
实例1:/** *三个js文件之间不存在依赖,异步加载 **/ <script src="http://www.mamicode.com/LAB.js"></script> $LAB .script("script1.js") .script("script2.js") .script("script3.js") .wait(function(){ // 期待所有script加载完再执行这个代码块 script1Func(); script2Func(); script3Func(); });
实例2:
/**
*为加载的js文件指定类型
**/
<script src="http://www.mamicode.com/LAB.js"></script>
$LAB
.script({ src: "script1.js", type: "text/javascript" })
.script("script2.js")
.script("script3.js")
.wait(function(){ // 期待所有script加载完再执行这个代码块
script1Func();
script2Func();
script3Func();
});
<script src="http://www.mamicode.com/LAB.js"></script> $LAB.script("script1.js","script2.js","script3.js") .wait(function(){// 期待所有script加载完再执行这个代码块 script1Func(); script2Func(); script3Func(); });
实例4:温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/32192.html
- 上一篇:原生JS轮播图
- 下一篇:带你了解 Webpack 的产生背景