返回文章

理解 js 模块规范：CommonJS、AMD、CMD、UMD 和 ES6 module

CommonJS 服务端模块规范，ES5 的 Nodejs 采用了这个规范 一个单独的文件就是一个模块，加载使用 require 方法读取文件 CommonJS 是同步的，只有加载完成才能执行后面的操作 这种方法适用于文件已经在硬盘中了，加载速度快，如果是服务端文件，就要用其他方式了 ADM(Require.js) 支持浏览器环境 AMD 是 Require.js 推广的时候定义的规范 AMD 是…

CommonJS

  1. 服务端模块规范，ES5 的 Nodejs 采用了这个规范
  2. 一个单独的文件就是一个模块，加载使用 require 方法读取文件
  3. CommonJS 是同步的，只有加载完成才能执行后面的操作
  4. 这种方法适用于文件已经在硬盘中了，加载速度快，如果是服务端文件，就要用其他方式了
// user.js
var user = {};
user.login = function() {};
user.logout = function() {};
module.exports = user;
// login.js
var user = require('user.js');
user.login();
user.logout();

ADM(Require.js)

  1. 支持浏览器环境
  2. AMD 是 Require.js 推广的时候定义的规范
  3. AMD 是异步加载，支持对象，函数，构造器，字符串，json 等类型的加载
  4. AMD 是提前加载
  • 🌰
<!-- index.html -->
<script src="https://cdn.bootcss.com/require.js/2.3.6/require.js" data-main="main"></script>

// main.js
define(['main.1', 'main.2'], function(main1, main2) {
  console.log(main1);
  main1.say();
  main2.say();
  // 输出
  // main1
  // main2
});

// main.1.js
define(function(require, exports, module) {
  var obj = {};
  obj.say = function() {
    console.log('main1');
  };
  module.exports = obj;
});

// main.2.js
define(function(require, exports, module) {
  var obj = {};
  obj.say = function() {
    console.log('main2');
  };
  return obj;
});

CMD(Sea.js)

  1. 支持浏览器环境
  2. 与 AMD 的区别是，CMD 是就近依赖，而 AMD 是前置依赖
  • 🌰
<!-- index.html -->
<script src="https://cdn.bootcss.com/seajs/3.0.2/sea.js"></script>
<script>
  seajs.use('./enter', function(enter) {
    enter.say();
    // 输出
    // main
  });
</script>

// enter.js
define(function(require, exports, module) {
  var enter1 = require('./enter.1');
  var obj = {};
  enter1.say();
  var enter2 = require('./enter.2');
  enter2.say();
  obj.say = function() {
    console.log('main');
  };
  module.exports = obj;
});
// 输出
// main1
// main2

// enter.1.js
define(function(require, exports, module) {
  var obj = {};
  obj.say = function() {
    console.log('main1');
  };
  module.exports = obj;
});

// enter.2.js
define(function(require, exports, module) {
  var obj = {};
  obj.say = function() {
    console.log('main2');
  };
  return obj;
});

AMD 与 CMD 的区别

  1. Require.js(AMD)既想成为浏览器环境模块加载器，也想成为 node.js 模块加载器，Sea.js(CMD)专注于浏览器端
  2. Sea.js 支持 debug 调试，Sea.js 与 CommonJS 风格类似

UMD( AMD 与 CommonJS 结合)

  1. AMD 与 CommonJS 的结合，跨平台解决模块加载问题
  2. 选择 AMD 异步加载，选择 CommonJS 同步加载
  3. 首先判断是否是 nodejs 环境（exports 是否是一个对象），再判断是否支持 AMD（define 是否是一个方法），否则使用全局变量规范
(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery', 'underscore'], factory);
  } else if (typeof exports === 'object') {
    // Node, CommonJS之类的
    module.exports = factory(require('jquery'), require('underscore'));
  } else {
    // 浏览器全局变量(root 即 window)
    root.returnExports = factory(root.jQuery, root._);
  }
})(this, function($, _) {
  function a() {}

  function b() {}

  function c() {
    console.log('c');
  }

  return {
    b: b,
    c: c
  };
});
returnExports.c();

ES6 module

  1. 按需加载
  2. 支持浏览器环境和服务器环境
  3. 支持同步和异步
// 写法1
// 导出
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
// 导入
import { firstName, lastName, year } from './index.js';

// 写法2
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
// 导出
export { firstName, lastName, year };
// 导入
import { firstName, lastName, year } from './index.js';

// 写法3
var firstName = 'Michael';
// 导出
export { lastName as firstName };
// 导入
import { lastName as firstName } from './index.js';

// 写法4
var firstName = 'Michael';
// 导出
export default firstName;
// 导入
import firstName from './index.js';

参考

JS 模块规范：AMD、UMD、CMD、commonJS、ES6 module

关于 CommonJS AMD CMD UMD 规范的差异总结

暂无评论