Javascript 模块化概述

模块化的目的

当网站开发得越来越复杂，会经常遇到以下问题：

命名冲突

文件依赖

Sea.js

一个适合web前端的模块加载器，遵守 CMD （Common Module Definition）模块定义规范

解决上面两个问题

http://seajs.org

模块化的概念

Sea.js的使用方法

1. 引入Sea.js库

2. 定义模块

define(function(require,exports,module){//参数名写法不变
function tab(){
alert('hi');
}
//exports：对外的接口
exports.tab=tab;
});

3. 调用模块

//参数：模块的地址(相对seajs的地址)，回调函数
seajs.use('path.js',function(ex){//回调函数的参数就是模块中的exports

ex.tab();//很好的解决了命名冲突的问题

});

4. 依赖模块

define(function(require,exports,module){
//require：依赖的接口
var dep = require('path.js')；//如果地址指向模块，返回模块中的exports
dep.tab();
function tab(){
alert('hi');
}
//exports：对外的接口
exports.tab=tab;
});

进阶

1. 参数module

与 exports 类似，用来在模块内部对外提供接口。

define(function(require, exports, module) {

// 对外提供接口
module.exports = {
name: 'a',
doSomething: function() {};
};

});

2. 异步接口

require.async();

好处：无需等待,按需加载

require.async('./scale.js',function(ex){
ex.scale(a,b);
});

3. 调用多个模块

seajs.use(['main.js','main2.js'],function(ex,ex2){
//do something...
});

4. seajs.config

alias:模块别名

preload：预加载

debug：调试

5. 插件

文本插件

shim插件：js框架转模块化。

模块化的历史

ECMAScript 6 将正式支持模块语法。

因nodeJS发展起来，服务器端需要模块化。

commonJS规范，针对服务器端js开发，请求文件在本地，所以请求速度快，而浏览器端需要向服务器请求文件，会有所延迟，所以跟适合异步加载。

AMD(Asynchromous Module Definition) 异步模块加载规范和CMD （Common Module Definition）通用模块定义，适合前端js开发。

requireJS

和seaJS类似，模块化插件。

requireJS采用AMD((Asynchromous Module Definition)规范，seaJS采用CMD规范。AMD与CMD的区别

seaJS与requireJS的区别