JS模块化(三):CMD

最新推荐文章于 2025-06-04 12:10:34 发布

五花毛

最新推荐文章于 2025-06-04 12:10:34 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JS模块化 CMD

本文链接：https://blog.youkuaiyun.com/Hanhanyoona/article/details/84875711

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了CMD（Common Module Definition）规范，它主要用于浏览器端的模块异步加载。CMD规定模块在使用时才加载执行，提供了定义和使用模块的基本语法，并以Sea.js为例解释其实现。通过示例展示了模块依赖的异步加载特性，如在module4.js中异步引入module3.js，导致module4先于module3执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CMD规范说明:
       Common Module Definition(通用模块定义)
       专用于浏览器端,模的加载是异步的
       模块使用时才会加载执行
   CMD基本语法:
       定义暴露模块:
           // 定义没有依赖的模块:
               define(function(require,exports,module){
                   exports.xxx = value
                   module.exports = value
               })
           // 定义有依赖的模块:
               define(function(require,exports,module){
                   // 引入依赖模块(同步)
                   var module1 = require('./module1')
                   // 引入依赖模块(异步)
                   require.async('./module2',function(module3){

                   })
                   // 暴露模块
                   exports.xxx = value
               })

       引入使用模块:
           define(function(require){
               var module3 = require('./module3')
               var module4 = require('./module4')
               module3.show()
               module4.show()
           })
   在浏览器端的实现:Sea.js

举个栗子:

目录结构如下:

module1.js:

// 定义没有依赖的模块


define(function(require,exports,module){
	let name = 'module1';
	function getName(){
		return name;
	}

	//暴露模块 
	module.exports = {getName}
})

module2.js:

define(function(require,exports,module){
	let msg = 'module2';
	function getMsg(){
		console.log(msg)
	}
	//暴露模块
	module.exports = getMsg;
})

module3.js

define(function(require,exports,module){
	let data = 'module3'
	function getData(){
		console.log(data)
	}

	// 暴露模块
	exports.module3 = {getData}
})

module4.js

define(function(require,exports,module){
	let val = 'module4'
	function getVal(){
		console.log(val)

	}

	// 引入module2 同步
	let module2 = require('./module2.js');
	module2()

	// 异步引入module3
	require.async('./module3.js',function(module3){
		module3.module3.getData()
	});


	// 暴露模块
	module.exports = {getVal}


})

main.js

// 只需引入module1.js 和 module4.js

define(function(require,exports,module){
	let module1 = require('./module1.js')
	console.log(module1.getName())

	let module4 = require('./module4.js')
	module4.getVal()

})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>SeaJS</title>
</head>
<body>
	<!-- 
	1.引入sea.js
	2.定义导出模块
		define()
		module.exports 
		exports
	3.依赖模块
		require()
	4.使用模块
		seajs.use('./js/modules/main.js')
	 -->
	
</body>
<script type="text/javascript" src="js/libs/sea.js"></script>
<script type="text/javascript">
	seajs.use('./js/modules/main.js')
</script>
</html>

结构如下: