SeaJS of JavaScript modular Development Library

SeaJS of JavaScript modular Development Library
SeaJS is developed by lifesinger, a Chinese cool. The current version is 1.1.1, with less than 1500 lines of source code, and only 4 kb after compression, with extremely high quality.
This article will describe some basic usage of SeaJS and will not cover all aspects, but will explain some details not mentioned in the official documentation for my personal understanding.
 
I. SeaJS global interface
 
SeaJS exposes two global identifiers: seajs and define.
 
If your project already uses the identifier seajs, you do not want to change it. In this case, SeaJS can give way to the global seajs. For example
Var boot = seajs. noConflict ();
In this case, boot is equivalent to the previous seajs.
 
If define is used in your project, you do not want to change it. SeaJS is very tolerant, and its define can also be used. For example
Var boot = seajs. noConflict (true );
Only one true value is input. At this time, the global define is gone. In this case, you need to use boot. define to replace the previous define.
 
Those who have used jQuery should be familiar with the $. noConflict method. The noConflict method of SeaJS is similar to this method.
 
Ii. Writing SeaJS modules
 
By default, SeaJS uses the Global define function Writing module (define can be used as a syntax keyword). define defines three parameter IDs, deps, and factory.
 
Define (id ?, Deps ?, Factory );
 
This define function reminds you of AMD's Unique API: define function. Or confusing, the difference between SeaJS and RequireJS define is not understood.
 
Both of them have a global define, and the parameters are all three, and the corresponding parameter names are the same. It will be mistaken that SeaJS is also the implementation of AMD.
 
In fact, the first two parameters of SeaJS and RequireJS define are indeed the same.
 
All IDS are strings and comply with Module Identifiers. Deps all refer to dependent modules and all types are arrays. The difference lies only in the third parameter factory. Although the types are also functions, the parameter meanings of factory are different.
 
In RequireJS, there are two factory parameters:
A. corresponds to the deps (array) elements one by one. There are several deps and several factory arguments.
Define (['A', 'B'], function (a, B ){
// Todo
});
　　
B. The format is require, exports, and module (modules/wrappings format ).
Define (function (require, exports, module ){
// Todo
});
　　
This approach is a compromise from RequireJS to Modules/Wrappings later, that is, it is compatible with it. The define of SeaJS only supports the second method of RequireJS: Modules/Wrappings.
Note: SeaJS follows Modules/Wrappings and Modules/1.1.1. The define keyword is not mentioned in both rules. In Modules/Wrapping, the module must use module. declare instead of define. However, only AMD standards have the define definition. That is to say, although SeaJS is not implemented by AMD, it uses define, an easy-to-misunderstand identifier.
 
 
Having said so much, I haven't started writing a module. Next we will start from the simplest
1. Simple Module
Define ({
AddEvent: function (el, type, fn ){},
RemoveEvent: function (el, type, fn ){},
FireEvent: function (el, type ){}
});
　　
In this way, an event module is written, which is no different from writing a single instance. More often, use this method to define pure data modules. It is similar
Var E = {
AddEvent: function (el, type, fn ){},
RemoveEvent: function (el, type, fn ){},
FireEvent: function (el, type ){}
};
　　
2. Simple packaging Module
Define (function (){
// Some internal auxiliary functions
//...
Function addEvent (){
//..
}
Function removeEvent (){
//..
}
Function fireEvent (){
//..
}
Return {
AddEvent: addEvent,
RemoveEvent: removeEvent,
FireEvent: fireEvent
};
});
　　
You can do a lot in this anonymous function. Finally, you only need to expose the necessary interfaces. It is similar
Var E = function (){
// Some internal auxiliary functions
//...
Function addEvent (){
//..
}
Function removeEvent (){
//..
}
Function fireEvent (){
//..
}
Return {
AddEvent: addEvent,
RemoveEvent: removeEvent,
FireEvent: fireEvent
};
}();
　　
3. NodeJS-style packaging Module
 
There is no trace of NodeJS style (Modules/1.1.1) in the above two writing methods, which is equivalent to "method 2.
Define (function (require, exports ){
// Some internal auxiliary functions
//...
Function addEvent (){
//..
}
Function removeEvent (){
//..
}
Function fireEvent (){
//..
}
// Use the exports export module interface instead of returning an object
Exports. addEvent = addEvent;
Exports. addEvent = removeEvent;
Exports. addEvent = fireEvent;
});
　　
We can see that the difference from method 2 is:
1: The anonymous function has two parameters: require and exports.
2: The export interface uses exports instead of returning an object.
Isn't exports exactly the NodeJS style? Careful personnel may find that the require parameter in this example is not used, which is exactly what we will talk about below.
 
4. Dependent modules
 
In SeaJS, "dependency" must be obtained using the require function. Although deps, the second parameter of define in SeaJS, also indicates "dependency", it provides a packaging tool (SPM). In addition, SeaJS require is passed into the anonymous function as a parameter, and RequireJS require is a global variable. Www.2cto.com
 
The above definition is a non-dependent module. The following is a dependent module.
Define (function (require, exports ){
Var cache = require ('cache ');

//...

Exports. bind = bind;
Exports. unbind = unbind;
Exports. trigger = trigger;
});
　　
This event module depends on the cache module. The function has two parameters: require and exports. Aside from the anonymous function and define of the outer layer, it is in the standard NodeJS format: Use the require function to retrieve the dependent module and use exports to export the existing Module Interface.
In fact, the module with dependency in SeaJS must be written in "Mode 4", that is, it must be a packaging module, and the first parameter of the anonymous function must be the identifier "require ". That is, you can use the original syntax keyword of require, although it is not global.
 
Next, let's take a look at some interesting phenomena of the parameters require and exports of anonymous functions.
A. What is the result of changing to req if it is not require.
Define (function (req, exports ){
Var cache = req ('cache ');

//...

Exports. bind = bind;
Exports. unbind = unbind;
Exports. trigger = trigger;
});

Firebug network requests are as follows:
 
The dependent "cache" is not loaded. Of course, JS will certainly report an error.

B. Only change the form parameter of the anonymous function to req. The function still uses require.
Define (function (req, exports ){
Var cache = require ('cache ');

//...

Exports. bind = bind;
Exports. unbind = unbind;
Exports. trigger = trigger;
});
　　
View network requests
 
This time the "cache" module actually requested it.
 
Check whether require is declared in the above anonymous function code, and the parameter req is not require. That
?
1 var cache = require ('cache ');
Where does require come from?
 
According to the SeaJS source code, its define function will take the toString of the anonymous function and use regular matching to parse the "cache" (Private parseDependencies function ).
 
We can also see that although the cache request is down, an error is still reported because the require is not defined during the execution phase. Therefore, when writing a dependency module, the first parameter of the anonymous function must be require and cannot be changed.
 
Because the factory. toString and regular expression parsing dependencies are used, the require parameter cannot be an expression, as shown in
// The require parameter cannot be an expression operation.
Require ("ui-" + "dialog ");

You cannot use the alias of require, as shown in figure
// You cannot assign the require value to another variable.
Var req = require;
Req ("ui-dialog ");
　　
C. Change exports to expo.
Define (function (require, expo ){
Var cache = require ('cache ');

//...

Expo. bind = bind;
Expo. unbind = unbind;
Expo. trigger = trigger;
});
　　
There is no problem with running. That is, the second parameter "exports" can be customized. Obviously, SeaJS does not approve of changing "exports" to others, which obviously damages the NodeJS-style module specifications (Modules/1.1.1)-they use the "exports" export module interface. However, this cannot be enforced in SeaJS. It can only be a human agreement.
 
5. Mixed Writing module
 
The preceding section describes how to write a module in various situations. To be consistent with the NodeJS style, use require to obtain the "dependency" and use exports to export the "interface ". SeaJS imposes restrictions on obtaining dependencies, that is, you must use require. However, you do not have to use exports for export, that is, you can change exports to others. You can even directly use the "return value ".
Define (function (require ){
Var cache = require ('cache ');

//...

// Use the return value export interface
Return {
Bind: function (){},
Unbind: function (){},
Fire: function (){}
};
});
　　
We know that in NodeJS, a module can only be an object. That is, the method is always mounted to exports. If the exports export interface is used in SeaJS, the module can only be a JS object. If you use the "Return Value" export interface, the module can be of any JS type. A function module is returned as follows.
Define (function (require ){
Var cache = require ('cache ');

Function ad (){
//...
}

// Function type module
Return ad;
});
　　
Iii. SeaJS Loading Method
 
Although it provides various methods (synchronous and asynchronous) for loading, the simplest way is to directly write the script tag in the page. After SeaJS is introduced, the seajs. use method is usually used for getting started.
Seajs. use has two parameters. The first parameter can be a string (Module name) or an array (multiple modules ). The second parameter is the callback function. Callback after the module is loaded. The callback function parameters correspond to the first one.
Seajs. use ('dom ', function (dom ){
// Todo with dom
});
　　
The dom module will be used in the callback function as follows. Of course, it also provides a shortcut data-main (same as RequireJS ).

 

From Snandy