1. 程式人生 > 其它 >js模組化 cmd規範

js模組化 cmd規範

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>