* 为什么要模块化?
- 解决文件依赖
- 解决命名冲突
* JS中模块的定义
通常,我们可以这样定义一个模块。
利用闭包特性定义一个模块,对全局暴露一个变量,外部不能访问模块内部定义的变量和方法。
立即执行函数,闭包
var myModule = (function(){
var var1 = 1;
var var2 = 2;
function fn1(){
}
function fn2(){
}
return {
fn1: fn1,
fn2: fn2
};
})();
node.js中的模块化
node中模块的引入是同步的,遵循CommonJS规范。
sea.js
遵循CMD (通用模块定义) ,对于依赖的模块,就近依赖,延迟执行。
sea.js写法
define(function(require,exports,module){
var a = require('./a')
a.todo()
//***省略100行
var b = require('./b') //依赖就近书写
b.todo()
//.....
})
define定义模块
define函数用来定义模块
define(factory) factory为模块的构造方法
define(function(require,exports,module){
// 模块代码
});
define(id?,deps?,factiory)
id表示模块标识,数组deps是模块依赖,两个参数都可以省略,可以通过构建工具自动生成。
修改jquery为CMD模块
define.cmd Object 一个空对象,可用来判定当前页面是否有 CMD 模块加载器:
对于非seajs模块化的类库,我们可以手动定义它,通过define的cmd规范定义就可以正常使用了
if (typeof define === 'function' && define.cmd) {
define(function (require, exports, module) {
module.exports = jQuery;
})
暴露接口
exports
module.exports
return
一定不能为exports赋值对象,因为exports仅仅是module.exports的一个引用
define(function(require,exports){
// 第一种
exports.foo = 'bar';
exports.do = function(){}
//第二种
return {
foo : 'bar',
do : function(){}
};
//第三种
module.exports = {
foo : 'bar',
do : function(){};
}
});
启动
<script type="text/javascript" src="sea.js"></script>
<script>
seajs.use('main/main') //这个文件会第一个被sea.js加载
</script>
- 解决文件依赖
- 解决命名冲突
立即执行函数,闭包
var myModule = (function(){
var var1 = 1;
var var2 = 2;
function fn1(){
}
function fn2(){
}
return {
fn1: fn1,
fn2: fn2
};
})();
define(function(require,exports,module){
var a = require('./a')
a.todo()
//***省略100行
var b = require('./b') //依赖就近书写
b.todo()
//.....
})
define(function(require,exports,module){
// 模块代码
});
define.cmd Object 一个空对象,可用来判定当前页面是否有 CMD 模块加载器:
if (typeof define === 'function' && define.cmd) {
define(function (require, exports, module) {
module.exports = jQuery;
})
一定不能为exports赋值对象,因为exports仅仅是module.exports的一个引用
define(function(require,exports){
// 第一种
exports.foo = 'bar';
exports.do = function(){}
//第二种
return {
foo : 'bar',
do : function(){}
};
//第三种
module.exports = {
foo : 'bar',
do : function(){};
}
});
启动
<script type="text/javascript" src="sea.js"></script>
<script>
seajs.use('main/main') //这个文件会第一个被sea.js加载
</script>