Detailed explanation of YUI module development principle

With the Internet application more and more heavy, js code more and more huge, how to effectively organize their own code, has become very important. We should learn to control our own code, not end up with a bunch of bugs that come out of nowhere. The modular development of the front end can help us to effectively manage the code, especially when the development of multiple people, improve the development efficiency.

The way YUI generates the module is :
Yui. add('module1', function (Y) {... } '1.0.0, the requires: [' module2']);
YUI is a global variable, similar to $in jquery. The first parameter in the add method is the module name module1, the second parameter is an anonymous function containing the module content, the third parameter is the version name, and the fourth parameter requires indicates the module's dependency, as shown above, that module1 depends on module2 (that is, module2 executes before module1).
Generally, 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 module2 is stored in the mudule2.js file.
Load module module1:
// load the YUI seed file, which contains all of the YUI dependencies

<scriptsrc="http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js"></script>
<script>
　　YUI().use('module1', function (Y) { ... });
</script>

Now let's look at what's going to happen with this line of code.
1) YUI will first analysis module1 module dependencies, create a URL: http://localhost:3000/yui/combo? Mudule2. The js&module 1. Js. Note that module2.js precedes module1.js.
2) create dynamic script tags and request js files from the server

　　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;
　　　　　　　　// The reserved 
　　　　　　} 
　　　　};
　　} else {
　　　　//The IE
　　　　script.onload = function () {
　　　　　　// The reserved 
　　　　};
　　}
　　document.body.append(script);

3) the server side detects the request from the client side, parses the URL, and then starts to look for the two js files module2.js and module1.js, and assembles the two files into one file in order and returns it to the client side. The final js file returned is as follows:

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

4) the client accepts the returned js and starts to parse, that is, execute the add method under YUI inside, and the execution process is roughly 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" place in step 2:

　　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 a callback function in YUI().use
　　//At this point, the module parsing is completed, this parameter is passed in, and the API output in module1 and module2 can be called arbitrarily in the callback
　　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.