关于模块化规范

Posted on

  • AMD (Asynchronous Module Definition)：发展自CommonJS规范，RequireJS是 AMD 规范的典型实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    define(['jquery', 'underscore'], function ($, _) {
      function a () {}; // 私有方法，没有被返回
      function b () {};
      function c () {};

      // 暴露公共方法
      return {
        b: b,
        c: c
      };
    });

  • CMD (Common Module Definition)：发展自CommonJS规范，Sea.js是 CMD 规范的典型实现，唯一不被webpack所支持的模块化规范，其余都支持

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    define(function (require, exports, module) {
      var a = require('./a');
      var b = require('./b'); // 依赖可以就近书写

      // 通过 exports 对外提供接口
      exports.doSomething = function () {};

      // 或者通过 module.exports 提供整个接口
      module.exports = {};
    });

  • CommonJS：其前身是ServerJS，是Node.js中的模块化规范

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var $ = require('jquery');
    var _ = require('underscore');

    function a () {}; // 私有
    function b () {};
    function c () {};

    module.exports = {
      b: b,
      c: c
    };

  • UMD (Universal Module Definition)： 同时兼容了 AMD 和CommonJS，而且还支持老式的全局变量规范

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    (function (root, factory) {
      if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
      } else if (typeof exports === 'object') {
        // Node, CommonJS之类的
        module.exports = factory(require('jquery'));
      } else {
        // 浏览器全局变量(root 即 window)
        root.returnExports = factory(root.jQuery);
      }
    }(this, function ($) {
      // 方法
      function myFunc () {};

      // 暴露公共方法
      return myFunc;
    }));

  • ES Module： ECMAScript 6的模块化标准语法

    1
    2
    3
    4
    5
    import {bar} from './b';
    console.log('a.mjs');
    console.log(bar());
    const foo = () => 'foo';
    export {foo};