javascript模塊化詳解2(AMD CMD ES6 UMD)

時間 2019-11-09

標籤 javascript 模塊化詳解 amd cmd es6 umd 欄目 JavaScript 简体版

原文原文鏈接

1、AMD規範

異步，用於瀏覽器端，依賴require.js，先載入依賴再使用，異步能夠同時進行css

一、基本語法

暴露模塊：html

// 定義沒有依賴的模塊
define(function(){
    return 模塊
})

// 定義有依賴的模塊
define(['module1','module2'],function(m1,m2){
    return 模塊
})

引入使用模塊：jquery

requirejs(['module1','module2'],function(m1,m2){
    使用m1/m2
})

代碼演示：webpack

// 無依賴模塊 dataService.js
define(function(){
    let name = 'dataService.js'
    function getName() {
        return name
    }
    return {
        getName
    }
})

// 有依賴的模塊 alerter.js
define(['dataService','jquery'],function(dataService,$){
    let msg = 'alerter.js'
    function showMsg() {
        $('body').css('color','red')
        console.log(msg, dataService.getName())
    }
    return {
        showMsg
    }
})

// 主模塊 main.js
(function(){
    // 配置引用路徑
    requirejs.config({
        baseUrl:'./',
        paths:{
            dataService:'./dataService',
            alerter:'./alerter',
            jquery:'./lib/jquery', // 第三方庫
            angular:'./lib/angular'
        },
        // angular不支持amd暴露，所以須要配置，將angular對象暴露出來
        shim:{
            angular:{
                exports:'angular'
            }
        }
    })
    // 引用模塊 無需再暴露用requirejs
    requirejs(['alerter'],function(alerter){
        alerter.showMsg()
    })
})();

注意jquery插件最後，自定義了模塊，所以模塊名稱必須是jquery
es6

<!-- 主頁面 index.html -->
<body>
    <script data-main="./app.js" src="require.js"></script>
</body>

2、CMD規範

用於瀏覽器端，也是異步，只不過是不會提早載入依賴，而是用到時纔去載入，sea.jsweb

一、基本語法

暴露模塊：segmentfault

// 定義沒有依賴的模塊
define(function(require,exports,module){
    exports.xxx=value;
    module.exports = value;
})

// 定義有依賴的模塊
define(function(require,exports,module){
    // 同步引入依賴
    var module2 = require('./module2')
    // 異步引入依賴
    require.async('./module3',function(m3){
        ...
    })
    exports.xxx=value;
})

引入使用模塊：不須要暴露，所以只有require參數瀏覽器

define(function(require){
    var module1 = require('./module1');
    ...
})

代碼演示：babel

// 無依賴模塊 dataService.js
define(function(require,exports,module){
    let name = 'dataService.js'
    function getName() {
        return name
    }
    module.exports = {
        getName
    }
})

// 有依賴的模塊 alerter.js
define(function(require,exports,module){
    let msg = 'alerter.js'
    // 同步
    var dataService1 = require('./dataService');
    console.log(dataService1.getName());
    // 異步
    require.async('./dataService',function(m){
        console.log(m.getName());
    })
    function showMsg() {
        console.log(msg)
    }
    module.exports = showMsg
})

// 主模塊 main.js
(function(){
    // 引用模塊 無需再暴露用requirejs
    define(function(require){
        var alerter=require('./alerter);
        alerter();
    })
})();

// 打印結果
dataService.js
alerter.js
dataService.js // 異步

<!-- 主頁面 index.html -->
<body>
    <script src="sea.js"></script>
    <script>
        seajs.use('./main.js)
    </script>
</body>

3、ES6 module 規範

一、基本語法

引用和暴露：app

import {} from ''
export default ...
export ...

es6須要轉化成es5須要babel, 可是babel轉化完之後，暴露和引用被轉化爲commonjs中的require, 所以還須要再用browserify繼續轉換

二、一些疑問

爲何es6 import能夠引入commonjs模塊的module.exports

es6 的導出模塊寫法有:

export default 123;
export const a = 123;

const b = 3;
const c = 4;

export { b, c };

babel 會將這些通通轉換成 commonjs 的 exports。

exports.default = 123;
exports.a = 123;
exports.b = 3;
exports.c = 4;
exports.__esModule = true;

也就是說， es6和commonjs能夠經過打包工具相互轉換，例如webpack,更多詳細請參閱如下：

import、require、export、module.exports 混合使用詳解

4、UMD

UMD就是結合了AMD和commonjs, 加了一些判斷

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。