Using Headjs to manage and load JS to improve the speed of Web site loading _javascript skills

Now there are a lot of mature JS module loader, for example, Requirejs and Seajs, but for some small projects, their function may be too "strong", maybe we just want to have a dynamic load js function, maybe we just want to install B, let oneself write a page without a lot of <script src= "A.js" ></script> such things. The previous two JS loaders are more emphasis on modularity, that is, more emphasis on the organization and management of JS files, more suitable for large projects.

Just like said, I just want to have a JS file loader, I just provide it a JS file address on the kind of it? Let's get into our subject and use Headjs. Headjs is actually a complete set of tools, but I just want to introduce the JavaScript loader features of it. The following are its basic uses:

head.js("/path/to/file.js");

The simplest use, provide a JS file address to it as a parameter, then it will silently in the back of the load without blocking, as to when the load is available, no one knows.

Head.js ("/path/to/file.js", function () {
 /*js load complete/
});

The most basic use, in addition to providing an address parameter, also provides a callback function as the second parameter. After the JS load completes, call back the callback function, you can write the code that relies on that JS in the callback function.

head.js("file1.js", "file2.js", ... "fileN.js");

Provide more than one JS file address, these JS will be loaded in parallel, but will be given in the order of the parameters of the execution of these files, for example, even if the file2.js than File1.js first load complete, but it will still wait until the file1.js load and execution after the execution.

Head.js ("File1.js", "File2.js", function () {
 
});

Load multiple JS in parallel and execute in the order of parameters, when all JS is ready to complete, the callback function is executed.

Head.js ("File1.js");
Head.js ("File2.js");
Head.js ("File3.js");

Multiple JS loaded in parallel, and who will execute first after loading

head.js("file1.js").js("file1.js").js("file3.js");

Chain invocation method of the previous method

In this way, the use of Headjs to load JS files are basically enough, but also can handle dependencies. When it is if you continue to install B, to get a website, no special effects are used, here to find a jquery plug-in, where to find another, in short, to get a lot of files, which have complex dependencies, that the swollen mody do? Do you still have to ask, the above several usages can completely solve. But then I thought, since the installation B that is a pack in the end, now is not a popular module or something, that we also the entire module, but not as complex as Commonjs said, is to define a module, and then the module is a few JS files, and how the dependencies and so on. Then do it, Headjs use the MTI protocol, modify it should also be no problem. Cock silk and loaded high handsome, in fact, said to be modified, rather than add a few pieces of code in, and load dependencies and other functions are entirely with the Headjs API implementation.

Here, I gave Headjs two new methods, one is Add (name,file,preload) module, parameter name is the module name, file is to use the JS file address, if there are multiple files, and there is a dependency, then file can be an array, The elements in this array are the file addresses used, and are dependent on the order of the array elements. The third parameter, preload, is used to specify whether to preload the module file, or FALSE to load the file when the module is used, and when the module is true, the file used is loaded immediately when it is defined, and the default is False

The other is use (Name,callback), which is used for modules. Name is the name of the module that is defined with the Add () method, and callback is the callback function that is invoked after the module has been loaded.

So we can use headjs like this:

Head.add (' jQueryUI ', [jquery.js,jqueryui.js])//define Module
head.use (' jQueryUI ', function () {
 //can use jQueryUI 
});

If there are many modules, the module definition code can be written separately in a file, and after the introduction of the Headjs, the module definition file is loaded immediately. This process can be easily implemented like this:

<script src="head.js" init="init"></script>

See that init attribute not, I call it the initialization attribute, Init's value represents the filename, for example, above init represents the Init.js file with the Headjs directory. The so-called initialization is that before using use (), the init file must have been loaded. So you can write the definition of the module in the initialization file.

<script src="head.js" init="init" main="main"></script>

Ni, this is to make what Ah, how again a main attribute, OK, I admit to see other people have this thing so hand cheap also follow suit to get one. This main property represents the module name, which is when the head.js and init.js files are loaded and the module specified by the main property is automatically executed (the module is, of course, defined first in init). So with these two things, we can be in the page without a JS code case (in addition to the introduction of the HEADJS tag), the implementation of very complex code.

Another place to explain is the location where the module files are stored. The module file should be stored in the same directory as the head.js, such as Head.add (' A ', ' a.js '), The a.js path here is the same as the head.js, that is, the path of the module file is relative to the Head.js store path, and can only go down, not to go before, such as:

head.add(‘a','a/a.js')//正确

head.add(‘a','../a.js')//错误，不能往上定位

Finally, put on the modified head.js source files, is not a compression version, where the changes are commented.

The above is the entire content of this article, I hope to help you, but also hope that a lot of support cloud Habitat community!