动态加载JS函数,Javascript无阻塞加载格局

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

普通的,当咱们须求加载js文件的时候都会利用script标签来贯彻,类似于如下代码:

动态加载JS函数

方今在看javascript高质量一书里面涉及的javascript的加载格局很好。

  在《高性能JavaScript》一书中提到了LABjs其一用来加载JavaScript文件的类库,LABjs是Loading
And Blocking
JavaScript
的缩写,顾名思义,加载和阻塞JavaScript,而它的API
script()和wait()则优雅地落到实处了这八个效益,我在高品质JavaScript
加载和推行一文中也简要讲解了那八个为主API的用法。当然,LABjs还有更加多的API,本文用实例讲解下LABjs别的API。

代码如下:

1般说来的,当我们须要加载js文件的时候都会采纳script标签来达成,类似于如下代码:

现总计如下:
1、YUI3的方式
2、LazyLoad(1.5k)
Yahoo!Search工程师RyanGrove创设的三个通用的延迟加载工具,是loadScript()函数的增强版。

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

  两者所能设置的参数完全一致,区别的是,前者是大局设置,成效在颇具的$LAB链上;后者出现在某条链的发端地点(前边接script()、wait()等),该装置只效劳在那条链上。该参数能够是一个含有多少个键值对的对象

  • AlwaysPreserveOrder

  三个布尔值(默许false),即使设置为true,则各种script()后都会暗许设置一个wait(),使得链上的台本叁个个执行。

$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

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

  • CacheBust & AllowDuplicates

  LABjs对于缓存有部分出人意料的处理(关于缓存,能够参见作者后面的一篇小说浏览器缓存机制浅析),比如如下代码:

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

  很简短对吧?第1遍载入,未有任何难题,HTTP200从server端下载。可是f5后:4858美高梅 1

  (2014-8-三 那个题材不怎么蹊跷,有时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暗中同意只会执行3次:

$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');

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

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

4858美高梅 2

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

  • BasePath

  四个字符串(私下认可空串),会将那个字符串加在各样script()里的U凯雷德L的最终边。

  • Debug

  3个布尔值(暗中认可false),假如打开debug选项的话,会在控制台打印音讯,需求留意的是,唯有利用了LAB-debug.min.js或然LAB.src.js该选取才work。

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

复制代码 代码如下:

用法示例:
<script type=”text/javascript”
src=”lazyload-min.js”></script>
<script type=”text/javascript”>
    LazyLoad.js(‘the-reset.js’, function(){
        Application.init();
    });
</script>
LazyLoad同样支撑四个javascript文件,并能保障在具有浏览器中都能够按正确的顺序执行。要加载多少个javscript文件,只供给给LazyLoad.js()y方法传入叁个url数组:
<script type=”text/javascript”
src=”lazyload-min.js”></script>
<script type=”text/javascript”>
    LazyLoad.js([‘first.js’, ‘the-reset.js’], function(){
        Application.init();
    });
</script>
花色地址:

$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标签来加载js文件会有如下一些通病:

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

3、LABjs(4.7k)
LABjs是凯尔 Simpson受SteveSounders的启迪达成的无阻塞加载工具。用法示例:

$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);

  如上脚本就能在一千ms后进行,那样的效益一般script()协作定时器也能兑现,可是在今后某壹不显明时刻执行就可怜了(比如说壹段钦赐代码后)。假若有五个链要在今后某时刻执行吗?

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>在网页中出现的逐壹,读取Javascript文件,然后随即运营,导致在多少个公文相互依赖的事态下,注重性最小的公文必须放在最前方,依赖性最大的公文必须放在最终边,不然代码会报错。

可是平昔使用script标签来加载js文件会有如下1些通病:

<script type=”text/javascript” src=”lab.js”></script>
<script type=”text/javascript”>
    $LAB.script(‘the-reset.js’)
        .wait(function(){
            Application.init();
        });
</script>
$LAB.script()方法用来定义要求下载的javascript文件,$LAB.wait()用来钦定文件下载并实施完结后所调用的函数。

$LAB.noConflict() 

  使用noConflict()会将方今版本的LABjs回滚到旧的版本。(20壹5-0捌-04那些解释应该是错的)

 

动态加载JS函数,Javascript无阻塞加载格局。  read more
from  LAB documentation

二.质量难点。浏览器采纳”同步方式”加载<script>标签,也正是说,页面会”堵塞”(blocking),等待javascript文件加载成功,然后再运营前面包车型地铁HTML代码。当存在多个<script>标签时,浏览器不可能同时读取,必须读取完3个再去读取另3个,造成读取时间大大延长,页面响应缓慢。

1.凶残的读取顺序。由于浏览器遵照<script>在网页中冒出的次第,读取Javascript文件,然后随即运维,导致在四个文件相互依赖的景观下,注重性最小的公文必须放在最前面,依赖性最大的文件必须放在最前面,不然代码会报错。

要下载多少个javscript文件,只需链式调用另叁个$LAB.script()方法:

本条时候大家就会想到去动态加载JS,动态加载js的兑现情势类似于如下代码

2.品质难题。浏览器选择”同步方式”加载<script>标签,约等于说,页面会”堵塞”(blocking),等待javascript文件加载成功,然后再运营前边的HTML代码。当存在多少个<script>标签时,浏览器无法同时读取,必须读取完二个再去读取另二个,造成读取时间大大延长,页面响应缓慢。

<script type=”text/javascript” src=”lab.js”></script>
<script type=”text/javascript”>
    $LAB.script(‘first.js’)
        .script(‘the-reset.js’)
        .wait(function(){
            Application.init();
        });
</script>
LABjs与众区别的是它管理正视关系的力量。日常来说,三番五次的<script>标签意味着文件各个下载并按顺序执行。

代码如下:

以此时候大家就会想到去动态加载JS,动态加载js的落到实处际情状势类似于如下代码

LABjs允许使用wait()方法来钦点哪些文件须求等待其余文件。上边的例子中first.js无法保障会在the-reset.js的代码前执行,为了确定保障那或多或少,必须在第贰个script()方法后调用wait():

/*
*@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 4858美高梅 ,!= undefined) {
        script.onload = function () {
            callback();
        }
    }
}

复制代码 代码如下:

<script type=”text/javascript” src=”lab.js”></script>
<script type=”text/javascript”>
    $LAB.script(‘first.js’).wait()
        .script(‘the-reset.js’)
        .wait(function(){
            Application.init();
        });
</script>
品类地址:h

那般不会招致页面堵塞,但会招致别的三个题材:那样加载的Javascript文件,不在原始的DOM结构之中,由此在DOM-ready(DOMContentLoaded)事件和window.onload事件中钦赐的回调函数对它不行。

/*
*@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();
        }
    }
}

4、SeaJS(7.5k)
SeaJS 是天猫玉伯开发的三个遵从 CommonJS
规范的模块加载框架,可用来轻松快活地加载任意 javascript
模块。详细请参见:

以此时候大家就会想到用部分表面函数库来有效的管住JS加载难点。

这么不会导致页面堵塞,但会导致其余3个难题:那样加载的Javascript文件,不在原始的DOM结构之中,由此在DOM-ready(DOMContentLoaded)事件和window.onload事件中钦命的回调函数对它不行。

5、do 框架(3.5k)
Do是豆瓣网kejun开发的二个很轻量的Javascript开发框架。近年来do.min.js。它的骨干职能是对模块进行团队和加载。加载选拔相互异步队列的方针,并且能够控制实施时机。Do可以任意置换焦点类库,暗许是jQuery。

上边进入正题说说LAB.js

其方今候大家就会想到用1些外部函数库来有效的治本JS加载难题。

花色地址:

LAB.js

上面进入正题说说LAB.js

6、RequireJS(13.1k)
项目地址:

壹经我们选择守旧的主意来加载js的话,写的代码一般会如下方代码所示风格。

LAB.js

摘自 dz45693的专栏

代码如下:

设若大家使用守旧的方式来加载js的话,写的代码一般会如下方代码所示风格。

现计算如下: 1、YUI叁的点子 贰、LazyLoad(一.伍k) Yahoo!Search工程师Ryan
Grove创建…

<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的话,要促成上述代码功用,则利用如下格局

<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的话,要达成上述代码作用,则使用如下形式

<!–先加载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链,不过它们中间是截然独立的,不设有程序关系。假使你要确认保障三个Javascript文件在另三个文件从此运维,你不得不把它们写在同二个链操作之中。唯有当一些脚本是全然毫无干系的时候,你才应该考虑把它们分成差别的$LAB链,表示它们中间不设有相关涉嫌。

<!–先加载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链,可是它们中间是一心独立的,不设有程序关系。若是您要保证二个Javascript文件在另1个文书之后运转,你不得不把它们写在同三个链操作之中。唯有当1些脚本是一点一滴无关的时候,你才应该思量把它们分成分裂的$LAB链,表示它们中间不存在相关涉嫌。

代码如下:

常见的采纳示例

$LAB
.script(“script一.js”) // script1, script二, and script3 互相不借助于,
能够服从自由的相继执行
.script(“script2.js”)
.script(“script3.js”)
.wait(function(){
    alert(“Scripts 1-3 are loaded!”);
})
.script(“script四.js”)
//必须等待script1.js,script二.js,script3.js执行达成之后才能进行
.wait(function(){script4Func();});

复制代码 代码如下:

代码如下:

$LAB
.script(“script1.js”) // script壹, script二, and script三 相互不借助,
能够服从自由的逐条执行
.script(“script2.js”)
.script(“script3.js”)
.wait(function(){
    alert(“Scripts 1-3 are loaded!”);
})
.script(“script4.js”)
//必须等待script一.js,script二.js,script三.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的加载音讯

$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
    }
})

1旦你想调节和测试也许说在决定台看各类js加载消息的话,能够选择$LAB.setGlobalDefaults
方法,具体运用请看代码示例。

在控制台看LAB.js的加载音信

代码如下:

假使你想调节和测试或许说在决定台看各种js加载消息的话,能够运用$LAB.setGlobalDefaults
方法,具体采纳请看代码示例。

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

复制代码 代码如下:

    <script type=”text/javascript”>

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

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

    <script type=”text/javascript”>

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

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

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

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

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

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

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

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

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

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

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

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

以此时候打开控制台,看新闻,如下图所示:

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

4858美高梅 3

以此时候打开控制台,看新闻,如下图所示:

 

4858美高梅 4

实例

本身深信您见到那儿肯定会为Lab.js的调节和测试作用蔚为大观。事实上Lab.js确实是挺强大的,作者也只是摸底它的一对浅显的功力。先记下来,拿来分享一下还要也为了未来福利本人。

  //加载大的背景图,不可能等背景图先显示出来再举办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”,
                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()

  两者所能设置的参数完全壹致,分歧的是,前者是大局设置,效用在享有的$LAB链上;后者出现在某条链的始发地点(后边接script()、wait()等),该装置只效劳在那条链上。该参数能够是2个暗含两个键值对的对象

  • AlwaysPreserveOrder

  一个布尔值(暗中同意false),假若设置为true,则每一种script()后都会暗中认可设置2个wait(),使得链上的本子1个个推行。

4858美高梅 5

$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美高梅 6

  • UseLocalXHR

  1个布尔值(暗中同意true),借使是true的话,LABjs会用XHR
Ajax去预加载同域的台本文件。值得注意的是,只行使在老式的Webkit浏览器(那几个既不能够使用ordered-async也无法促成真正的预加载的浏览器),而且同域的情景下,该装置才起效(不然直接无视)

  • CacheBust & AllowDuplicates

  LABjs对于缓存有部分意想不到的处理(关于缓存,可以参见小编日前的一篇小说浏览器缓存机制浅析),比如如下代码:

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

  很简短对吧?第3遍载入,未有任何难点,HTTP200从server端下载。然则f5后:4858美高梅 7

  (20壹5-捌-三 那些题目不怎么好奇,有时HTTP304,有时HTTP200from cache
笔者也在github上精晓了我 LABjs reads from cache when
f5,回复的大体意思是cache和labjs未有任何涉及,只和服务器和浏览器设置有关)

  居然是从缓存读取的!这正是说服务端的变更,对它不起效果!而平凡景况下f伍后是会向服务器发送请求的,假诺服务端文件并未有改动再次回到HTTP304读取缓存,倘诺改动了文件直接load新的。针对这些标题大家得以动用CacheBust选项:

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

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

  还有八个标题,对于多少个1样的呼吁,LABjs暗许只会实施一次:

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

  实际上index.js这一个文件只进行了3回!假使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美高梅 8

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

  • BasePath

  3个字符串(私下认可空串),会将以此字符串加在各类script()里的U昂CoraL的最前方。

  • Debug

  二个布尔值(私下认可false),假诺翻开debug选项的话,会在控制台打字与印刷消息,须求注意的是,唯有利用了LAB-debug.min.js也许LAB.src.js该选取才work。

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

  script()里的参数能够是过多花样,比如字符串(文件的绝对路径只怕相对路径)、对象(src、type、charset
src务必)、数组或然措施(或然前者们的结缘),越多demo能够参考Example
8
below。前3者很好精通,那里大概提下参数为function的气象,当script()里的参数是个匿名的function的时候,该function会立时实施,它能够return一个值,而该值必须是上述说的string、object恐怕array方式,也正是给该script()赋值了。

4858美高梅 9

$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美高梅 10

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

  script()和wait()会使得脚本立即执行(除非设置定时器),不过queueScript()和queueWait()能使得脚本在随机时刻执行,执行的时候带上runQueue()就行了。

4858美高梅 11

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

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

4858美高梅 12

  如上脚本就能在一千ms后实施,这样的效能一般script()同盟定时器也能达成,可是在现在某1不显著时刻执行就分外了(比如说1段钦赐代码后)。假诺有多个链要在今后某时刻执行呢?

4858美高梅 13

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美高梅 14

  如上代码并没能获得预想的结果(实际上一千ms后一路输出),那时就供给用sandbox()创制3个新的实例。

4858美高梅 15

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美高梅 16

$LAB.noConflict() 

  使用noConflict()会将近期版本的LABjs回滚到旧的本子。(二零一四-0八-04那个解释应该是错的)

 

  read more
from  LAB documentation

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

      
三.0当下正在展开重写中

参考自:

    

发表评论

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

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