动态加载JS函数

作者:分分快三计划

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

普普通通的,当大家需求加载js文件的时候都会采纳script标签来落到实处,类似于如下代码:

<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.noConflict() 

  使用noConflict()会将近些日子版本的LABjs回滚到旧的本子。(二零一五-08-04 那几个解释应该是错的)

 

  read more from  LAB documentation

  <body>

<small>这段代码发送多个get乞求获取file1.js文书。事件处理函数onReadyStateChange 检查readyState 是或不是为4 ,同有的时候间校验HTTP状态码是不是行得通(2XX 代表有效响应,304象征是从缓存读取)。若是接受了平价响应,就能够创制一个<script>成分,设置该因素的text属性为从服务器收到到的responseText。</small>
(4)我推荐的无遮拦方式

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

  <head>

<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>

  在《高性能JavaScript》一书中关系了LABjs本条用来加载JavaScript文件的类库,LABjs是Loading And Blocking JavaScript的缩写,看名称就能够想到其意义,加载和阻塞JavaScript,而它的API script()和wait()则高雅地完结了那八个功用,作者在高质量JavaScript 加载和施行一文中也大概讲明了那五个为主API的用法。当然,LABjs还可能有越多的API,本文用实例讲授下LABjs别的API。

  .wait() //马上施行

<small>该 示例 用到<script>的readyState属性,该属性有5种取值:
uninitialized 开头状态
loading 伊始下载
loaded 下载完结
interactive 数据产生下载但尚不足使用
complete 全体数据已策画就绪</small>
(3)XMLHttpRequest(xhr对象) 脚本注入
亮点1:你能够把剧本的施行推迟到您准备好的时候。
优点2:在全数主流浏览器都能平常使用。
症结:JavaScript文件必须与所诉求的页面属于同一的域。

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

  很轻便对吗?第三回载入,未有另外难题,HTTP200从server端下载。然而f5后:图片 1

  (贰零壹肆-8-3 这一个难点不怎么奇怪,有的时候HTTP304,有的时候HTTP200from cache 笔者也在github上理解了作者 LABjs reads from cache when f5,回复的大概意思是cache和labjs未有其他涉及,只和服务器和浏览器设置有关)

  居然是从缓存读取的!那就是说服务端的转移,对它不起作用!而平凡景况下f5后是会向服务器发送央求的,如若服务端文件并未改变再次回到HTTP304读取缓存,要是更改了文本一向load新的。针对那个题目我们能够利用CacheBust选项:

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

  那样就能够保险每一遍都从服务端读取文件(尚无读取缓存)。

  还应该有贰个难题,对于多少个同样的呼吁,LABjs默许只会举行一回:

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

图片 2

  其实就是带了一串代表呼吁独一的字符串,那在ajax必要中很普及。

  • BasePath

  一个字符串(私下认可空串),会将那一个字符串加在每一种script()里的UPRADOL的最前方。

  • Debug

  一个布尔值(默许false),借使翻开debug选项的话,会在调整台打印音信,要求专一的是,唯有接纳了LAB-debug.min.js恐怕LAB.src.js该选拔才work。

一经大家使用LAB.js的话,要促成上述代码作用,则使用如下方式

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

<!--先加载蜂窝网的LAB库  lab.js在英特网也能够下载-->
    <script type="text/javascript" src="" charset="gb2312"></script>

  • 第一种:YUI3的方式
    YUI3 API:https://github.com/yui/yui3
    设计意见:由页面中的一点点代码来加载丰盛的功效组件。

$LAB
.script("script1.js") // script1, script2, and script3 相互不依靠, 能够遵循自由的次第实施
.script("script2.js")
.script("script3.js")
.wait(function(){
    alert("Scripts 1-3 are loaded!");
})
.script("script4.js") //必得等待script1.js,script2.js,script3.js施行达成之后本领推行
.wait(function(){script4Func();});

<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>

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

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

  <script>

$LAB.noConflict() 

  使用noConflict()会将这段时间版本的LABjs回滚到旧的版本。(二零一五-08-04 这么些解释应该是错的)

 

  read more from  LAB documentation

github LAB.js 2.0.3及以下版本版本

       3.0当下正在进展重写中

参考自:

    

<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>

           //第两个实施链
           .wait(function () {
               // console.log(plugin1Function)
               // console.log(plugin2Function)
           })

2、组织脚本
(1)浏览器在分析HTML页面包车型地铁长河中,每遭遇一个<script>标签,都会因施行脚本而变成一定的延时,所以裁减页面所包罗的<script>标签数量有协助改正页面品质。
(2)HTTP须要会推动非常的属性费用,因此下载单个100KB的公文将比下载4个25KB的文件更加快。即,收缩页面中外链脚本文件的数量将会革新品质。
综上所述:用文件打包工具把五个公文合併成1个,那样只需求援用二个<script>标签,就能够减掉品质消耗。

在决定台看LAB.js的加载音信

3、无阻塞的脚本
法门:在页面加载成功后才加载JavaScript代码。
(1)延迟的本子
包罗defer属性的JavaScript文件将要页面分析到<script>标签时开端下载,但并不会进行,下载时,不会阻塞浏览器的别样进程,能够与页面中另外财富互相下载。它下载完结后,在onload事件被触发前进行。
该属性独有IE4 和 firefox3.5 的浏览器支持。

  </script>

LAB.js

如何用最飞快的章程把javascript代码加载到页面中呢?
1、脚本地方
各类文件必需等到前三个文件下载并实施到位才会起来下载。在这里些文件各个下载进度中,顾客见到的是一片空白。称为脚本阻塞。由此推荐将有所的价签尽大概放到标签的平底,以尽量缩小对总体页面下载的震慑。

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

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

  script()和wait()会使得脚本立刻试行(除非设置电火花计时器),不过queueScript()和queueWait()能使得脚本在自由时刻推行,实施的时候带上runQueue()就行了。

图片 3

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

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

图片 4

  如上脚本就能够在一千ms后进行,这样的意义日常script()协作反应计时器也能落实,然而在以往某一不鲜明期刻实施就极其了(譬喻说一段钦赐代码后)。要是有多个链要在现在某时刻执可以吗?

图片 5

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

图片 6

  如上代码并未能获得预想的结果(实际上一千ms后联手输出),那时就要求用sandbox()创立三个新的实例。

图片 7

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

图片 8

<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>

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

<html>
<head>
    <title>YUI3 example</title>
</head>
<body>
    <script src="http://www.crtstalbuy.com/uploads/allimg/191013/0Z4154491-8.jpg"></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>

  </script>

<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>

  <body>

<small>该 示例 在帮衬defer属性的浏览器上,弹出的逐条是:script , defer , load.</small>
(2)动态脚本文件
该脚本文件被加多到页面时伊始下载,无论在何时起步下载,文件的下载和实践进度不会阻塞页面其余进度。

  })

<small>在前方的例子中,无法确定保障first-file.js的代码在the-rest.js的代码前推行。
为了确定保障那或多或少,你必得在首先个script()方法后调用wait(),举个例子,
如下示例可以保证first-file.js的代码在the-rest.js的代码前施行。</small>

代码如下:

<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>

1.严谨的读取顺序。由于浏览器根据<script>在网页中冒出的相继,读取Javascript文件,然后立时运维,导致在多少个公文相互注重的情事下,正视性最小的文书必须放在最前头,信赖性最大的文本必得放在最前边,不然代码会报错。

<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>

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

<!--先加载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>

           //第多少个施行链
           .script('')
           .script('')

  $LAB.script("xxx/js/sign.min.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>

代码如下:

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

平日的运用示例

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

  两个所能设置的参数完全一致,区别的是,后边一个是全局设置,功效在富有的$LAB链上;后者出现在某条链的上马地方(后面接script()、wait()等),该装置只效劳在这里条链上。该参数能够是二个包括七个键值对的对象

  • AlwaysPreserveOrder

  四个布尔值(暗许false),如若设置为true,则各样script()后都会私下认可设置三个wait(),使得链上的台本多少个个实施。

图片 9

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

图片 10

  • UseLocalXHR

  三个布尔值(暗中同意true),假设是true的话,LABjs会用XHR Ajax去预加载同域的本子文件。值得注意的是,只使用在老式的Webkit浏览器(那几个既无法运用ordered-async也不能够兑现真正的预加载的浏览器),况兼同域的景观下,该装置才起效(否则直接无视)

  • CacheBust & AllowDuplicates

  LABjs对于缓存有部分匪夷所思的拍卖(关于缓存,能够参见我后边的一篇小说浏览器缓存机制浅析),比如如下代码:

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

  很简短对啊?第4回载入,没有任何难点,HTTP200从server端下载。不过f5后:图片 11

  (二零一四-8-3 那一个标题不怎么奇异,有时HTTP304,有的时候HTTP200from cache 作者也在github上询问了小编 LABjs reads from cache when f5,回复的光景意思是cache和labjs未有其余关联,只和服务器和浏览器设置有关)

  居然是从缓存读取的!那算得服务端的改观,对它不起效果!而常见状态下f5后是会向服务器发送诉求的,借使服务端文件并没有改动再次回到HTTP304读取缓存,若是退换了文件直接load新的。针对那么些主题素材大家得以运用CacheBust选项:

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

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

  还应该有叁个标题,对于多少个一律的乞求,LABjs暗许只会推行一回:

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

图片 12

  其实便是带了一串代表呼吁独一的字符串,那在ajax诉求中很常见。

  • BasePath

  八个字符串(暗许空串),会将这几个字符串加在每一种script()里的UHavalL的最前面。

  • Debug

  叁个布尔值(暗中同意false),要是展开debug选项的话,会在调控台打字与印刷音讯,供给在乎的是,只有利用了LAB-debug.min.js或许LAB.src.js该选用才work。

其有毛病候张开调节台,看音信,如下图所示:

  <html>

可是平昔动用script标签来加载js文件会有如下一些缺点:

能够同临时间运维多条$LAB链,然则它们中间是一丝一毫独立的,不设有程序关系。尽管您要保险二个Javascript文件在另三个文本之后运行,你不得不把它们写在同七个链操作之中。唯有当一些脚本是截然毫无干系的时候,你才应该思考把它们分成分化的$LAB链,表示它们中间一纸空文相关涉嫌。

代码如下:

图片 13

代码如下:

  <head>

  //加载大的背景图,无法等背景图先呈现出来再实行html代码

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

  </body>
  </html>

 

代码如下:

实例

  $('#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,
动态加载JS函数。                animationLoop: true,
                slideshow:false,  
                animationSpeed: 50,
                minItems: 4,
                maxItems: 5
            });
            
            $("#seller_pros").hide();
            $("#specials_pros").hide();
            $("#whatsnew_pros").show();

  <script>

  .wait(function(){

  </head>

代码如下:

其临时候大家就能想到用部万分表函数库来有效的田间管理JS加载难点。

2.质量难点。浏览器采纳"同步格局"加载<script>标签,也正是说,页面会"堵塞"(blocking),等待javascript文件加载成功,然后再运转前边的HTML代码。当存在多少个<script>标签时,浏览器无法同有的时候候读取,必须读取完一个再去读取另二个,变成读取时间大大延伸,页面响应缓慢。

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

上面步向正题说说LAB.js

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

  </head>

倘让你想调节和测量检验也许说在调节台看各样js加载音信的话,能够利用$LAB.setGlobalDefaults 方法,具体选用请看代码示例。

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

  </body>

           //第三个施行链
           .script('js/aaa.js')
           .script('js/bbb.js')

动态加载JS函数。        $LAB
            //第贰个推行链
           .script('')
           .script('')

代码如下:

本条时候我们就能够想到去动态加载JS,动态加载js的完毕格局类似于如下代码

要是大家使用古板的主意来加载js的话,写的代码平日会如下方代码所示风格。

  //banner 滚动

JavaScript文件加载器LABjs API详解

  在《高性能JavaScript》一书中涉嫌了LABjs那一个用来加载JavaScript文件的类库,LABjs是Loading And Blocking JavaScript的缩写,以偏概全,加载和阻塞JavaScript,而它的API script()和wait()则高雅地落到实处了那三个职能,笔者在高品质JavaScript 加载和实践一文中也大概讲授了那四个基本API的用法。当然,LABjs还会有越多的API,本文用实例批注下LABjs别的API。

 

    <script type="text/javascript">

  {insert_scripts files='LAB.min.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
    }
})

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

  script()里的参数能够是无数花样,例如字符串(文件的相对路线或许相对路径)、对象(src、type、charset src必得)、数组或然措施(也许前面一个们的咬合),更加多demo能够参谋Example 8 below。前三者很好驾驭,这里差非常的少提下参数为function的状态,当script()里的参数是个无名氏的function的时候,该function会立刻实践,它能够return贰个值,而该值必需是上述说的string、object只怕array情势,相当于给该script()赋值了。

图片 14

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

图片 15

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划