js模組化 cmd規範
阿新 • • 發佈:2022-03-24
1 關於cmd
cmd規範用於瀏覽器端,在cmd中模組的載入是非同步的,模組程式碼在使用時才會執行
Sea.js實現了cmd規範
官網: http://seajs.org/
github : https://github.com/seajs/seajs
使用define+module.exports或exports來暴露模組
使用require來引入模組
2 暴露模組
和amd不同的時,cmd規範的依賴引入define的陣列形參上,而是可以在回撥函式中任意地方引入
2.1 暴露沒有依賴的模組
// 定義沒有依賴的模組 // module1.js define(function(require,exports,module){ console.log('module1 loading') function showModule(){ console.log('module:module1') } exports.showModule = showModule }) // module2.js define(function (require, exports, module) { console.log('module2 loading') module.exports = { showModule: () => { console.log('module:module2') } } })
2.2 暴露有依賴的模組 非同步引入依賴
和amd不一樣,依賴不再define形參上宣告,但需要在回撥函式中引入
// 定義有依賴的模組 define(function (require, exports, module) { let showModulesArr = [] // 非同步匯入模組 let module1 = require.async('./module1', (m1) => { showModulesArr.push(module1.showModule) }) let module2 = require('./module2') let data = "module3" console.log(data + ' loading') function showModule() { console.log("module:module3") } showModulesArr.push(module2.showModule, showModule) Array.prototype.forEach.call(showModulesArr,(v)=>console.log(v)) console.log(showModulesArr.length)// 2 exports.showModulesArr = showModulesArr })
3 使用sea.js
定義入口檔案main.js
define(function(require,exports,module){
let showModulesArr = require('./module/module3')
Array.prototype.forEach.call(showModulesArr,(fn)=>fn())
})
在html檔案中引入sea.js,拿到全域性seajs屬性,使用seajs.use執行入口檔案程式碼
<!-- 匯入sea.js 全域性注入seajs屬性 --> <script src="../../lib/sea.js"></script> <script> // 執行入口檔案 seajs.use('./main.js') </script>