Summary of Sea.js realization principle of modularization development

SEAJS official website said: SEAJS is a module loader, so learning it is not difficult.

In my understanding is: Originally we need to manually create a script tag to introduce JS file, but with Seajs, it will automatically help us do the work.

Here only to say the principle of implementation, specific use please see SEAJS official website: http://seajs.org/docs/

Here's a summary:

1. Sea.js is how to solve the module loading (the module here is actually the JS file loading),

2. How sea.js solves the module dependencies

3. How sea.js resolves a naming conflict

1. Module loading

In fact, the principle is very simple, and manual introduction of JS file is the same.

is when you call functions such as seajs.use, require, and require.async that have load functions.

Its internal code creates a script tag , sets src to the JS file you want to introduce, and then append to the DOM document to load,

　　When loading is complete, remove the script tag, so when we review the element we don't see the <script> tag,

However, because the file has been introduced, even removing the script will not affect the code's use.

We can use 360 guards to limit the speed of the function, the speed down, and then introduce JQ, it is possible to see it is the way to deal with

　　

After loading, sea.js will remove this script tag:

The general sentence: The script tag is used to load the module

2. Module dependencies

The above problem is clear, in fact, this dependency is very simple, that is, the problem of loading order .

For example, A.js relies on b.js, and in sea.js internal code, it loads the b.js and then loads the a.js so that the dependency problem can be resolved.

3. Naming conflicts

Solve the above two problems, there is the problem of relying on the interface, that is, the dependency of the module is done, but Sea.js is to use the Define (FN) function to define the module, the variables inside are local,

We have to give an interface call outside.

So, the exports object is out, when you define a module using Sea.js, you can put your external function interface on the exports object , such as:

 1  define (function   (require, exports, module) { 2  var  arr = [12,3,4,5,56 3  var  method = function   { 4  // code ...  5   6    exports.arr = arr;  External interface  7  exports.method = method; External interface  8 }) 

When a file is to be dependent on this file, the return value is the exports object when the Require (URL) is called, so the interface problem is resolved.

It also solves the problem of naming conflicts very well, even if several colleagues use the same name, there will be no problem.

Because the exports returned here is the equivalent of a namespace .

If there are errors, please correct me, welcome to shoot Bricks!