JS模块化规范之CMD
- 模块化规范
- CMD（Common Module Definition）
- 概念
- 基本语法
- CMD实现
模块化规范
CMD（Common Module Definition）
概念
CommonJS module definition
CMD规范专门用于浏览器端，模块的加载时异步的，模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点。在Sea.js中，所有JavaScript模块都遵循CMD模块定义规范。
基本语法
//定义没有依赖的模块
define(function(require,exports,module){
exports.xxx = value
module.exports = value
})
//定义没有依赖的模块
define(function(require,exports,module){
//引入依赖模块（同步）
var module2 = require('./module2')
//引入依赖模块（异步）
require.async('./module3',function(m3){
})
//暴露模块
exports.xxx = value
})
//引入使用的模块
define(function (require){
var m1 = require('./module1')
var m4 = require('./module4')
m1.show()
m4.show()
})
CMD实现
- 下载sea.js，并引入
- 官网：http://seajs.org/
- github:https://github.com/sea.js/seajs
然后将sea.js导入项目：js/libs/sea.js
- 创建项目结构
|-js
|-libs
|-sea.js
|-modules
|-module1.js
|-module2.js
|-module3.js
|-module4.js
|-main.js
|-index.html
- 定义sea.js的模块代码
//module1.js文件
define(function(require,exports,module){
//内部变量数据
var data = 'xuehua';
//内部函数
function show(){
console.log('module1 show()' + data)
}
//向外暴露
exports.show = show
})
//module2.js文件
define(function(require,exports,module){
module.exports = {
msg: 'I am xuehua'
}
})
//module3.js文件
define(function (require,exports,module){
const API_KEY = 'ABC123';
exports.API_KEY = API_KEY;
})
//module4.js文件
define(function(require,exports,module){
//引入依赖模块（同步）
var module2 = require('./module2');
function show(){
console.log('module4 show()' + module2.msg)
}
exports.show = show
//引入依赖模块（异步）
require.async('./module3',function(m3){
console.log('异步引入依赖模块3'+ m3.API_KEY)
})
})
//main.js文件
define(function(require){
var m1 = require('./module1')
var m4 = require('./module4')
m1.show()
m4.show()
})
- 在index.html中引入
<script type="text/javascript" src="js/libs/sea.js"><script>
<script type="text/javascript">
seajs.use('./js/modules/main')
</script>
最后得到的结果如下：
module1 show(),xuehua
module4 show() I am xuehua
异步引入依赖模块3 ABC123
好啦~CMD就先到这里啦！给大家拓展一个小知识【AMD和CMD的区别】
友友们，有问题的话欢迎留言讨论哟！
