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