Detailed explanation of YUI module development principles_Basic knowledge

As Internet applications become more and more heavy and js code becomes larger and larger, how to effectively organize your own code has become very important. We should learn to control our own code, instead of ending up with a bunch of bugs popping up out of nowhere. Modular front-end development can help us manage code effectively, especially when multiple people develop, improving development efficiency.

The way YUI generates modules is :
YUI.add('module1', function (Y) { ... }, '1.0.0', requires: [' module2']);
YUI is a global variable, similar to $ in jquery. The first parameter in the add method is the name of the module module1, the second parameter is an anonymous function, which is the module content, the third parameter is the version name, and the fourth requires represents the dependency of the module. The above is module1 Depends on module2 (that is, module2 must be executed before module1).
Usually each module is stored in a js file, and the file is named after the module name, that is, module module1 is stored in the module1.js file, and module2 is stored in the module2.js file.
Load module module1:
//Load YUI seed file, which contains all YUI dependencies

Copy code The code is as follows:

<script><br>　YUI().use('module1', function (Y) { . .. });<br></script>

Let’s analyze what will happen in the above line of code.
1) YUI will first analyze the dependencies of the module1 module and create a URL: http://localhost:3000/yui/combo?mudule2.js&module1.js. Note that module2.js is in front of module1.js.
2) Create dynamic script tags and request js files from the server

Copy code The 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 the incoming request from the client, parses the URL, and then starts to look for the two js files module2.js and module1.js, and combines the two files into one file in order, and returns it to the client . The content of the final js file returned is as follows:
　

Copy code The code is as follows:

//Content in module2.js
YUI.add('module2', function (Y) { Y.module2 = {}; Y.module2.name = 'module2'; }, '1.0.0', requires : []);
//Contents in module1.js
YUI.add('module1', function (Y) { Y.module1 = {}; Y.module1.name = 'module1'; } , '1.0.0', requires: ['module2']);

4) The client receives the returned js and starts parsing, that is, executing the add method under YUI inside. The execution process is roughly as follows:

Copy code The code is as follows:

YUI.modules = {};
　// module2
YUI.modules.push(function (Y) { Y.module2 = {}; Y.module2.name = 'module2'; });
//module1
YUI.modules.push( function (Y) { Y.module1 = {}; Y.module1.name = 'module1'; });

5) After the parsing is completed, the onload method in step 2 (onreadystatechange method in IE) is automatically triggered. The following is the code at the "reserved" in step 2:

Copy code The code is as follows:

　for(var i = 0, len = YUI.modules .length; i < len; i ) {
//Register the api that needs to be exported 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 point the module parsing is completed, pass in the this parameter, and you can call module1 at will in the callback And the api output in module2
callback(this);

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