Detailed description of YUI module development principles

With the increasing importance of Internet applications and the growing size of js code, it is very important to organize your own code effectively. We should learn to control our code, instead of having no idea where the last bunch of bugs come from. Front-end modular development can help us effectively manage Code, especially when many people develop, to improve development efficiency.

The YUI generation module is:
YUI. add ('lele1', function (Y) {...}, '1. 0.0 ', requires: ['lele2']);
YUI is a global variable, similar to $ in jquery. In the add method, the first parameter is the module name module1, the second parameter is an anonymous function, which contains the module content, and the third parameter is the version name, the fourth requires indicates the module dependency. The preceding figure shows that module1 depends on module2 (that is, module2 must be executed before module1 ).
Normally, each module is stored in a js file named after the module name. That is, module module1 is stored in the module1.js file, and module 2 is stored in the mudule2.js file.
Module module1:
// Load the YUI seed file, including all dependencies of YUI

Copy codeThe Code is as follows:
<Scriptsrc = "http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js"> </script>
<Script>
YUI (). use ('lele1', function (Y ){...});
</Script>

Next we will analyze what will happen in the above line of code.
1) YUI first analyzes the dependency between the module1 module and creates a URL: http: // localhost: 3000/yui/combo? Mudule2.js & module1.js. Note that module2.js is in front of modul1.js.
2) create a dynamic script tag and request js files from the server.

Copy codeThe Code is as follows:
Var script = document. createElement ('script ');
Script = 'HTTP: // localhost: 3000/yui/combo? Mudule2.js & module1.js ';
If (script. readyState ){
// IE
Script. onreadystatechange = function (){
If (script. readyState = "loaded" | script. readyState = "complete "){
Script. onreadystatechange = null;
// Reserved
}
};
} Else {
// Non-IE
Script. onload = function (){
// Reserved
};
}
Document. body. append (script );

3) The server detects requests sent from the client, parses the URL, and then searches for the module2.js and module1.js js files. Then, the two files are assembled into one file in order and returned to the client. The contents of the final js file returned are as follows:
　　
Copy codeThe Code is as follows:
// Contents in module2.js
YUI. add ('lele2', function (Y) {Y. module2 = {}; Y. module2.name = 'lele2';}, '1. 0.0 ', requires: []);
// Contents in module1.js
YUI. add ('lele1', function (Y) {Y. module1 = {}; Y. module1.name = 'lele1';}, '1. 0.0 ', requires: ['lele2']);

4) The client receives the returned js and starts parsing. That is, it executes the add method in the YUI. the execution process is roughly as follows:

Copy codeThe Code is as follows:
YUI. modules = {};
// Module2
YUI. modules. push (function (Y) {Y. module2 = {}; Y. module2.name = 'lele2 ';});
// Module1
YUI. modules. push (function (Y) {Y. module1 ={}; Y. module1.name = 'lele1 ';});

5) after the resolution is complete, the onload method in step 2 is automatically triggered (onreadystatechange method in IE). The code for "Reserved" in step 2 is as follows:

Copy codeThe Code is as follows:
For (var I = 0, len = YUI. modules. length; I <len; I ++ ){
// Register the api that requires export output in the module under this; this is an instance of YUI, this = new YUI ();
YUI. modules [I] (this );
}
// Callback is the callback function in YUI (). use.
// At this time, the module is parsed and the this parameter is passed in. In callback, you can call the APIS output in module1 and module2 at will.
Callback (this );
 

The above is a simple introduction to modular development with the help of YUI. The actual process of YUI is much more complicated than above.