Use headjs to manage and load js to improve website loading speed

There are many mature js module loaders, such as requirejs and seajs, but for some small projects, their functions may be too "powerful". Maybe we just want one that can dynamically load js Function, maybe we just want to pretend that the page we write does not have a lot of things like . The two js loaders mentioned earlier emphasize modularity, that is, the organization and management of js files, and are more suitable for large projects.

As I just said, I just want to have a js file loader, and I only need to provide it with the address of a js file? Then enter our theme, use headjs. headjs is actually a complete set of tools, but what I just want to introduce is its Javascript Loader function. The following is its basic usage:

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

The simplest usage is to provide it with the address of a js file as parameters, and then it will load silently and non-blockingly behind the scenes. As for when it will be loaded and available, no one knows.

head.js("/path/to/file.js", function() {
 /*js加载完成*/
});

The most basic usage, in addition to providing an address parameter, also provides a callback function as the second parameter. After the js is loaded, the callback function is called. You can write the code that depends on the js in the callback function.

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

Provide multiple js file addresses, these js will be processed in parallel Load, but these files will be executed in the order given by the parameters. For example, even if file2.js is loaded before file1.js, it will wait until file1.js is loaded and executed.

head.js("file1.js", "file2.js", function() {
  
});

Load multiple js in parallel and execute them in parameter order. When all js are ready, the callback function is executed.

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

Multiple js are loaded in parallel, and whoever loads first will be executed first

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

Chain calling method of the previous method

In this case, it is basically easy to use headjs to load js files It's enough, and it can also handle dependencies. If you continue to install B and build a website, hoping to use all the special effects, find a jquery plug-in here, find another one there, in short, you will create a lot of files with complex dependencies, what will happen? manage? Is there any need to ask? The above mentioned usages can completely solve it. But then I thought about it, since I installed B, let’s install it to the end. Now it’s not a popular module or something, so let’s install the entire module, but it’s not as complicated as commonJS said, that is, define a module, and then stipulate that this module has What are the js files composed of, what are the dependencies among them, etc. Then let’s do it. headjs uses the MTI protocol. It should be no problem to modify it. Diaosi is pretending to be tall, rich and handsome again. In fact, it is a modification, but it is better to say that it is to add a few pieces of code, and functions such as loading dependencies are completely implemented using the headjs API.

Here, I added two new methods to headjs. One is add(name, file, preload) to add a module. The parameter name is the module name, and file is the js file address to be used. If there is If there are multiple files and there are dependencies, file can be an array. The elements in this array are the file addresses used, and dependencies are performed in the order of the array elements. The third parameter preload is used to specify whether to preload the module file. If it is false, the file will be loaded when the module is used. If it is true, the file used will be loaded immediately when the module is defined. The default is false

The other is use(name,callback), this method is used to use the module. name is the module name defined using the add() method, and callback is the callback function called after the module has been loaded.

So we can use headjs like this:

head.add('jqueryui',[jquery.js,jqueryui.js]);//定义模块
head.use('jqueryui',function(){
 //可以使用jqueryui啦
});

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

See the init attribute No, I call it the initialization attribute. The value of init represents the file name. For example, init above represents the file init.js in the same directory as headjs. The so-called initialization means that the init file must have been loaded before using use(). So you can write the module definition in the initialization file.

Nima, what kind of trouble is this? There is another main attribute, okay, I admit that I saw someone else having this thing, so I followed suit and got one too. The main attribute represents the module name, that is, after the head.js and init.js files are loaded, the module specified by the main attribute will be automatically executed (of course, the module must be defined in init first). So with these two things, we can execute very complex code without a single js code on the page (except for the tag that introduces headjs).

There is another point that needs to be explained, which is the storage location of the module files. The module file should be stored in the same directory as head.js, such as head.add('a','a.js'). The path of a.js here is the same as head.js, which is the path of the module file. It is relative to the path where head.js is stored, and can only go down, not up, for example:

head.add('a','a/a.js')//Correct

head.add('a','../a.js')//Error, cannot be positioned upward

Finally, put the modified head.js source file, It's not a compressed version, there are comments on the changes.

The above is the entire content of this article. I hope it will be helpful to everyone. I also hope to support the PHP Chinese website!

For more related articles about using headjs to manage and load js and improve website loading speed, please pay attention to the PHP Chinese website!