JS模块化规范之CMD

2023-12-21 12:44:29

模块化规范

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

  1. 在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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。