js模块化 cmd规范

目录

• 1 关于cmd
• 2 暴露模块
  • 2.1 暴露没有依赖的模块
  • 2.2 暴露有依赖的模块 异步引入依赖
• 3 使用sea.js

 

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>