1 CMD 規範介紹 CMD： Common Module Definition， 通用模塊定義。與 AMD 規範類似，也是用於瀏覽器端，非同步載入模塊，一個文件就是一個模塊，當模塊使用時才會載入執行。其語法與 AMD 規範很類似。 1.1 定義模塊 定義模塊使用 define 函數： define( ...
1 CMD 規範介紹
CMD： Common Module Definition， 通用模塊定義。與 AMD 規範類似，也是用於瀏覽器端，非同步載入模塊，一個文件就是一個模塊，當模塊使用時才會載入執行。其語法與 AMD 規範很類似。
1.1 定義模塊
定義模塊使用 define 函數：
define(factory)
define 函數接收的參數 factory 可以是一個對象、字元串或函數。如：
define({ 'str': 'Hello World' })
define('Hello world')
當 factory 為函數時，這個函數就是當前這個模塊的構造函數，該函數接收三個參數：
define(function(require, exports, module) {
})
這三個參數的意義如下：
- require：函數，可以通過該函數載入其他模塊
- exports：對象，用於向外部提供介面，即可以通過該對象導出對象、屬性或函數，將本模塊內部的變數、函數等暴露給其他模塊使用
- module：對象，存儲當前模塊相關的屬性和函數
1.2 載入模塊
CMD 規範中，所有的 JS 都是在模塊中，入口模塊 —— 主模塊也是一個模塊，使用模塊工廠函數的 require 函數載入其他模塊。
define(function(require, exports, module) {
const m = require('./m1')
console.log(m1)
})
非同步載入模塊：
define(function(require, exports, module) {
require.async('./m1', function (m3) {
console.log(m1)
})
})
2 Sea.js
Sea.js 是 CMD 規範的瀏覽器端實現。
2.1 使用準備
從 github 上下載 sea.js，創建如下目錄文件結構：
04_CMD/
|- lib/
|- sea.js
|- modules/
|- module1.js
|- module2.js
|- module3.js
|- index.js
|- index.html
modules 目錄存放三個模塊，index.js 為入口（主模塊）。
2.2 實現三個模塊
module1.js 導出 sum 函數：
define(function (require, exports, module) {
console.log('in module1.')
function sum(num1, num2) {
console.log('module1 sum function.', num1, num2)
return num1 + num2
}
exports.sum = sum
})
module2.js 定義並導出一個內部變數 str 和函數 calculate ，calculate 函數調用 module1 的 sum 函數。
define(function (require, exports, module) {
console.log('in module2')
const str = '優雅哥測試'
function calculate (n1, n2) {
const m1 = require('./module1')
return m1.sum(n1, n2)
}
exports.obj = {
str,
calculate
}
})
在 module2.js 的 calculate 函數中載入 module1，咱在後面會多次調用 calculate 函數，測試模塊是否會重覆載入。
module3.js 用於測試非同步載入，只定義並通過 return 導出一個 demo 函數：
define(function (require, exports, module) {
console.log('in module3')
function demo() {
console.log('demo function')
}
return {
demo
}
})
2.3 實現主模塊
在 index.js 中，非同步載入 module3，同步載入 module2，並多次調用 module2 中導出的 calculate 函數：
define(function (require) {
console.log('in index')
require.async('./modules/module3', function (m3) {
console.log('非同步載入 module3')
m3.demo()
})
const m2 = require('./modules/module2')
console.log(m2.obj.str)
console.log(m2.obj.calculate(10, 20))
console.log(m2.obj.calculate(100, 200))
console.log(m2.obj.calculate(1000, 3000))
})
2.4 實現入口頁面
在 index.html 中首先通過 script 標簽引入 sea.js，然後載入主模塊：
<script src="./lib/sea.js"></script>
<script>
seajs.use('./index.js')
</script>
2.5 測試運行
在瀏覽器中運行 index.html，在瀏覽器控制臺中輸出如下：
從控制台輸出可以看出：
- module3 由於是非同步載入，所以輸出位置與代碼位置不同；
- 導出模塊處理使用 exports.xxx，也可以使用 return；
- 雖然多次調用了 calculate 函數，calculate 函數中載入 module1，但 module1 不會被載入多次，載入後會被緩存起來。
3 總結
CMD 規範的語法：
// 定義模塊
define(function(require, exports, module) {
// 同步載入模塊
const m1 = require('../xxx')
// 非同步載入模塊
require.async('../xxx', function (m2) {
})
// 使用 exports 導出模塊
exports.xxx = xxx
//也可以使用 return 導出模塊
// return xxx
})
感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，點贊、關註、收藏，作者會持續與大家分享更多乾貨
