JS模块化规范之CMD
2023-12-21 12:44:29
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实现
- 下载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的区别】
友友们,有问题的话欢迎留言讨论哟!
文章来源:https://blog.csdn.net/weixin_45364386/article/details/135107326
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!