Common Module Definition
由 阿里 玉伯 (王保平) 开发的 前端模块化开发模式
也要依赖一个外部文件 sea.js
也是为了解决 前端模块化问题 参考的就是 后端的 nodejs CommonJS 模式
执行步骤:
1. 加载 外部 sea.js 文件
2. 定义 独立模块
define(function(参数1.参数2.参数3){})
参数1: require 也就是你要依赖的内容
参数2: exports 也就是你要导出的内容
参数3: module 是 exports 的一个别名
也是定义了一个 module 对象 module.exports 来定义导出内容
导出的语法和 Commonjs 完全相同
3. 定义 依赖模块
define( function( require . exports . module ){
使用 var modA = require('导入模块地址')
} )
4. 定义 整合模块
使用 seajs.use() 将 所有模块整合到一起
使用 seajs.use( ['依赖文件1路径' ，'依赖文件2路径' ，'依赖文件3路径' ] ， function(导入模块1.导入模块2.导入模块3){
程序执行时 调用 模块中的 导出的程序
} )解决问题:
1. 全局变量污染问题.解决了前置依赖问题
在 程序需要时 才会通过 参数 导入使用 外部模块
问题:
1. 后置依赖
执行模块时 先不加载 所需要的模块
在程序执行需要时.才会去加载 模块
一开始执行程序 会很快 但是 程序执行不够流畅
CMD 总结:
1.独立模块
define(function(require,exports,module){
独立模块,没有导入内容
定义好程序之后,一般使用
module.exports = {} 来导出内容
})2.依赖模块
define(function(require,exports,module){
先定义自己要执行的程序内容
之前程序的执行,不受导入模块的影响
在需要时,通过 变量存储导入内容
const 变量 = require('导入模块路径');
定义好程序之后,一般使用
module.exports = {} 来导出内容
})3.整合模块
seajs.use() 来导入加载模块
seajs.use(['文件1路径' , '文件2路径'...] , function(形参1,形参2...){
})实例
htmla.jsb.jsc.js
<script src="./sea.js"></script>
<script src="./c.js"></script>
<script>
/*
输出内容
b.js:4 我是b.js中的程序输出
b.js:5 b.js中的程序内容
a.js:7 0
a.js:7 1
a.js:7 2
a.js:7 3
a.js:13 我是模块A中的程序
b.js:13 Object
af1: ƒ af1()
af2: ƒ af2()
bool: true
num: 100
__proto__: Object
c.js:7 Object
bool: false
num: 200
__proto__: Object
*/
</script>// 我是一个独立的模块A
define(function(require , exports , module){
// 这里就是一个独立的模块A
for(var i = 0 ; i <= 3 ; i++){
console.log(i);
}
let num = 100;
let bool = true;
console.log('我是模块A中的程序');
function af1(){console.log('我是a.js模块中,函数af1中的程序')};
function af2(){console.log('我是a.js模块中,函数af2中的程序')};
// 通过 module.exports 来导出内容
module.exports = {
num,
bool,
af1,
af2,
}
})// 我是 一个 依赖其他模块的 依赖模块
define(function(require , exports , module){
// 之前先执行 B中的自己的程序
console.group('我是b.js中的程序输出');
console.log('b.js中的程序内容');
// 加载了一个外部的模块,定义变量,存储 module.exports 导出的内容
// 需要加载a了,才会执行加载a.js的程序内容
// 加载之前的B中的程序,会先执行,不受a的影响
const mA = require('./a.js');
console.log(mA);
console.groupEnd();
module.exports = {
num:200,
bool:false,
}
})// 我是一个整合的文件
// 通过 seajs.use() 来 整合 模块
// 当前如果只要加载B
// B会在需要的时候,执行加载A
seajs.use(['./b.js'] , function(mB){
console.log(mB);
})
Comments | NOTHING