JS模块化规范之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实现

1. 下载sea.js，并引入
   • 官网：http://seajs.org/
   • github:https://github.com/sea.js/seajs
     然后将sea.js导入项目：js/libs/sea.js
2. 创建项目结构

|-js
  |-libs
    |-sea.js
  |-modules
    |-module1.js
    |-module2.js
    |-module3.js
    |-module4.js
    |-main.js
|-index.html

3. 定义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()
})

4. 在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的区别】
友友们，有问题的话欢迎留言讨论哟！