JavaScript File loader LABJS API detailed

In the book "High-performance JavaScript," LABJS, the class library used to load JavaScript files, LABJS is the abbreviation for Loading and Blocking JavaScript , as the name implies, Loading and blocking JavaScript, and its API script () and wait () gracefully implement these two features, and I've also explained the usage of these two core APIs in the high performance JavaScript loading and execution article. Of course, LABJS also has more APIs, this article uses the example to explain the next Labjs other APIs.

$LAB. Setglobaldefaults () & $LAB. SetOptions ()

The parameters can be set exactly the same, except that the former is a global setting, acting on all $lab chains, which appear at the beginning of a chain (followed by script (), wait (), and so on), which only works on the chain. This parameter can be an object that contains multiple key-value pairs.

• Alwayspreserveorder

A Boolean value (False by default), and if set to true, a wait () is set by default after each script (), allowing the scripts on the chain to execute one after the other.

  $LAB. SetOptions ({alwayspreserveorder:  }) //  tells this chain to implicitly " Wait "on  //  execution (not loading) between each script . Script ("Script1.js") // Span style= "color: #008000;" > SCRIPT1, Script2, SCRIPT3, and Script4 *do* depend on each . Script ("Script2.js") //  Other, and'll execute serially in order after all 4 has the . Script (" Script3.js ") //  loaded in parallel . Script ("Script4.js"  function  () {Script4func ();}); 

• Uselocalxhr

A Boolean value (default true), and if true, Labjs uses XHR Ajax to preload the same domain script file. It is important to note that this setting only works in old-fashioned WebKit browsers (browsers that cannot use Ordered-async and do not implement a real preloaded browser), and in the same domain, the settings are only effective (otherwise ignored)

• Cachebust & AllowDuplicates

Labjs for the cache has some strange processing (about the cache, you can refer to my previous article on the browser caching mechanism analysis), such as the following code:

$LAB. Script (' Index.js ');

It's simple, right? First load, no problem, HTTP200 download from server side. But after F5:

It's actually read from the cache! This means that the service side of the changes, it does not effect! And usually the F5 is sent to the server after the request, if the service-side file is not modified to return HTTP304 read cache, if the file is modified directly load new. We can use the Cachebust option for this issue:

true }) $LAB. Script (' index.js ');

This ensures that the files are read from the server each time ( never read the cache ).

Another problem is that, for several of the same requests, LABJS is executed only once:

$LAB. Script (' Index.js '). Script (' index.js '); $LAB. Script (' index.js ');

In fact index.js this file only executes once! If the code in Index.js is to print Hello World, that means it will only be printed once. How do I print three times? With allowduplicates:

true }) $LAB. Script(' index.js '). Script (' index.js '); $LAB. Script (' index.js ');

In fact, the above code, although it will execute three times index.js, but the request only once, the other two is the cache read, and as previously said, if the server has been modified, also read from the cache, this is terrible. So allowduplicates can be used with cachebust :

true true }) $LAB. Script(' index.js '). Script (' index.js '); $LAB. Script (' index.js ');

It's actually a string of strings representing the request, which is common in AJAX requests.

• BasePath

A string (the default empty string) that adds the string to the front of the URL in each script ().

• Debug

A Boolean value (False by default), if the debug option is turned on, the information will be printed on the console, and it is important to note that only work is used with the lab-debug.min.js or LAB.src.js option.

$LAB. Script () & $LAB. Wait ()

The parameters in script () can be in many forms, such as a string (relative or absolute path to a file), an object (SRC, type, charset src must), an array, or a method, and more demos can refer to example 8 below. The first three are very well understood, here is simply the case of the parameter is a function, when the parameter in script () is an anonymous function, the function will be executed immediately, it can return a value, and the value must be said string, An object or array form, which is equivalent to assigning the script ().

$LAB. Script (function(){    //assuming ' _is_ie ' defined by host page as true in IE and false on other browsers    if(_is_ie) {return"Ie.js";//If in IE, this script would be loaded    }    Else {      return NULL;//if not in IE, this script call would effectively be ignored}}). Script ("Script1.js"). Wait ();

$LAB. Queuescript () & $LAB. Queuewait () & $LAB. Runqueue () & $LAB. Sandbox ()

Script () and wait () will cause the scripts to execute immediately (unless the timer is set), but Queuescript () and queuewait () will allow the script to execute at any time, with Runqueue () on execution.

var a = $LAB. Queuescript (' Index.js '). Queuewait (function() {  console.log (' Hello World ');}); SetTimeout (function() {  1000);

If the script can be executed after 1000ms, the effect looks like the script () timer can also be implemented, but in the future at a certain time of uncertainty execution (for example, after a specified code). What if there are two chains to be executed at some point in the future?

var a = $LAB. Queuescript (' Index.js '). Queuewait (function() {  console.log (' Hello World ');}); SetTimeout (function() {  ); var b = $LAB. Queuescript (' Index2.js '). Queuewait (function() {  console.log (' (Hello World ');}); SetTimeout (function() {  2000);

If the above code does not get the desired result (in fact, after the 1000ms output), then you need to use a sandbox () to create a new instance.

var a = $LAB. Queuescript (' Index.js '). Queuewait (function() {  console.log (' Hello World ');}); SetTimeout (function() {  ); var b = $LAB. Sandbox (). Queuescript (' Index2.js '). Queuewait (function() {  console.log (' Hello World ');}); SetTimeout (function() {  2000);

$LAB. Noconflict ()

Using Noconflict () rolls back the current version of LABJS to the old version.

Read more from LAB documentation

JavaScript File loader LABJS API detailed