02-JavaScript模块化03：CMD
Last updated
Last updated
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()
})js
| libs
| sea.js
| modules
| module1.js
| module2.js
| module3.js
| module4.js
| main.js //主模块
index.html//定义没有依赖的模块
define(function (require, exports, module) {
let name = '我是 module1 中的内容';
function foo1() {
return name;
}
//暴露模块
module.exports = { foo1 }; //暴露出去的是 foo1这个函数对象
});//定义没有依赖的模块
define(function (require, exports, module) {
let name = '我是 module2 中的内容';
function foo2() {
console.log(name);
}
//暴露模块
module.exports = foo2; //可以理解成：exports就是 foo2 这个函数
});//定义没有依赖的模块
define(function (require,exports,module) {
let data = '我是 module3 中的内容';
function foo3() {
console.log(data);
}
//暴露模块
exports.module3 = { foo3 }; //可以理解成：给 export 对象暴露了 module3 这个属性，这个属性里有foo3 这个函数。
});//定义有依赖的模块
define(function (require, exports, module) {
let name = '我是 module4 中的内容';
//同步的方式引入 module2
let myModule2 = require('./module2');
myModule2();
//异步的方式引入 module3
require.async('./module3', function (myModule3) {
myModule3.module3.foo3();
});
function foo4() {
console.log(name);
}
exports.foo4 = foo4;
})//主模块（主模块不需要导出）
define(function (require) {
//导入 module1
let module1 = require('./module1');
console.log(module1.foo1()); //执行foo1函数后，将返回值打印
//导入 module4
let module4 = require('./module4');
module4.foo4();
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 引入 sea.js库 -->
<script src="js/libs/sea.js"></script>
<script>
// 引入主模块
seajs.use('./js/modules/main.js');
</script>
</body>
</html>