Asynchronous loading JS (3)

1.6 Head.appendchild ()

To implement on-demand loading of the script and avoid blocking page rendering, you can use Head.appendchild () to

Add JavaScript scripts to the

var head = document.getElementsByTagName (' head ') [0],

Script = document.createelement (' script ');

script.src = URL;

Head.appendchild (script);

The disadvantage of Head.appendchild () is that users still need to process dependencies between modules before executing the code.

and load the dependent modules before executing the code.

1.7 Function Wrapping

In order to process the module dependencies and load ahead of time before the script executes, the user needs to use the function wrapper to build

Your own module-loading API.

Define (//The name of this module "Types/manager",//The array of dependencies["Types/employee"],//the function to execute When all dependencies//if all dependencies has loaded.//the arguments to this function is the array of//Dependenci Es mentioned above.function (Employee) {function Manager () {this.reports = [];} This would now Workmanager.prototype = new Employee ();//Return to the Manager constructor function//so it can is used by Other Modules.return Manager;});

The above is the syntax used by Requirejs, and it can be further simplified to load the original JavaScript file without having to define the module.

Require (["some/script.js"], function () {//This function was called after Some/script.js had loaded.});

As you can see, the syntax of the function wrapper is more concise and allows the loader to do a head.appendchile (script) load operation.

The normal CommonJS syntax differs from the syntax of the function wrapper, although they all work well in the browser.

If the server process can convert the function wrapper to a mode suitable for transport, then the CommonJS syntax can also be used in the Head.appendchild (script) type of the loading process.

However, it is more important not to force the runtime server process to convert the code, otherwise it can lead to debugging difficulties, and the function wrapper will lose line number information after injecting the server process.

Asynchronous loading JS (3)