SEAJS Module Loading Process Analysis

First look at a SEAJS official example, the following seajs.use (' main ') as an example, to parse the process of loading mod main

App.htmlseajs.use ("main"); Main.jsdefine (function (require) {  var Spinning = require ('./spinning ');  var s = new Spinning (' #container ');  S.render ();}); Spinning.jsdefine (function (Require, exports, module) {    var $ = require (' jquery ');     function Spinning (container) {        This.container = $ (container);        This.icons = This.container.children ();        This.spinnings = [];    }    Module.exports = Spinning;    function random (x) {return math.random () * x};});

Several states of the module during the loading process

Module.status = {  //1-the ' Module.uri ' is being fetched fetching:1  ,  //2-the meta data have been saved to Cachedmods  Saved:2,  //3-the ' module.dependencies ' is being loaded  loading:3,  //4-the module is  Ready  -to-execute loaded:4,  //5-the module is being executed  executing:5,  //6-the ' Module.exports ' is available  Executed:6}

Each mod maintains some of its own important properties during the loading process, such as

• Dependencies: Direct dependency of the module

• _remain: Defaults to the current mod's dependencies length, used to lock, only if it is directly dependent on all the modules are loaded, that is, when the state is loaded, _remain becomes 0, this time trigger the current mod onload, Notifies a module that is directly dependent on it.

• _waiting: Storing a module table directly dependent on it, this property makes it possible to establish a dependency chain between modules, which is very important for the notification mechanism after the module is loaded.

• Factory: Parameters in the module definition for define (ID, deps, Factory)

• Callback: The unique properties of the module generated when using use, which is useful in wake-up mechanisms

Diagram Seajs.use (' main '), the module loading process is as follows:

Perform process analysis:

Using the use call, a module,id is automatically built for the number of uses and use of the current document, such as _USE_0, which is typically the source of the dependency chain.

After the module is loaded, the JS file content execution is triggered, and the define function is executed to complete the initialization of two important properties dependencies & _waiting.

After the module is loaded, the onload event is triggered, such as the current module has dependencies, into the parallel loading process. Or when it is found that the current module dependencies all loaded or empty, according to _waiting to wake up gradually, to execute the module callback, because only when using the use of the call will be added to the MoD callback properties, So this process is generally indexed up to the source of the dependency chain, and in the above code example, the dependency chain can probably be described as follows:

The module that executes the USE function creates a custom callback function, because usually as the source of a dependency chain, it needs to start from it and it has a direct relationship to the dependencies exports, The calculation process is equivalent to executing the factory function of the dependent module sequentially, such as in the execution of a requrie in the code, such as var Spinning = require ('./spinning ') in the Main.js file, Then execute the Require module.

The code is as follows:

Mod.callback = function () {    var exports = []    var URIs = mod.resolve ()    for (var i = 0, len = uris.length; I < ; Len i++) {      Exports[i] = cachedmods[uris[i]].exec ()    }    if (callback) {      callback.apply (Global, exports)    }    Delete Mod.callback}

After calculating the exports, we use exports as the parameter to invoke the original callback of the current module, and the module executes.

The biggest difference between the Requirejs and the

The biggest difference is that Seajs is the module loading and module execution separation, and Requirejs is loaded, will be calculated in advance module exports, Functionbody in factory require (' xxx '), Just get the exports of the calculated module XXX directly.

Summarize

After reading Seajs and Requirejs module loading process, the dynamic loading of the script has a deeper understanding, in the code design, by using the _waiting to maintain a dependency chain, the execution of the time to go up backwards, to find the callback properties of the MoD began to execute, Let the original complex dependency management become simple, the code loading and execution separation has the advantage of bad, this online also has a lot of discussion, do not expand the description, in short, still feel worth a look.

End