JS模块化方案(2)之CMD 模块(SeaJS)方案
一、 CMD
1、基本介绍
SeaJS 是一个适用于 Web 浏览器端的模块加载器。使用 SeaJS，可以更好地组织 JavaScript 代码。
2、实现库：seajs 1.3.1
Sea.js 手册与文档
3、CMD 模块定义规范:
二、基础语法：
1、模块定义
define
使用全局函数 define 来定义模块：
define(function(require, exports, module) {
// The module code goes here
});require 函数用来访问其他模块提供的 API.
exports 用来向外提供模块的 API.
module 参数存储模块的元信息。
module.exports：
exports 对象由模块系统创建，这不能满足开发者的所有需求， 有时候会希望 exports 是某个类的实例。 这时可用 module.exports 来实现：
define(function(require, exports, module) {
function common(){
return "common";
}
// 对外提供接口
//exports =common;
module.exports = common;
})2、如何依赖模块
//require函数的返回值：define中的module.exports
var common = require('./common/common.js');
3、页面中加载模块
3.1、引用SeaJa库
<script src="https://cdn.bootcss.com/seajs/1.3.1/sea.min.js" type="text/javascript" charset="utf-8">script>
3.2 使用模块
seajs.use(['./js/damu.js', './js/hsp.js'], function(damu, hsp) {
damu.B();
hsp.B();
});3.3加载模块
加载单个入口模块
加载多个入口模块
/* 加载单个入口模块
* 注意：同时加载多个模块时，顺序无法控制
* */
/* seajs.use('./js/damu.js',function(damu){
damu.A();
})
seajs.use('./js/hsp.js',function(hsp){
hsp.A();
})*/
/* 加载多个入口模块
注意：可以控制顺序
*/
seajs.use(['./js/damu.js', './js/hsp.js'], function(damu, hsp) {
damu.B();
hsp.B();
});三、案例：
index.html
<script src="https://cdn.bootcss.com/seajs/1.3.1/sea.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
/* 加载单个入口模块
* 注意：同时加载多个模块时，顺序无法控制
* */
/* seajs.use('./js/damu.js',function(damu){
damu.A();
})
seajs.use('./js/hsp.js',function(hsp){
hsp.A();
})*/
/* 加载多个入口模块
注意：可以控制顺序
*/
seajs.use(['./js/damu.js', './js/hsp.js'], function(damu, hsp) {
damu.B();
hsp.B();
});
script>common.js
define(function(require, exports, module) {
function common(){
return "common";
}
// 对外提供接口
//exports =common;
module.exports = common;
})damu.js
define(function(require, exports, module) {
function A(){
//require函数的返回值：define中的module.exports
var common = require('./common/common.js');
console.log("A from damu&"+ common());
}
function B(){
var common = require('./common/common.js');
console.log("B from damu&"+ common());
}
function C(){
var common = require('./common/common.js');
console.log("C from damu&"+ common());
}
exports.A =A;
exports.B =B;
exports.C =C
/*
* 天坑！！！
* exports = {
A:A,
B:B,
C:C
}*/
/*module.exports = {
A:A,
B:B,
C:C
}*/
})
hsp.js
define(function(require, exports, module) {
function A(){
//require函数的返回值：define中的module.exports
var common = require('./common/common.js');
console.log("A from hsp&"+ common());
}
function B(){
var common = require('./common/common.js');
console.log("B from hsp&"+ common());
}
function C(){
var common = require('./common/common.js');
console.log("C from hsp&"+ common());
}
module.exports = {
A:A,
B:B,
C:C
}
})
tg.js
define(function(require, exports, module) {
function A(){
//require函数的返回值：define中的module.exports
var common = require('./common/common.js');
console.log("A from tg&"+ common());
}
function B(){
var common = require('./common/common.js');
console.log("B from tg&"+ common());
}
function C(){
var common = require('./common/common.js');
console.log("C from tg&"+ common());
}
module.exports = {
A:A,
B:B,
C:C
}
})
四、使用细节和注意事项
1、路径问题：
模块内参照于当前模块；
业务代码参照于代码的调用位置。
如下：
'./js/damu.js' ：./ 参考代码运行位置
模块中 require('./common/common.js'); ：./ 参考当前模块
2、天坑：exports和module.exports的区别
- 模块对象永远是module.exports；
- require函数的返回值：define中的module.exports
- 默认情况下exports和module.exports指向同一个引用。
向外暴露函数
module.exports = function(){}
向外暴露对象
module.exports = {。。。}
exports.a=a
exports.b=b ./才表示当前路径