Philip

Philip's blog

0%

javascript-modules

Posted on Edited on In
Symbols count in article: 668 Reading time ≈ 2 mins.

JavaScript Modules

Why use modules?

早期的JavaScript只是做一些简单的交互，所以不需要模块化。但是随着JavaScript的发展，现在的JavaScript已经可以做很多事情了，比如构建大型的应用程序，而Node.js的出现使得JavaScript甚至可以胜任某些Server端的工作，这时候模块化就显得非常重要了。

模块化的好处有很多，比如：

  • 代码复用
  • 代码隔离
  • 代码维护
  • 依赖管理

JavaScript模块化主要经历了以下几个阶段：

  • IIFE
  • CommonJS
  • AMD
  • UMD
  • ES6 Modules

IIFE

IIFE（Immediately Invoked Function Expression）是一种立即执行的函数表达式，它可以用来模拟模块化。IIFE的特点是：

  • 使用闭包来隔离作用域
  • 通过返回一个对象来暴露接口
1
2
3
4
5
6
const module = (function() {
  ...
  return {
    // expose some interface
  };
})();

下面的代码使用IIFE封装了一个Person类，其中getName方法是public的，其他方法是private的。因为IIFE是定义后就立即执行的，所以这里我们使用一个person变量来接收IIFE的返回值，这样就可以调用getName方法了。

想要向外暴露任何接口，只需要在返回的对象中添加即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const person = (function person(firstName, lastName) {
  const _firstName = firstName;
  const _lastName = lastName;

  function getFirstName() {
    return _firstName;
  }

  function getLastName() {
    return _lastName;
  }

  function getName() {
    return `${getFirstName()} ${getLastName()}`;
  }

  return {
    getName: getName,
  };
})('Philip', 'Zhang');

console.log(person.getName()); // 'Philip Zhang'

CommonJS

CommonJS是Node.js的模块化规范，它的特点是：

  • 使用require来引入模块
  • 使用module.exports来暴露接口
1
2
// index.js
const module = require('./module');
1
2
3
4
// module.js
module.exports = {
  // expose some interface
};

AMD

AMD（Asynchronous Module Definition）是另一种模块化规范，它的特点是：

  • 使用define来定义模块
  • 使用require来引入模块
1
2
3
4
5
6
define(['module'], function(module) {
  ...
  return {
    // expose some interface
  };
});

UMD

UMD（Universal Module Definition）是一种通用的模块化规范，它的特点是：

  • 支持CommonJS和AMD
  • 通过判断typeof module来判断当前环境
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['module'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = factory(require('module'));
  } else {
    // Browser
    root.module = factory(root.module);
  }
}(this, function (module) {
  ...
  return {
    // expose some interface
  };
}));

ES6 Modules

ES6 Modules是JavaScript的模块化规范，它的特点是：

  • 使用import来引入模块
  • 使用export来暴露接口
1
2
// index.js
import module from './module';
1
2
3
4
// module.js
export default {
  // expose some interface
};

Node.js中的ES6 Modules

Node.js从v13.2.0开始支持ES6 Modules，但是需要使用.mjs后缀名。

1
2
// index.mjs
import module from './module.mjs';
1
2
3
4
// module.mjs
export default {
  // expose some interface
};

总结

JavaScript模块化的发展经历了很多阶段，从IIFE到CommonJS、AMD、UMD，最后到ES6 Modules。ES6 Modules是JavaScript的官方模块化规范，它的特点是简洁、易用，所以在现代的JavaScript开发中，推荐使用ES6 Modules。

References: