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>