动态加载JS函数,加载和施行

By admin in 4858美高梅 on 2019年4月14日

  在《高性能JavaScript》一书中涉及了LABjs以此用来加载JavaScript文件的类库,LABjs是Loading
And Blocking
JavaScript
的缩写,顾名思义,加载和阻塞JavaScript,而它的API
script()和wait()则优雅地促成了那多个成效,笔者在高品质JavaScript
加载和施行一文中也不难讲解了那多少个主导API的用法。当然,LABjs还有越来越多的API,本文用实例讲解下LABjs其余API。

普通的,当大家必要加载js文件的时候都会接纳script标签来贯彻,类似于如下代码:

怎么用最连忙的办法把javascript代码加载到页面中吗?
一、脚本地点
种种文件必须等到前贰个文本下载并履行到位才会开首下载。在那几个文件各种下载进度中,用户观察的是一片空白。称为脚本阻塞。因而推荐将具有的竹签尽只怕放到标签的最底层,以尽量减少对全体页面下载的熏陶。

详谈LABJS按需动态加载js文件,详谈labjs动态js

LABjs 是2个十分小的 JavaScript 工具,用来依照必要加载 JavaScript
文件,通过应用该工具得以升级页面包车型客车性质,制止加载不需用到的 JavaScript
文件,能够兑现动态并行加载脚本文件,以及管理加载脚本文件的执行各类。

简不难单示例

$LAB
.script("script1.js", "script2.js", "script3.js")
.block(function(){
  // wait for all to load, then do something
  script1Func();
  script2Func();
  script3Func();
});

介绍下LABJS的多少个实例:
实例1:

$LAB
  .script("script1.js")
  .script("script2.js")
  .script("script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

实例2:

$LAB 
  .script({ src: "script1.js", type: "text/javascript" })
  .script("script2.js")
  .script("script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

实例3:

$LAB
  .script("script1.js", "script2.js", "script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

实例4:

$LAB
  .script( [ "script1.js", "script2.js" ], "script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

实例5:

$LAB
  .script("script1.js").wait() // 空的wait()只是确保script1在其他代码之前被执行
  .script("script2.js") // script2 和 script3 依赖于 script1
  .script("script3.js").wait() // 但是script2 和 script3 并不互相依赖,可以并行下载
  .script("script4.js") // script4 依赖于 script1, script2 及 script3
  .wait(function(){script4Func();});

实例6:

$LAB
  .script("script1.js") // script1, script2, and script3 之间没有依赖关系,
  .script("script2.js") // 所以可以任意顺序执行
  .script("script3.js")
  .wait(function(){ // 如果需要,这里当然可以执行javascript函数
    alert("Scripts 1-3 are loaded!");
  })
  .script("script4.js") // 依赖于 script1, script2 及 script3
  .wait(function(){script4Func();});

实例7:

$LAB
  .setOptions({AlwaysPreserveOrder:true}) // 设置每个脚本之间等待
  .script("script1.js") // script1, script2, script3, script4 互相依赖
  .script("script2.js") // 并且并行下载后循序执行
  .script("script3.js")
  .script("script4.js")
  .wait(function(){script4Func();});

实例8:

$LAB
  .script(function(){
    // `_is_IE`的值ie为true ,非ie为false
    if (_is_IE) {
      return "ie.js"; // 如果是ie则这个js会被加载
    }
    else {
      return null; //如果不是ie这个代码就会被略过
    }
  })
  .script("script1.js")
  .wait();

LABjs加载格局

LABjs里的动态加载脚本文件,是指页面包车型大巴js脚本执行时,通过各样措施去加载外部的js(首要差距于html页面里,通过<script>标签静态加载的本子)

动态加载脚本的点子有那多少个,优缺点不1,此处不赘述,有趣味的童鞋能够参见本文末尾的参考链接
:)。

LABjs里首要利用了三种技术,分别为Script Element、XH讴歌MDX Injection以及Cache
Trick

首先对那二种加载格局开始展览简短介绍,第陆有的再分析LABjs源码达成里面对着两种艺术分别的选拔意况

Script Element(LABjs暗许选择加载形式)

最常见的脚本动态加载形式,优点很多,包含:壹、完毕不难 二、可跨域
三、不会堵塞别的能源的加载 等

Opera/Firefox(老版本)下:脚本执行的逐壹与节点被插入页面包车型客车11一致

IE/Safari/Chrome下:执行顺序不能够获得保障

注意:

新本子的Firefox下,脚本执行的1一与插入页面包车型地铁11不必然一致,但可透过将script标签的async属性设置为false来担保顺序执行

老版本的Chrome下,脚本执行的逐1与插入页面包车型大巴一一不自然1致,但可经过将script标签的async属性设置为false来确定保证顺序执行

XHR Injection
透过ajax请求加载脚本文件,然后再经过以下格局实施:
eval:常见方法
XH卡宴 injection:创立3个script成分,并将请加载的脚本文件的始末注入
注重范围:无法跨域
Cache Trick(强依赖于浏览器的特征实现,不推荐应用)
当您将script成分的type属性设置为浏览器不认识的值,比如”text/cache”、”text/casper”、”text/hellworld”等,不一致浏览器的一言一行如下:
IE/Safari/Chrome(老版本)里:脚本照常加载,但不会执行,假如浏览器未有禁止使用缓存,加载后的脚本会被浏览器缓存起来,当供给用到
的时候,只需求重新创立个script标签,将type设为不易的值,src指向后边请求的公文url即可(相当于从缓存里读文件)
Opera/Firefox:不加载
备注:
强依赖于浏览器的特色达成,有不小希望随着浏览器特性达成的变更而失效,不推荐使用
新本子的chrome浏览器,将script成分的type设置为非”text/javascript”,不会再对剧本文件进行加载。

LABjs里有关脚本加载接纳方案的判断

忽略技术细节,通过一段伪代码来叙述LABjs里面包车型地铁兑现,大约为:
首先判断是或不是对请求的台本进行预加载(是还是不是实行预加载的论断标准看伪代码注释);
如举办预加载,再判断浏览器是还是不是援助真正的预加载;如援助真正的预加载,则预加载之;如否,判断请求的本子是或不是跟当前页面同域,如实,采取XH昂CoraInjection,如否,采取Cache Trick;
如不实行预加载,判断浏览器支不协助script成分的async属性(见伪代码注释),如是,设置async属性,并呼吁脚本文件;如否,直接通过script成分加载脚本文件;
 

if(ifPreloadScript){  //当请求的脚本文件是否进行预加载:1、需要预加载 2、浏览器支持预加载
  if(supportRealPreloading){  //如果支持真正的预加载
    if(supportPreloadPropNatively){  //支持通过设置script标签的preload属性,实现script的预加载,以及分离加载和执行
                    //Nicholas C. Zakas大神的美好愿望,尚未有浏览器支持:/blog/2011/02/14/separating-javascript-download-and-execution/
      script.onpreload = callback;
      script.newPreload = true;
      script.src = targetUrl;
    }else{
      script.onreadystatechange = callback;  //其实就是指IE浏览器,假设指定了script元素的src属性,IE浏览器里会立即加载
      script.src = targetUrl;  //即使script元素没有被插入页面,callback为预加载后的回调
    }
  }
  else if(inSameDomain){  //非跨域,采用XHR Injection:请求的脚本与当前页面处于同一个域
    xhr = new XMLHttpRequest();  //由于上个判断已经将IE无情地抛弃在这个条件分支之外,所以大胆地用 new XMLHttpRequest()吧
    xhr.onreadystatechange = callback;
    xhr.open("GET",targetUrl);
    xhr.send();
  }
  else{  //最无奈的后招,Cache Trick,新版chromei已经不支持
    script.onload = callback;
    script.type = 'text/cache';  
    script.src = targetUrl;
  }
}else{
  if(canContrlExecutionOrderByAsync){  //如果能够通过script元素的async属性来强制并行加载的脚本顺序执行
                    //kyle大神着力推进的提案,目前已被html5小组接受并放入草案:/Dynamic_Script_Execution_Order#My_Solution
    script.onload = callback;
    script.async = false;  //将script元素的async设为false,可以保证script的执行顺序与请求顺序保持一致
    script.src = targetUrl;
  }
  else{
    script.onload = callback;
    script.src = targetUrl;  
  }
}

实则,当你在页面创立叁个img节点,并将其src指向一个剧本文件,在1部分浏览器里一样能够起到文件预加载的法力,那么LABjs的小编是或不是绝非想到那或多或少啊?

LABjs 是一个不大的 JavaScript 工具,用来依照须要加载 JavaScript
文件,通过行使该工具得以升高…

$LAB.setGlobalDefaults() & $LAB.setOptions()

  两者所能设置的参数完全1致,不相同的是,前者是全局设置,功能在装有的$LAB链上;后者现身在某条链的始发地方(前边接script()、wait()等),该装置只效劳在那条链上。该参数能够是2个含有四个键值对的对象

  • AlwaysPreserveOrder

  三个布尔值(私下认可false),假设设置为true,则每一个script()后都会暗中同意设置1个wait(),使得链上的脚本2个个实施。

$LAB
  .setOptions({AlwaysPreserveOrder:true}) // tells this chain to implicitly "wait" on 
                                          // execution (not loading) between each script
  .script("script1.js") // script1, script2, script3, and script4 *DO* depend on each 
  .script("script2.js") // other, and will execute serially in order after all 4 have have
  .script("script3.js") // loaded in parallel
  .script("script4.js")
  .wait(function(){script4Func();});
  • UseLocalXHR

  3个布尔值(暗中认可true),假诺是true的话,LABjs会用XHR
Ajax去预加载同域的脚本文件。值得注意的是,只使用在老式的Webkit浏览器(那3个既无法采取ordered-async也无法实现真正的预加载的浏览器),而且同域的气象下,该装置才起效(不然直接无视)

  • CacheBust & AllowDuplicates

  LABjs对于缓存有一些竟然的处理(关于缓存,能够参见小编后边的一篇小说浏览器缓存机制浅析),比如如下代码:

$LAB.script('index.js');

  极粗略对啊?第3回载入,未有其它难题,HTTP200从server端下载。但是f五后:4858美高梅 1

动态加载JS函数,加载和施行。  (20一5-8-3 这几个难题不怎么好奇,有时HTTP30四,有时HTTP200from cache
作者也在github上理解了我 LABjs reads from cache when
f5,回复的大概意思是cache和labjs未有其他关联,只和服务器和浏览器设置有关)

  居然是从缓存读取的!那算得服务端的改观,对它不起效果!而平日情状下f五后是会向服务器发送请求的,假诺服务端文件并没有改动再次回到HTTP30四读取缓存,假诺改动了文件直接load新的。针对那些标题我们能够运用CacheBust选项:

$LAB.setGlobalDefaults({CacheBust: true})
$LAB.script('index.js');

  那样就能担保每趟都从服务端读取文件(尚未读取缓存)。

  还有贰个难题,对于几个一律的央求,LABjs暗许只会履行1遍:

$LAB.script('index.js').script('index.js');
$LAB.script('index.js');

  实际上index.js这几个文件只举行了一遍!若是index.js里的代码是打字与印刷hello
world,也便是说只会被打字与印刷一遍。怎样完结能打字与印刷一回?用AllowDuplicates:

$LAB.setGlobalDefaults({AllowDuplicates: true})
$LAB.script('index.js').script('index.js');
$LAB.script('index.js');

  实际上上边的代码,就算会实施二遍index.js,不过请求唯有二回,别的八个都是缓存读取,而且如前方所说,借使服务端修改了,也会从缓存读取,那太可怕了。所以AllowDuplicates能够相配CacheBust使用

$LAB.setGlobalDefaults({AllowDuplicates: true, CacheBust: true})
$LAB.script('index.js').script('index.js');
$LAB.script('index.js');

4858美高梅 2

  其实正是带了壹串代表呼吁唯1的字符串,那在ajax请求中很宽泛。

  • BasePath

  二个字符串(默许空串),会将以此字符串加在各类script()里的U奥迪Q伍L的最前边。

  • Debug

  二个布尔值(暗中同意false),假诺翻开debug选项的话,会在控制台打字与印刷音信,须求专注的是,唯有应用了LAB-debug.min.js或然LAB.src.js该选拔才work。

代码如下:

<html>
<head>
    <title>script example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>Hello world!</p>
    <!-- 推荐的脚本存放位置 -->
    <script type="text/javascript" src="file1.js"></script>
    <script type="text/javascript" src="file2.js"></script>
    <script type="text/javascript" src="file1.js"></script>
</body>
</html>

$LAB.script() & $LAB.wait()

  script()里的参数能够是不少样式,比如字符串(文件的相对路径恐怕相对路径)、对象(src、type、charset
src务必)、数组恐怕措施(也许前者们的重组),更加多demo能够参考Example
8
below。前三者很好精晓,那里大约提下参数为function的气象,当script()里的参数是个匿名的function的时候,该function会马上执行,它能够return贰个值,而该值必须是以上说的string、object恐怕array情势,相当于给该script()赋值了。

$LAB
  .script(function(){
    // assuming `_is_IE` defined by host page as true in IE and false in other browsers 
    if (_is_IE) {
      return "ie.js"; // only if in IE, this script will be loaded
    }
    else {
      return null; // if not in IE, this script call will effectively be ignored
    }
  })
  .script("script1.js")
  .wait();

<script type=”text/javascript” src=”example.js”></script>

二、社团脚本
(一)浏览器在解析HTML页面包车型大巴进程中,每遇到一个<script>标签,都会因履行脚本而导致一定的延时,所以收缩页面所包涵的<script>标签数量有助于创新页面性能。
(二)HTTP请求会拉动十三分的性质费用,因此下载单个拾0KB的文书将比下载四个25KB的文本更加快。即,缩短页面中外链脚本文件的数量将会改良质量。
汇总:用文件打包工具把七个文件合并成二个,那样只要求引用一个<script>标签,就能够削减质量消耗。

$LAB.queueScript() & $LAB.queueWait() & $LAB.runQueue() & $LAB.sandbox()

  script()和wait()会使得脚本立时实施(除非设置定时器),可是queueScript()和queueWait()能使得脚本在自由时刻执行,执行的时候带上runQueue()就行了。

var a = $LAB.queueScript('index.js').queueWait(function() {
  console.log('hello world');
});

setTimeout(function() {
  a.runQueue()
}, 1000);

  如上脚本就能在1000ms后实施,这样的机能壹般script()协作定时器也能实现,然则在今后某一不显明时刻执行就万分了(比如说1段钦命代码后)。假诺有七个链要在将来某时刻执行吗?

var a = $LAB.queueScript('index.js').queueWait(function() {
  console.log('hello world');
});

setTimeout(function() {
  a.runQueue()
}, 1000);

var b = $LAB.queueScript('index2.js').queueWait(function() {
  console.log('hello world');
});

setTimeout(function() {
  b.runQueue()
}, 2000);

  如上代码并没能得到预想的结果(实际上一千ms后一起输出),那时就须要用sandbox()成立贰个新的实例。

var a = $LAB.queueScript('index.js').queueWait(function() {
  console.log('hello world');
});

setTimeout(function() {
  a.runQueue()
}, 1000);

var b = $LAB.sandbox().queueScript('index2.js').queueWait(function() {
  console.log('hello world');
});

setTimeout(function() {
  b.runQueue()
}, 2000);

但是一向使用script标签来加载js文件会有如下一些弱点:

<html>
<head>
    <title>script example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>Hello world!</p>
    <!-- 推荐的脚本存放位置 -->
    <script type="text/javascript" src="file1.js"></script>
</body>
</html>

$LAB.noConflict() 

  使用noConflict()会将日前版本的LABjs回滚到旧的本子。(20一伍-0八-0肆这些解释应该是错的)

 

  read more
from  LAB documentation

1.严谨的读取顺序。由于浏览器遵照<script>在网页中冒出的次第,读取Javascript文件,然后立时运营,导致在七个公文互相正视的状态下,依赖性最小的文书必须放在最前方,正视性最大的公文必须放在最前面,不然代码会报错。

三、无阻塞的台本
秘诀:在页面加载成功后才加载JavaScript代码。
(壹)延迟的脚本
富含defer属性的JavaScript文件将在页面解析到<script>标签时开头下载,但并不会履行,下载时,不会阻塞浏览器的其它进度,能够与页面中此外国资本源互相下载。它下载完成后,在onload事件被触发前进行。
该属性只有IE四+ 和 firefox三.5+ 的浏览器帮忙。

二.质量难题。浏览器选用”同步方式”加载<script>标签,也正是说,页面会”堵塞”(blocking),等待javascript文件加载成功,然后再运转前边的HTML代码。当存在多个<script>标签时,浏览器不可能同时读取,必须读取完三个再去读取另八个,造成读取时间大大延伸,页面响应缓慢。

<head>
    <title>script defer example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <script defer>
        alert("defer");
    </script>
    <script>
        alert("script");
    </script>
    <script>
        window.onload = function(){
            alert("load");
        }
    </script>
</body>
</html>

其权且候大家就会想到去动态加载JS,动态加载js的贯彻格局类似于如下代码

<small>该 示例 在支撑defer属性的浏览器上,弹出的相继是:script ,
defer , load.</small>
(二)动态脚本文件
该脚本文件被添加到页面时先导下载,无论在哪天起步下载,文件的下载和履行进度不会卡住页面其余进度。

代码如下:

<html>
<head>
    <title>动态 script example</title>
</head>
<body>
    <script>
        function loadScript( url , callback ){
            var script = document.createElement("script");
            script.type = "text/javascript";
            if( script.readyState ){ // IE
                script.onreadystatechange = function(){
                    if( script.readyState == "loaded" || script.readyState == "complete" ){
                        script.onreadystatechange = null;
                        callback();
                    }
                }
            } else { // 其他浏览器
                script.onload = function(){
                    callback();
                }
            }
            script.src = url ;
            document.getElementByTagName("head")[0].appendChild(script);
        }
        loadScript("file1.js" , function(){
            alert("file is loaded !");
        })
    </script>
</body>
</html>

/*
*@desc:动态添加script
*@param src:加载的js文件的地方
*@param callback:js文件加载成功未来须求调用的回调函数
*@demo:
addDynamicStyle(”,
function () {
    alert(‘携程服务器上的lab.js加载完毕’)
});
*/
function addDynamicJS(src, callback) {
    var script = document.createElement(“script”);
    script.setAttribute(“type”, “text/javascript”);
    script.src = src[i];
    script.charset = ‘gb2312’;
    document.body.appendChild(script);
    if (callback != undefined) {
        script.onload = function () {
            callback();
        }
    }
}

<small>该 示例
用到<script>的readyState属性,该属性有七种取值:
uninitialized 伊始状态
loading 开端下载
loaded 下载完结
interactive 数据形成下载但尚不足利用
complete 全数数据已预备就绪</small>
(叁)XMLHttpRequest(xhr对象) 脚本注入
优点壹:你能够把剧本的推行推迟到您准备好的时候。
可取二:在具有主流浏览器都能健康使用。
缺陷:JavaScript文件必须与所请求的页面属于同一的域。

那样不会促成页面堵塞,但会造成其余一个难点:那样加载的Javascript文件,不在原始的DOM结构之中,因而在DOM-ready(DOMContentLoaded)事件和window.onload事件中钦赐的回调函数对它不行。

<html>
<head>
    <title>xhr script example</title>
</head>
<body>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open("get" , "file1.js" , true);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304 ){
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.text = xhr.responseText;
                    document.body.appendChild(script);
                }
            }
        }
        xhr.send(null);
    </script>
</body>
</html>

其一时半刻候大家就会想到用部分表面函数库来有效的管住JS加载难题。

<small>那段代码发送3个get请求获取file1.js文书。事件处理函数onReadyStateChange
检查readyState 是还是不是为4 ,同时校验HTTP状态码是不是可行(2XX
表示有效响应,30四象征是从缓存读取)。若是接收了实惠响应,就会成立三个<script>成分,设置该因素的text属性为从服务器收到到的responseText。</small>
(四)作者推荐的无遮拦方式

上面进入正题说说LAB.js

  • 第一种:YUI3的方式
    YUI3
    API:https://github.com/yui/yui3
    安排意见:由页面中的少量代码来加载丰硕的成效组件。

LAB.js

倘诺我们选择守旧的秘诀来加载js的话,写的代码一般会如下方代码所示风格。

<html>
<head>
    <title>YUI3 example</title>
</head>
<body>
    <script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
    <script>
    // Create a YUI sandbox on your page.
    YUI().use('node', 'event', function (Y) {
        // The Node and Event modules are loaded and ready to use.
        // Your code goes here!
    });
    </script>
</body>
</html>

代码如下:

  • 第二种:LazyLoad类库
    LazyLoad源文件代码:http://github.com/rgrove/lazyload/

<script src=”aaa.js”></script>
    <script src=”bbb-a.js”></script>
    <script src=”bbb-b.js”></script>
    <script type=”text/javascript”>
        initAaa();
        initBbb();
    </script>
    <script src=”ccc.js”></script>
    <script type=”text/javascript”>
        initCcc();
    </script>

只要大家应用LAB.js的话,要实现上述代码功用,则运用如下格局

<html>
<head>
    <title>LazyLoad example</title>
</head>
<body>
    <script type="text/javascript" src="lazyload.js"></script>
    <script>
        LazyLoad.js("the-rest.js",function(){

            Application.init();
        });
    </script>
</body>
</html>

代码如下:

  • 第三种:LABjs
    LazyLoad源文件代码:https://github.com/getify/LABjs
    特征:通过wait()管理重视关系

<!–先加载lab.js库–>
    <script
src=”;
    <script type=”text/javascript”>
        $LAB
       
.script(“aaa.js”).wait()//不带参数的.wait()方法表示即刻运维刚才加载的Javascript文件
        .script(“bbb-a.js”)
        .script(“bbb-b.js”)//依次加载aaa.js bbb-a.js bbb-b.js 
然后实施initAaa initBbb
        .wait(function ()
{//带参数的.wait()方法也是立时运维刚才加载的Javascript文件,可是还运维参数中钦定的函数。
            initAaa();
            initBbb();
        })
        .script(“ccc.js”)//再加载ccc.js
加载完结ccc.js之后执行initCcc方法
        .wait(function () {
            initCcc();
        });
    </script>

能够同时运转多条$LAB链,然而它们中间是一点一滴独立的,不设有程序关系。假诺您要保管2个Javascript文件在另3个文书从此运转,你不得不把它们写在同2个链操作之中。唯有当一些脚本是一点一滴非亲非故的时候,你才应该思念把它们分成不一样的$LAB链,表示它们之间不存在相关关系。

<html>
<head>
    <title>LABjs example</title>
</head>
<body>
    <script type="text/javascript" src="LAB.js"></script>
    <script>
        $LAB.script("first-file.js").wait()
            .script("the-rest.js")
            .wait(function(){
                Application.init();
            });
    </script>
</body>
</html>

一般而言的施用示例

<small>在头里的例证中,不能够担保first-file.js的代码在the-rest.js的代码前执行。
为了保险那或多或少,你不能够不在第二个script()方法后调用wait(),比如,
一般来说示例能够有限支撑first-file.js的代码在the-rest.js的代码前履行。</small>

代码如下:

<html>
<head>
    <title>LABjs example</title>
</head>
<body>
    <script type="text/javascript" src="LAB.js"></script>
    <script>
        $LAB.script("first-file.js").wait()
            .script("the-rest.js")
            .wait(function(){
                Application.init();
            });
    </script>
</body>
</html>

$LAB
.script(“script壹.js”) // script一, script贰, and script叁 互相不借助,
能够依照自由的逐条执行
.script(“script2.js”)
.script(“script3.js”)
.wait(function(){
    alert(“Scripts 1-3 are loaded!”);
})
.script(“script四.js”)
//必须等待script壹.js,script贰.js,script3.js执行达成之后才能举行
.wait(function(){script4Func();});

代码如下:

$LAB
.script(“script.js”)   
.script({ src: “script1.js”, type: “text/javascript” })
.script([“script1.js”, “script2.js”, “script3.js”])
.script(function(){
    // assuming `_is_IE` defined by host page as true in IE and
false in other browsers
    if (_is_IE) {
        return “ie.js”; // only if in IE, this script will be loaded
    }
    else {
        return null; // if not in IE, this script call will effectively
be ignored
    }
})

在决定台看LAB.js的加载消息

只要您想调试或然说在控制台看种种js加载音信的话,能够选用$LAB.setGlobalDefaults
方法,具体使用请看代码示例。

代码如下:

<!–先加载携程的LAB库  lab.js在网上也得以下载–>
    <script type=”text/javascript”
src=””
charset=”gb2312″></script>

    <script type=”text/javascript”>

        $LAB.setGlobalDefaults({ Debug: true }) //打开调节和测试

        $LAB
            //第二个执行链
          
.script(”)
          
.script(”)

           //第二个执行链
           .wait(function () {
               //console.log(window.$)
               //console.log(window._)
           })

           //第多个执行链
          
.script(”)
          
.script(”)

           //第多少个执行链
           .wait(function () {
               // console.log(plugin1Function)
               // console.log(plugin2Function)
           })

           //第肆个执行链
           .script(‘js/aaa.js’)
           .script(‘js/bbb.js’)

           //第陆个执行链
           .wait(function () {
               // console.log(module1Function)
               // console.log(module2Function)
           })
    </script>

本条时候打开控制台,看音讯,如下图所示:

4858美高梅 3

 

实例

  //加载大的背景图,不能等背景图先显示出来再进行html代码

  <head>

  {insert_scripts files=’LAB.min.js’}

  </head>

  <body>

  <script>

  $LAB.script(“xxx/js/sign.min.js”)

  .wait() //立即执行

  </script>

  </body>

 

  //除了背景图还有轮换图,最近只用到那二种

  <html>

  <head>

  {insert_scripts files=’LAB.min.js’}

  </head>

  <body>

  <script>

  $LAB.script(“xxx/xxx/js/jquery.flexslider.min.js”)

  .wait(function(){

  //banner 滚动

  $(‘#js_banner’).flexslider({
                namespace:””,
                animation: “fade”,
                selector: “.slides > li”,
                pauseOnAction:false,
                controlNav:true,
                slideshowSpeed: 5000
            });    
    
            $(‘#whatsnew_pros’).flexslider({
                namespace:””,
                animation: “slide”,
                selector: “.slides > li”,
                itemWidth: 150,
                pauseOnAction:false,
                controlNav:false,
                animationLoop: true,
                slideshow:false,  
                animationSpeed:50,
                minItems: 4,
                maxItems: 5
            });
            $(‘#seller_pros’).flexslider({
                namespace:””,
                animation: “slide”,
                selector: “.slides > li”,
                itemWidth: 150,
                pauseOnAction:false,
                controlNav:false,
                animationLoop: true,
                slideshow:false,  
                animationSpeed: 50,
                minItems: 4,
                maxItems: 5
            });
            $(‘#specials_pros’).flexslider({
                namespace:””,
                animation: “slide”,
4858美高梅,                selector: “.slides > li”,
                itemWidth: 150,
                pauseOnAction:false,
                controlNav:false,
                animationLoop: true,
                slideshow:false,  
                animationSpeed: 50,
                minItems: 4,
                maxItems: 5
            });
            
            $(“#seller_pros”).hide();
            $(“#specials_pros”).hide();
            $(“#whatsnew_pros”).show();

  })

  </script>

  </body>
  </html>

JavaScript文件加载器LABjs API详解

  在《高性能JavaScript》一书中涉嫌了LABjs这些用来加载JavaScript文件的类库,LABjs是Loading
And Blocking
JavaScript
的缩写,顾名思义,加载和阻塞JavaScript,而它的API
script()和wait()则优雅地落到实处了那多少个职能,作者在高品质JavaScript
加载和执行一文中也不难讲解了这七个主导API的用法。当然,LABjs还有越多的API,本文用实例讲解下LABjs其余API。

$LAB.setGlobalDefaults() & $LAB.setOptions()

  两者所能设置的参数完全1致,分化的是,前者是大局设置,成效在富有的$LAB链上;后者出现在某条链的启幕地方(前面接script()、wait()等),该装置只效劳在那条链上。该参数能够是1个涵盖三个键值对的对象

  • AlwaysPreserveOrder

  2个布尔值(默许false),如若设置为true,则每一种script()后都会私下认可设置贰个wait(),使得链上的台本八个个执行。

4858美高梅 4

$LAB
  .setOptions({AlwaysPreserveOrder:true}) // tells this chain to implicitly "wait" on 
                                          // execution (not loading) between each script
  .script("script1.js") // script1, script2, script3, and script4 *DO* depend on each 
  .script("script2.js") // other, and will execute serially in order after all 4 have have
  .script("script3.js") // loaded in parallel
  .script("script4.js")
  .wait(function(){script4Func();});

4858美高梅 5

  • UseLocalXHR

  二个布尔值(暗中同意true),假诺是true的话,LABjs会用XHR
Ajax去预加载同域的本子文件。值得注意的是,只利用在老式的Webkit浏览器(那3个既不能使用ordered-async也不能兑现真正的预加载的浏览器),而且同域的情景下,该装置才起效(不然直接无视)

  • CacheBust & AllowDuplicates

  LABjs对于缓存有局地意外的拍卖(关于缓存,可以参见小编眼下的一篇小说浏览器缓存机制浅析),比如如下代码:

$LAB.script('index.js');

  相当粗略对啊?第二回载入,未有别的难题,HTTP200从server端下载。然而f伍后:4858美高梅 6

  (20一5-八-3 那一个难题不怎么古怪,有时HTTP30四,有时HTTP200from cache
小编也在github上询问了我 LABjs reads from cache when
f5,回复的大约意思是cache和labjs没有其余涉及,只和服务器和浏览器设置有关)

  居然是从缓存读取的!那实属服务端的改变,对它不起效能!而平凡状态下f5后是会向服务器发送请求的,就算服务端文件未有改动重回HTTP30四读取缓存,假设改动了文本一贯load新的。针对那一个难点大家能够行使CacheBust选项:

$LAB.setGlobalDefaults({CacheBust: true})
$LAB.script('index.js');

  那样就能确定保障每趟都从服务端读取文件(未有读取缓存)。

  还有多个题材,对于多少个1样的请求,LABjs暗中认可只会实施1次:

$LAB.script('index.js').script('index.js');
$LAB.script('index.js');

  实际上index.js那个文件只进行了三遍!假如index.js里的代码是打字与印刷hello
world,也正是说只会被打字与印刷二次。怎样形成能打字与印刷2回?用AllowDuplicates:

$LAB.setGlobalDefaults({AllowDuplicates: true})
$LAB.script('index.js').script('index.js');
$LAB.script('index.js');

  实际上下边包车型地铁代码,纵然会履行2次index.js,可是请求只有1回,别的五个都以缓存读取,而且如前方所说,如若服务端修改了,也会从缓存读取,那太可怕了。所以AllowDuplicates能够合营CacheBust使用

$LAB.setGlobalDefaults({AllowDuplicates: true, CacheBust: true})
$LAB.script('index.js').script('index.js');
$LAB.script('index.js');

4858美高梅 7

  其实正是带了一串代表呼吁唯1的字符串,那在ajax请求中很宽泛。

  • BasePath

  多个字符串(暗中认可空串),会将以此字符串加在各样script()里的U汉兰达L的最前边。

  • Debug

  二个布尔值(暗许false),若是翻开debug选项的话,会在控制台打字与印刷消息,须求小心的是,唯有应用了LAB-debug.min.js可能LAB.src.js该选拔才work。

$LAB.script() & $LAB.wait()

  script()里的参数可以是广大情势,比如字符串(文件的相对路径可能相对路径)、对象(src、type、charset
src务必)、数组或许措施(只怕前者们的重组),更加多demo能够参考Example
8
below。前三者很好通晓,那里大约提下参数为function的情况,当script()里的参数是个匿名的function的时候,该function会立时实施,它能够return三个值,而该值必须是以上说的string、object也许array格局,相当于给该script()赋值了。

4858美高梅 8

$LAB
  .script(function(){
    // assuming `_is_IE` defined by host page as true in IE and false in other browsers 
    if (_is_IE) {
      return "ie.js"; // only if in IE, this script will be loaded
    }
    else {
      return null; // if not in IE, this script call will effectively be ignored
    }
  })
  .script("script1.js")
  .wait();

4858美高梅 9

$LAB.queueScript() & $LAB.queueWait() & $LAB.runQueue() & $LAB.sandbox()

  script()和wait()会使得脚本登时实施(除非设置定时器),可是queueScript()和queueWait()能使得脚本在随机时刻执行,执行的时候带上runQueue()就行了。

4858美高梅 10

var a = $LAB.queueScript('index.js').queueWait(function() {
  console.log('hello world');
});

setTimeout(function() {
  a.runQueue()
}, 1000);

4858美高梅 11

  如上脚本就能在一千ms后执行,那样的成效一般script()合作定时器也能落到实处,然而在今后某壹不鲜明时刻执行就万分了(比如说1段钦点代码后)。借使有四个链要在现在某时刻执行吗?

4858美高梅 12

var a = $LAB.queueScript('index.js').queueWait(function() {
  console.log('hello world');
});

setTimeout(function() {
  a.runQueue()
}, 1000);

var b = $LAB.queueScript('index2.js').queueWait(function() {
  console.log('hello world');
});

setTimeout(function() {
  b.runQueue()
}, 2000);

4858美高梅 13

  如上代码并没能得到预想的结果(实际上一千ms后联合输出),那时就必要用sandbox()成立二个新的实例。

4858美高梅 14

var a = $LAB.queueScript('index.js').queueWait(function() {
  console.log('hello world');
});

setTimeout(function() {
  a.runQueue()
}, 1000);

var b = $LAB.sandbox().queueScript('index2.js').queueWait(function() {
  console.log('hello world');
});

setTimeout(function() {
  b.runQueue()
}, 2000);

4858美高梅 15

$LAB.noConflict() 

  使用noConflict()会将如今版本的LABjs回滚到旧的版本。(201五-0八-0四那些解释应该是错的)

 

  read more
from  LAB documentation

github LAB.js 贰.0.三及以下版本版本

      
叁.0脚下正值展开重写中

参考自:

    

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有