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="https://www.cnblogs.com/youyacoder/archive/2022/09/27/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
})
感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，點贊、關注、收藏，作者會持續與大家分享更多干貨
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/509704.html
標籤：其他