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, 加了一些判断