之前有一篇文章介绍了requireJS进行模块化开发,今天来说高大上的国产SeaJS的吧,是的SeaJS遵循的是CMD规范。作者是淘宝前端工程师,名字叫玉伯。此解决方案的宗旨是使前端工程师从繁重的js文件及对象依赖处理中解救出来,从而可以专注代码的逻辑本身。
要使用SeaJs,只要下载sea.js文件,然后直接包含在html文件中就可以了,那么如何定义能被seajs加载的模块呢?请看下面的这段源码:
fn.define = function(id, deps, factory) {
//code of function…
}
define函数可以接受三个参数,但是你也可以只传一个参数,即factory。这也是官方推荐的做法。各参数的解释如下:
id:即模块id,如http://example/a,代表一个模块的绝对路径,a就是此模块文件名如a.js。
deps:表示需要此模块要用到的其他模块。
factory:表示工厂函数,这是模块的主体,也是最重要的部分。
下面来详细解释一下工厂函数:
define(function(require, exports, module) {
//code of the module...
});
这里只传了factory一个参数,factory其实是一个匿名函数,里面的几个参数表示如下:
require:此模块需要依赖的其他模块。
exports:模块对外提供接口。
module:模块元数据。
下面来介绍一下定义模块的几种方式:
.基于exports的模式:
define(function(require, exports, module) {
var a = require('a'); //引入a模块
var b = require('b'); //引入b模块
var data1 = 1; //私有数据
var func1 = function() { //私有方法
return a.run(data1);
}
exports.data2 = 2; //公共数据
exports.func2 = function() { //公共方法
return 'hello';
}
});
这是比较常用的方式,还可以直接返回一个对象:如下:
define(function(require) {
var a = require('a'); //引入a模块
var b = require('b'); //引入b模块
var data1 = 1; //私有数据
var func1 = function() { //私有方法
return a.run(data1);
}
return {
data2: 2,
func2: function() {
return 'hello';
}
};
});
如果模块中只有一个对象,可以简化这样:
define({
data: 1,
func: function() {
return 'hello';
}
});
最后一种方法适合纯json数据的模块开发。
写好了模块,那么怎么来使用它们呢?
模块的载入和引用:
require("http://example/js/a");
表示载入http://example/js/a.js这个文件。
也可以用相对地址:
require("./c");
表示载入http://example/js/c.js这个文件。
require("./module1-style.css");
表示载入css文件。
seajs.use主要用于载入入口模块,就像c里面的main函数一样样,如下:
//单一模式
seajs.use('./a');
//回调模式
seajs.use('./a', function(a) {
a.run();
});
//多模块模式
seajs.use(['./a', './b'], function(a, b) {
a.run();
b.run();
});
一般用于页面中载入入口文件。
也可以使用