一.什么是模块化开发
- 将软件产品看作为一系列功能模块的组合
- 通过特定的方式实现软件所需模块的划分、管理、加载
二.模块化开发好处
解决命名冲突问题
添加命名空间YUI 、EXTJS—可以从一定程度上解决命名冲突,但是增加了开发人员记忆冗长api的难度。解决文件依赖问题
团队变大后,维护大量的文件依赖关系非常困难,公共模块的维护、升级很不方便。
三.实现规范
- 服务器端规范
CommonJS—nodejs - 浏览器端规范
AMD—RequireJS 国外相对流行
CMD—SeaJS 国内相对流行
四.具体实现(SeaJs为例)
RequireJS 与SeaJs实现方式大同小异,这里就以SeaJs为例介绍了
1. 在页面中引入sea.js文件
<script src="node_modules/seajs/dist/sea.js"></script>
2.定义一个主模块如calculator.js, 在主模块文件中通过define的方式定义一个模块,并导出公共成员
// 定义一个模块,遵循Seajs的写法
define(function(require, exports, module) {
// 此处是模块的私有空间
// 定义模块的私有成员
// 载入01-convertor模块
var convertor = require('./01-convertor.js');
function add(a, b) {
return convertor.convertToNumber(a) + convertor.convertToNumber(b);
}
function subtract(a, b) {
return convertor.convertToNumber(a) - convertor.convertToNumber(b);
}
function multiply(a, b) {
return convertor.convertToNumber(a) * convertor.convertToNumber(b);
}
function divide(a, b) {
return convertor.convertToNumber(a) / convertor.convertToNumber(b);
}
// 暴露模块的公共成员
exports.add = add;
exports.subtract = subtract;
exports.multiply = multiply;
exports.divide = divide;
});
3. 在页面的行内脚本中通过seajs.use(‘path’,fn)的方式使用模块
seajs.use('./01-calculator.js', function(calculator) {
});
五.其他介绍
require
require 用来获取指定模块的接口。
define(function(require, exports, module) {
var convertor = require('./01-convertor.js');
}
require.async
用来在模块内部异步加载一个或多个模块。
导出成员的方式
- module.exports
- exports.xxx
- return
配置
seajs.config({
// 别名配置
alias: {
'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
'json': 'gallery/json/1.0.2/json',
'jquery': 'jquery/jquery/1.10.1/jquery'
},
// 路径配置
paths: {
'gallery': 'https://a.alipayobjects.com/gallery'
},
// 变量配置
vars: {
'locale': 'zh-cn'
},
// 映射配置
map: [
['http://example.com/js/app/', 'http://localhost/js/app/']
],
// 预加载项
preload: [
Function.prototype.bind ? '' : 'es5-safe',
this.JSON ? '' : 'json'
],
// 调试模式
debug: true,
// Sea.js 的基础路径
base: 'http://example.com/path/to/base/',
// 文件编码
charset: 'utf-8'
});
这里举一个别名的例子
seajs.config({
alias: {
// 变化点封装
calc: './modules/calc.js',
}
});
seajs.use('calc');
SeaJS和RequireJS对比
- 对于依赖的模块,AMD是提前执行,CMD是延后执行
- CMD推崇依赖就近,AMD推崇依赖前置
- AMD的API默认是一个当多个用,CMD的API严格区分,推崇职责单一