Lesson Four: module Loading system 2

Recently, I will talk about the Seajs module compiling _compile process.

This is followed by an example of lesson three. The first is the compilation of A.js

Module.prototype._compile = function () {126 var module = This 127//If the module has been compiled, return directly to Module.exportsif (module.status = = = status.compiled) {129 return module.exports130}133//1. The module file is 404.134//2. The module file was not written with valid module format.135//3. OT Her error cases.136//Here is the handling of some anomalies, at this time directly return null137 if (Module.status < status. SAVED &&!hasmodifiers (module)) {138 return null139}140//Change module status to compiling, indicating module is compiling141 Module.status = status.compiling142 143//Module internal use, is a method to get other modules to provide (called sub-modules) interface, synchronous operation144function require (ID) {145//The path of the module based on ID resolution146 var uri = Resolve (ID, Module.uri) 147//Get the module from the module cache (note that the submodule is actually a dependency of the main module has been downloaded)148 var child = cachedmodules[uri]149 150//Just return NULL when the URI is invalid.151//if child is empty and only indicates that the URI is incorrect due to a parameter fill error, then return null directlyif (!child) {153 return null154}155 156//avoids circular calls.157//If the Submodule's status is status.compiling, return directly to Child.exports, avoiding repeated compilation of the module because of cyclic dependencies158 if (child.status = = = status.compiling) {159 return child.exports160}161//points to the module that invokes the current module when initializing. Based on this property, you can get the call Stack when the module is initialized.162 child.parent = module163//Returns the Module.exports of the compiled child164 return Child._compile () 165}166//Module used internally to load the module asynchronously and execute the specified callback after the load is complete. 167 Require.async = function (IDs, callback) {168 Module._use (IDs, callback) 169}170//Use the path resolution mechanism inside the module system to parse and return the module path. The function does not load the module and returns only the resolved absolute path. 171 Require.resolve = function (ID) {172 return resolve (ID, Module.uri) 173}174//Through this property, you can view all modules that have been loaded by the module system. 175//In some cases, if you need to reload a module, you can get the module's URI and delete the information by deleting Require.cache[uri]. This will be retrieved again the next time you use it. 176 Require.cache = cachedModules177 178//Require is a method used to obtain the interfaces provided by other modules. 179 Module.require = require180//Exports is an object used to provide a module interface to the outside. 181 Module.exports = {}182 var factory = module.factory183 184//Factory is a function that represents the construction method of the module. By executing this method, you can get the interface that the module provides to the outside. 185 if (Util.isfunction (Factory)) {186 Compilestack.push (module) 187 Runinmodulecontext (factory, module) 188 Compilestack.pop () 189}190//Factory is an object, string, and other non-function types, the interface that represents the module is the object, the string equivalent. 191//such as: define ({"foo": "Bar"}), 192//For example: define (' I am a template. My name is {{name}}. ');193 Else if (factory!== undefined) {194 module.exports = factory195}196 197//Change module status to compiled, indicating that the module has been compiled198 Module.status = status.compiled199//Execute Module Interface modification via seajs.modify ()Execmodifiers (module) 201 Return module.exports202}

if (Util.isfunction (Factory)) {186       Compilestack.push (module) 187       Runinmodulecontext (factory, module) 188       Compilestack.pop () 189     }

This is the initialization of the Module.export.   Runinmodulecontext Method:

Execute module code according to module context 489   function Runinmodulecontext (FN, module) {490     //Pass in module-related two parameters and module itself 491     //Exports used to expose the interface 492     //require used to get the dependent module (synchronous) (compile)493     var ret = fn (Module.require, Module.exports, Module) 494     //Support return value exposed interface form, such as: 495     //Return {496     //   fn1:xx497     //   , fn2:xx498     //   ... 499     //}     if (ret!== undefined) {501       module.exports = ret502     }503   }

Executes the function method in A.js, when var B = require ("B.js") is called,

The Require method returns the return value of the Compile method of B, with var c = require (' c.js ') in the B module.
The compile method of C is called, and then the function,c of C is called, and if you want to expose the object, or Return object C, the exports = C of module C. or Direct is module.export = C; Finally, the module C.export = c is returned  , and the module c.export = c, in block B, you can use variable C to invoke the methods and properties of the C object in module C.
Finally, the A module can also invoke the properties and methods of the B object in the B module.
No matter what module, as long as the use of Module.export = XX module, the other modules can be used require ("XX module"), the XX module called various methods.

The state of the final module becomes module.status = status.compiled.

Module.prototype._use = function(ids, callback) {　　

　　var uris = resolve(ids, this.uri);      //解析[‘./a‘,‘jquery‘]    this._load(uris, function() {    //把解析出来的a，jquery模块的地址[url1,url2]，调用_load方法。      　　　　　　　　　　//util.map : 让数据成员全部执行一次一个指定的函数，并返回一个新的数组，该数组为原数组成员执行回调后的结果      var args = util.map(uris, function(uri) {         return uri ? cachedModules[uri]._compile() : null;//如果存在url，就调用_compile方法。

　　　})
 　　 if (callback) { callback.apply(null, args) }　
　　})

}

At this point the args = [module a.export, module Jquery.export];

seajs.use([‘./a‘,‘jquery‘],function(a,$){    var num = a.a;    $(‘#J_A‘).text(num);})

The A and $ in function are the module A.export and module Jquery.export.

Because I am now studying the jquery source code and the jquery framework design, so share some experience:
jquery source code, I saw a lot of analysis on the internet, look at the watch will not go on. The meaning is not big, recommend the good Taste class jquery source code parsing.

Masaki JavaScript frame design, personally feel difficult, but after intensive reading, you are a senior front-end engineer.

Yuber Sea.js, I suggest to study, to use, after all, the Chinese do their own. New projects or refactorings in our company will be done using SEAJS.


The next step is the modular handbars as well as MVC's backbone or MVVM's angular of source-code intensive reading. Here I would like someone to give me advice, read what books, see what site, watch what video can quickly learn.

Come on!

Lesson Four: module Loading system 2