JavaScript 模块化学习笔记

常用的 JavaScript 模块化规范有 CommonJS、AMD、CMD 和 ES Modules。

闭包与模块化

闭包函数

JavaScript


1
2
3


(function() {
  var flag = true;
})();

使用闭包组织模块

使用模块化作为出口，将需要对外提供的变量和方法放入对象，再返回这个对象。

JavaScript


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


var ModuleA = (function() {
  // 1. 定义一个对象
  var obj = {};

  // 2. 在对象内部添加变量和方法
  obj.flag = true;
  obj.myFunc = function(info) {
    console.log(info);
  };

  // 3. 将对象返回
  return obj;
})();

CommonJS

导出模块

JavaScript


1
2
3
4
5
6
7
8
9


module.exports = {
  flag: true,
  test(a, b) {
    return a + b;
  },
  demo(a, b) {
    return a * b;
  }
};

导入模块

使用 require() 导入模块，并通过解构获取变量和方法：

JavaScript

1

let { test, demo, flag } = require('moduleA');

也可以先获取整个模块对象，再分别读取属性：

JavaScript


1
2
3
4


let _mA = require('moduleA');
let test = _mA.test;
let demo = _mA.demo;
let flag = _mA.flag;

ES Modules：export / import

直接导出函数或类

JavaScript


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


export function test(content) {
  console.log(content);
}

export class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  run() {
    console.log(this.name + '在奔跑');
  }
}

先定义，再统一导出

JavaScript


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


function test(content) {
  console.log(content);
}

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  run() {
    console.log(this.name + '在奔跑');
  }
}

export { test, Person };

默认导出：export default

某些情况下，一个模块包含的功能不需要指定导出名称，而是由导入者自行命名。这时可以使用 export default。

在 info.js 中默认导出一个函数：

JavaScript


1
2
3
4


// info.js
export default function () {
  console.log('default function');
}

在 main.js 中导入并调用。这里的 myFunc 是导入时自行指定的名称：

JavaScript


1
2
3


// main.js
import myFunc from './info.js';
myFunc();

注意：同一个模块只能有一个 export default。