CMD规范说明
专门用于浏览器端, 模块的加载是异步的 ,模块使用时才会加载执行,github地址
CMD基本语法
定义暴露模块
//定义有依赖的模块
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规范的实现(浏览器端)
CMD规范需要用到sea.js,下载sea.js, 并引入,将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 = 'atguigu.com'
//内部函数
function show() {
console.log('module1 show() ' + data)
} //向外暴露
exports.show = show
})
定义sea.js的模块代码:module2.js
define(function (require, exports, module) {
module.exports = {
msg: 'I Will Back'
}
})
定义sea.js的模块代码:module3.js
define(function (require, exports, module) {
const API_KEY = 'abc123'
exports.API_KEY = API_KEY
})
定义sea.js的模块代码: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()
})
如何使用模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/libs/sea.js"></script>
<script type="text/javascript">
seajs.use('./js/modules/main')
</script>
</body>
</html>