js 模块化CommonJS AMD UMD CMD ES6规范详解

JS 模块化规范详解

JavaScript 的模块化是为了解决多个 JavaScript 文件之间变量、函数命名冲突问题以及提高文件管理便捷性，目前主要有以下几种规范：

• CommonJS
• AMD
• UMD
• CMD
• ES6 Modules

接下来详细介绍每种规范的含义、特点及实现方式。

CommonJS

CommonJS 规范是 Node.js 平台中所采用的一种模块化规范，其对模块的定义及加载分别采用了 require 和 module.exports 两个关键字。

在 CommonJS 规范中，每个文件就是一个模块，有自己的作用域，使用 require 函数加载模块，可以使用 module.exports 暴露模块，其他模块通过 require 函数加载该模块进行使用。示例代码如下：

// moduleA.js
const moduleB = require('./moduleB')

function sayHello(name) {
  console.log(`Hello, ${name}!`)
}

module.exports = {
  sayHello,
  moduleB
}

// moduleB.js
function sayGoodbye(name) {
  console.log(`Goodbye, ${name}!`)
}

module.exports = {
  sayGoodbye
}

// main.js
const { sayHello, moduleB } = require('./moduleA')

sayHello('Alice')
moduleB.sayGoodbye('Bob')

AMD

AMD 即 Asynchronous Module Definition，也是一个模块化规范。引入时需要用到 require.js 这个工具库，主要用于浏览器中异步加载模块。

与 CommonJS 不同的是，AMD 规范中，定义模块时采用了 define 的方法，require 用来加载依赖的模块。

一般适用于浏览器端的异步加载模块场景，示例代码如下：

// module definition
define(['moduleB'], function(moduleB) {
  function sayHello(name) {
    console.log(`Hello, ${name}!`)
  }

  return {
    sayHello,
    moduleB
  }
})

// main.js
require(['moduleA'], function(moduleA) {
  moduleA.sayHello('Alice')
  moduleA.moduleB.sayGoodbye('Bob')
})

UMD

UMD 即 Universal Module Definition，是既支持 CommonJS 规范又支持 AMD 规范的一种通用模块化规范。

UMD 最常见的实现方式是将 CommonJS 和 AMD 规范的代码分别写一遍，并通过条件判断实现通用的模块定义。

示例代码如下：

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['moduleB'], factory)
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    const moduleB = require('./moduleB')
    module.exports = factory(moduleB)
  } else {
    // Browser global
    root.ModuleA = factory(root.moduleB)
  }
})(this, function(moduleB) {
  function sayHello(name) {
    console.log(`Hello, ${name}!`)
  }

  return {
    sayHello,
    moduleB
  }
})

CMD

CMD 即 Common Module Definition，是另一种通用模块定义规范，接口类似 AMD。

CMD 的主要特点是依赖就近，需要使用时再引入，并允许进行动态引入。示例代码如下：

// module definition
define(function(require, exports, module) {
  const moduleB = require('./moduleB')

  function sayHello(name) {
    console.log(`Hello, ${name}!`)
  }

  exports.sayHello = sayHello
  exports.moduleB = moduleB
})

// main.js
const moduleA = require('./moduleA')
moduleA.sayHello('Alice')
moduleA.moduleB.sayGoodbye('Bob')

ES6 Modules

ES6 Modules 是自 ES6 开始加入 JS 标准中的原生模块化规范。

ES6 Modules 在编译时进行静态分析，可以在代码编写时进行智能提示，且可以进行 Tree Shaking 等优化。

因为 ES6 Modules 是原生支持的，所以不再需要使用库或者在不同环境中使用不同的语句，可以说是未来的主旋律。

示例代码如下：

// moduleA.js
import { sayGoodbye } from './moduleB.js'
export function sayHello(name) {
  console.log(`Hello, ${name}!`)
}

// moduleB.js
export function sayGoodbye(name) {
  console.log(`Goodbye, ${name}!`)
}

// main.js
import { sayHello } from './moduleA.js'
import { sayGoodbye } from './moduleB.js'
sayHello('Alice')
sayGoodbye('Bob')

以上便是 JS 模块化规范的详细介绍及示例，希望对你的学习有所帮助。