当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript文件加载器LABjs API详解

JavaScript文件加载器LABjs API详解

2018年08月21日  | 移动技术网IT编程  | 我要评论

　　在一书中提到了这个用来加载javascript文件的类库，labjs是loading and blocking javascript的缩写，顾名思义，加载和阻塞javascript，而它的api script()和wait()则优雅地实现了这两个功能，我在一文中也简单讲解了这两个核心api的用法。当然，labjs还有更多的api，本文用实例讲解下labjs其他api。

$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后：

　　（2015-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');

　　其实就是带了一串代表请求唯一的字符串，这在ajax请求中很常见。

  • basepath

　　一个字符串（默认空串），会将这个字符串加在每个script()里的url的最前面。

  • debug

　　一个布尔值（默认false），如果开启debug选项的话，会在控制台打印信息，需要注意的是，只有使用了lab-debug.min.js或者lab.src.js该选项才work。

$lab.script() & $lab.wait()

　　script()里的参数可以是很多形式，比如字符串（文件的相对路径或者绝对路径）、对象（src、type、charset src必须）、数组或者方法（或者前者们的组合），更多demo可以参考。前三者很好理解，这里简单提下参数为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();
复制代码

$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()配合定时器也能实现，但是在未来某一不确定时刻执行就不行了（比如说一段指定代码后）。如果有两个链要在未来某时刻执行呢？

复制代码
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);
复制代码

　　如上代码并没能得到预想的结果（实际上1000ms后一起输出），这时就需要用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);
复制代码

$lab.noconflict() 

　　使用noconflict()会将当前版本的labjs回滚到旧的版本。（2015-08-04 这个解释应该是错的）

 

　　read more from 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网