Yui Note 1 module Loading

We usually use the <SCRIPT> label to introduce the script into the page for development. If it is a simple logic, but if it is a large scale JS development, the following problems may occur:

1. <SCRIPT> the tag loading script and execution script are processed together, so developers need to control this process by themselves.

2. <SCRIPT> the tag is a blocking download, which may affect the user experience. Therefore, we recommend that you place the script at the bottom of the page. Some async and defer attributes also solve this problem.

3. <SCRIPT> global variables are shared. That is to say, all the code is executed in one environment and there is no namespace concept, which may easily affect the interaction of codes, for example, the Code introduced later causes the previous code to crash and bugs.

4. <SCRIPT> there is no dependency. The Script Loading usually strictly follows the sequence, so it may cause dependency problems.

The reason for these problems is that the JS environment does not have the module concept in advanced programming languages (such as PHP, Java, C #). To solve these problems, with the development of JS, yui provides a solution: yui3 provides a global object Yui, which is a namespace and includes some basic functions such as loading the registration module. Its advantages include:

1. Decoupling the script registration and execution phases. Yui. Add () loads the code as needed, and Yui. Use () runs these modules in the security sandbox.

2. Yui can load modules synchronously or asynchronously.

3. In addition to some static methods, Yui avoids using the global context environment. The y instance is private and will not be overwritten by the sandbox.

4. Yui supports dependency loading. When the Add module is registered, it can contain some dependency information. When the module is used, this information is used to build the dependency tree and skip the loaded modules.