1 关于cmd
cmd规范用于浏览器端,在cmd中模块的加载是异步的,模块代码在使用时才会执行
Sea.js实现了cmd规范
官网: http://seajs.org/
github : https://github.com/seajs/seajs
使用define+module.exports或exports来暴露模块
使用require来引入模块
2 暴露模块
和amd不同的时,cmd规范的依赖引入define的数组形参上,而是可以在回调函数中任意地方引入
2.1 暴露没有依赖的模块
// 定义没有依赖的模块
// module1.js
define(function(require,exports,module){
console.log('module1 loading')
function showModule(){
console.log('module:module1')
}
exports.showModule = showModule
})
// module2.js
define(function (require, exports, module) {
console.log('module2 loading')
module.exports = {
showModule: () => {
console.log('module:module2')
}
}
})
2.2 暴露有依赖的模块 异步引入依赖
和amd不一样,依赖不再define形参上声明,但需要在回调函数中引入
// 定义有依赖的模块
define(function (require, exports, module) {
let showModulesArr = []
// 异步导入模块
let module1 = require.async('./module1', (m1) => {
showModulesArr.push(module1.showModule)
})
let module2 = require('./module2')
let data = "module3"
console.log(data + ' loading')
function showModule() {
console.log("module:module3")
}
showModulesArr.push(module2.showModule, showModule)
Array.prototype.forEach.call(showModulesArr,(v)=>console.log(v))
console.log(showModulesArr.length)// 2
exports.showModulesArr = showModulesArr
})
3 使用sea.js
定义入口文件main.js
define(function(require,exports,module){
let showModulesArr = require('./module/module3')
Array.prototype.forEach.call(showModulesArr,(fn)=>fn())
})
在html文件中引入sea.js,拿到全局seajs属性,使用seajs.use执行入口文件代码
<!-- 导入sea.js 全局注入seajs属性 -->
<script src="../../lib/sea.js"></script>
<script>
// 执行入口文件
seajs.use('./main.js')
</script>