SeaJS from the domestic cattle lifesinger development. The current version is 1.1.1, less than 1,500 lines of source, compression after 4k, very high quality.
This will talk about some basic usage SeaJS will not exhaustive, but will tell you a personal understanding of the official document some details not mentioned.
A, SeaJS the global interface
SeaJS disclosed two to the global identifier : seajs and define.
If your project is already using the identifier seajs, I do not want to change. Then SeaJS can make a global seajs. Such as
var boot = seajs.noConflict(); Then boot is equivalent to the previous seajs.
If your project even define identifiers also used, do not want to change. SeaJS is very tolerant, it can also define let out. Such as
var boot = seajs.noConflict(true); The above and more than just a pass true. Then the global define gone. Then you need to define before using boot.define instead.
Used jQuery students should be familiar to $ .noConflict method, SeaJS of noConflict similar.
Two, SeaJS writing module
SeaJS define global default write function module (available as to define syntax keywords), define defines three parameter id, deps, factory.
define(id?, deps?, factory);
This is easy to define reminds you of AMD 's unique API: define function. Or confusing, do not understand cause and SeaJS RequireJS difference define the.
They have a global define, parameter is three, and the corresponding parameter name, too, will be mistaken SeaJS is AMD's implementation.
In fact before define SeaJS and RequireJS two parameters do the same.
id are strings, follow Module Identifiers . deps refer dependent module array types. Except that the third argument factory, although the type of function are also, but the significance of factory parameters are different.
RequireJS the factory parameters in two cases
a, and deps (array) elements correspond. That deps There are a few, there are several arguments in the factory.
define(['a', 'b'], function(a, b){
// todo
});
b, is fixed to require, exports, module (modules / wrappings format).
define(function(require, exports, module){
// todo
});
In this way the late RequireJS to Modules / Wrappings compromise that is compatible with it. The SeaJS define the support of only the second wording RequireJS: Modules / Wrappings.
Note : SeaJS follow the Modules / Wrappings and Modules / 1.1.1 . Both specifications define keywords are not mentioned, Modules / Wrapping module defined in claim module.declare not define. But rather only AMD specifications define the definition. SeaJS not realize that while AMD, but it makes use of a very misunderstood identifier define.
Having said that, not yet begun to write a module. Let's start from the simplest
1, a simple module
define({
addEvent: function(el, type, fn){},
removeEvent: function(el, type, fn){},
fireEvent: function(el, type){}
});
Such an event would write modules, and write a single case is no different. More often pure data module defined in this manner. It is similar
var E = {
addEvent: function(el, type, fn){},
removeEvent: function(el, type, fn){},
fireEvent: function(el, type){}
};
2, the simple packing module
define(function() {
// 一些内部辅助函数
// ...
function addEvent() {
// ..
}
function removeEvent() {
// ..
}
function fireEvent() {
// ..
}
return {
addEvent: addEvent,
removeEvent: removeEvent,
fireEvent: fireEvent
};
});
You know, in this anonymous function you can do a lot of things. Finally, just open the necessary interfaces. It is similar
var E = function() {
// 一些内部辅助函数
// ...
function addEvent() {
// ..
}
function removeEvent() {
// ..
}
function fireEvent() {
// ..
}
return {
addEvent: addEvent,
removeEvent: removeEvent,
fireEvent: fireEvent
};
}();
3, NodeJS style packaging module
Both spelling NodeJS see a trace style ( Modules / 1.1.1 ), and rewrites the "mode 2" equivalent.
define(function(require, exports) {
// 一些内部辅助函数
// ...
function addEvent() {
// ..
}
function removeEvent() {
// ..
}
function fireEvent() {
// ..
}
// 使用exports导出模块接口，而非返回一个对象
exports.addEvent = addEvent;
exports.addEvent = removeEvent;
exports.addEvent = fireEvent;
});
You can see the "Mode 2" The difference is:
1: Anonymous function takes two parameters require, exports.
2: Export interface is not an object but a return to use exports.
While exports are not exactly NodeJS of style? Observant students may find this example require parameter is not used, this is the next point.
4, there are module dependent
SeaJS the "dependent" will need to obtain the require function, although SeaJS define the second parameter is also deps "dependent" means, but it is to provide packaging tools ( the SPM ) used. In addition, SeaJS's require is passed as a parameter, RequireJS require is a global variable in the anonymous function.
Defined above is not dependent on a module, the module is dependent.
define(function(require, exports) {
var cache = require('cache');
// ...
exports.bind = bind;
exports.unbind = unbind;
exports.trigger = trigger;
});
The event module depends on cache modules, functions, and there are two parameters require exports. Despite anonymous function and define the outer layer, which is the standard format NodeJS: the require function takes dependent module exports derived using the conventional module interface.
In fact dependent module having SeaJS must press the "mode 4" to write, i.e., must be packed module, and the first parameter function must be anonymous identifier "the require." That could require the original syntax keywords to use, although it is not global.
Here we look at some of the interesting phenomena require anonymous function parameters and exports of
a, if writing is not require, what the outcome will change req.
define(function(req, exports) {
var cache = req('cache');
// ...
exports.bind = bind;
exports.unbind = unbind;
exports.trigger = trigger;
});
Firebug network requests as follows
See dependent "cache" is not loaded, of course, JS certainly incorrect report.
b, only the anonymous function parameters into shape req, internal functions still use require.
define(function(req, exports) {
var cache = require('cache');
// ...
exports.bind = bind;
exports.unbind = unbind;
exports.trigger = trigger;
});
See network requests
The "cache" module actually request down.
A close look at the above code require no anonymous function declarations, and the parameter is req rather than require. that
var cache = require('cache');
The require come from?
See SeaJS source understood, it will define the function of the anonymous function toString taken using regular matching parsed wherein the "cache" (private parseDependencies function).
We also see that although the cache request down, but still error, because the implementation phase require is undefined. So the first parameter write module dependent functions must require anonymous and can not be changed.
Because regular use factory.toString and resolves dependencies, and therefore require the parameter can not be an expression, such as
// require的参数不能是表达式运算
require("ui-" + "dialog");
You can not require the use of aliases , such as
// 不能将require赋值给另外一个变量
var req = require;
req("ui-dialog");
It was also stated Opera Mobile does not support the function of toString, so SeaJS can not be used (not measured) in this version.
c, modify exports to expo
define(function(require, expo) {
var cache = require('cache');
// ...
expo.bind = bind;
expo.unbind = unbind;
expo.trigger = trigger;
});
Running is no problem. The second argument "exports" can be customized. Obviously SeaJS not in favor of change "exports" to the other, so clearly breached the NodeJS style ( Modules / 1.1.1 ) module specification --- what they use "exports" Export module interface. But this can not be enforced in SeaJS, the only man-made conventions.
5, the mixing module wording
Writing module has been described above in various situations. In keeping with the style NodeJS: Use require access "dependent" use exports Export "Interface." SeaJS dependent on acquiring this piece have been restricted, that is, you must use require. But it does not have to use the Export exports, ie exports may be replaced by others. You can even directly use the "return value."
define(function(require) {
var cache = require('cache');
// ...
// 使用返回值导出接口
return {
bind: function() {},
unbind: function() {},
fire: function() {}
};
});
We know that in NodeJS modules can only be an object. That is always a method to hang exports. SeaJS If you use exports export interface, so, too, the module can only be JS object. If you use the "return value" export interface, then the module can be any type of JS. As it will return a function of the type of module.
define(function(require) {
var cache = require('cache');
function ad() {
//...
}
// 函数类型的模块
return ad;
});
Three, SeaJS of loading
While it offers a variety of ways (synchronous asynchronous) loading, the easiest way to write the script tag directly on the page. After the introduction of SeaJS, most of the time the entry is seajs.use method.
seajs.use has two parameters, the first parameter may be a string (module name) or array (multiple modules). The second parameter is a callback function. After the callback module is loaded. The first parameter and a callback function parameters one by one.
seajs.use('dom', function(dom) {
// todo with dom
});
As will use the callback function module dom. Of course, it also provides a shortcut to data-main (with RequireJS).
The following demo write a complete event module event, it depends on the cache module.
