Yui Module Development principle of the basic knowledge _

With the application of the Internet more and more heavy, JS code more and more large, how to effectively organize their own code, become very important. We should learn to control our own code, not to the last pile of bugs and not know where to come from. The front-end modular development can help us to effectively manage the code, especially when many people develop, improve the development efficiency.

Yui Generation Module Way is :
Yui.add (' Module1 ', function (Y) {...}, ' 1.0.0 ', requires: [' module2 ']);
YUI is a global variable, similar to the $ 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 module's dependencies, as above is the Module1 dependent on module2 (i.e. Module2 to be performed prior to Module1).
Usually each module is stored in a JS file, the file is named after the module name, that is, the module Module1 stored in the module1.js file, module2 stored in the Mudule2.js file.
Load Module Module1:
Load Yui seed file, including Yui all the dependencies

Copy Code code as follows:

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

Here's what happens when you analyze the above line of code.
1 YUI will first analyze the Module1 module existing dependencies, create a url:http://localhost:3000/yui/combo?mudule2.js&module1.js. Note Module2.js in front of Modul1.js.
2 Create dynamic Script tag, request JS file to server side

Copy Code code 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 server-side detection of the client came to the request, parse the URL, and then start looking for Module2.js and module1.js two JS files, and two files in order to spell a file, returned to the client. The final return of the JS file contents are as follows:
　　

Copy Code code as follows:

What's in the Module2.js
Yui.add (' Module2 ', function (Y) {y.module2 = {}; Y.module2.name = ' module2 '; }, ' 1.0.0 ', requires: []);
What's in the Module1.js
Yui.add (' Module1 ', function (Y) {y.module1 = {}; Y.module1.name = ' Module1 '; }, ' 1.0.0 ', requires: [' module2 ']);

4 The client received the return of JS, began to parse, that is, the implementation of the Yui under the Add method, the implementation process is generally as follows:

Copy Code code 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 parsing is complete, automatically triggers the OnLoad method in step 2 (ie is the onreadystatechange method), and the following is the code for "Reservation" in step 2:

Copy Code code as follows:

for (var i = 0, len = YUI.modules.length i < len; i++) {
Register the API required in the module below this. This is an example of yui, this = new Yui ();
Yui.modules[i] (this);
}
Callback is Yui (). Back off function in use
At this point, the module parsing completes, passing in the This parameter, can call the API of Module1 and Module2 at any time in callback
Callback (this);

The above is the use of Yui to the modular development to do a simple introduction, Yui actual process than above to be more complex.