seajs是我刚入门前端就接触到的一个javaScript模块加载框架。使用seajs后javaScript代码的可读性和清晰度有了很大的提升,插件的使用和组装变的很方便。更加方便代码的升级和维护。推荐使用插件比较多的项目使用。或者使用requirejs也比较流行。
ps:如果想知道RequireJS、SeaJS哪个好用的可以自行对比,或者查看
seajs 的简单上手
首先先去官网下载最新版本。
下载后,假定把它放在js子目录下面,就可以加载了。
<script type="text/javascript" src="js/sea.js"></script>
加载seajs后我们还需要加载自己的js配置文件
<script type="text/javascript" src="js/sea-config.js"></script>
seajs 的简单配置
//.sea-config.js
seajs.config({
base: "../plug-js/",
alias: {
"jquery": "jquery/1.10.1/jquery.js"
}
})
简单使用
// 所有模块都通过define来定义
define(function(require,exports,module){
// 通过require来引入jquery
var $ = require('jquery');
console.log($);
})
seajs参数
define
使用全局函数define来定义函数
define(id?,dependencies?,factory);
id: 当前模块的唯一标识。该参数可选。如果没有指定,默认为模块所在文件的访问路径。如果指定的话,必须是顶级或绝对标识。
dependencies: 当前模块所依赖的模块,是一个由模块标识组成的数组。
factory: 模块的工作函数。模块初始化时,会调用且仅调用一次该工厂函数。
define(function(require,exports,module){
//The module code goes here
})
**注意:不推荐不要设定id和dependencies参数。
exports
exports 用来向外提供模块的API
define(function(require,exports){
// snip
exports.foo = 'bar';
exports.doSomething = function(){};
})
除了给exports对象增加成员,还可以使用return直接向外提供API
define(function(require,exports){
// snip...
return {
foo : 'bar',
doSomething : function(){}
}
})
可简化为:
define({
foo : 'bar',
doSomething : function(){}
})
require
require函数用来访问其他模块提供的API
define(function(require){
var a = require('./a');
a.doSomething();
})
require.async: 异步加载模块,并在加载完成后执行回调函数
require.resolv: 使用require()的内部机制来解析并返回模块路径。该函数不会加载模块,只返回解析后的路径。
require.load: 该方法可用异步加载脚本,并在加载完成后,执行指定的回调函数。
require.constructor: 给所有require参数对象添加一些公用属性或方法。
module
modeule 参数存储模块的元信息
module.id: 当前模块的唯一标识。
module.dependencies: 表示当前模块的依赖列表
module.exports: exports是某个类的实例
define(function(require,exports,module){
console.log(module.exports === exports); // true
module.exports = new SomeClass();
console.log(module.exports === exports); // false
})
module.constructor: 给module参数对象添加一些公用属性或方法。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。