Ourai.WS共享

在 JavaScript 中定义模块

随着应用复杂度的增长，代码需要经由拆分后的「模块」进行良好地组织，才有可能更好地维护——模块化编程。

IIFE

「IIFE」是「Immediately Invoked Function Expression」的缩写，即「立即执行函数」，该名称由 Ben Alman 于 2010 年在他博客中提出。

特点

因其可创建闭包，在尚未出现任何模块定义标准的时代，人们使用这种方式保证模块的封装性。

示例

// 定义一个 IIFE 模块
var myModule = (function() {
  var name = 'MyModule';
  var ver = '0.0.1';

  return {
    getName: function() {
      return name;
    },
    getVersion(): function() {
      return ver;
    },
  };
})();

// 执行 IIFE 模块暴露的方法
myModule.getName(); // 'MyModule'
myModule.getVersion(); // '0.0.1'

CJS

「CJS」即「CommonJS」的简写，是由原 Mozilla 工程师 Kevin Dangoor 于 2009 年 1 月发起的项目，当时名为「ServerJS」，直至同年 8 月才改为现名称。

一般来说，CommonJS 只能用在浏览器之外的 JS 环境中，如 Node.js；但利用 Browserify 这类转译器则可在浏览器中使用。

特点

在一个文件中通过将 JS 对象赋值给 module.exports 的形式暴露变量与函数，也可以是除对象外的其他值；在另一个文件中用 require('path/to/module') 引用模块。

该方式是动态计算的，也就是说，是在执行 require() 时才加载文件；并且此过程是同步的，后续代码要在 require() 计算后才执行。

示例

// 定义一个 CommonJS 模块
var name = 'MyModule';
var ver = '0.0.1';

module.exports = {
  getName: function() {
    return name;
  },
  getVersion(): function() {
    return ver;
  },
};
var { getName, getVersion } = require('path/to/my-module');

// 执行 CommonJS 模块暴露的方法
getName(); // 'MyModule'
getVersion(); // '0.0.1'

AMD

「AMD」是「Asynchronous Module Definition」的缩写，

CMD

UMD

ESM

即 ES Modules。

// 定义一个 ES Modules 模块
const name = 'MyModule';
const ver = '0.0.1';

export function getName() {
  return name;
}

export function getVersion() {
  return ver;
}
import { getName, getVersion } from 'path/to/my-module';

// 执行 ES Modules 模块暴露的方法
getName(); // 'MyModule'
getVersion(); // '0.0.1'

更多