【JavaScript 基础】-- 前端模块化方法（CommonJS和ES6模块方法）

一、CommonJS

Node.js是commonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。实际使用时，用module.exports定义当前模块对外输出的接口（不推荐直接用exports），用require加载模块。

/** 定义模块 math.js **/
var basicNum = 0;
function add(a, b) {
  return a + b;
}
module.exports = { //在这里写上需要向外暴露的函数、变量
  add,
  basicNum
}

/** 引用模块 math.js **/

// 引用自定义的模块时，参数包含路径，可省略.js
var math = require('./math');
math.add(2, 5);

// 引用核心模块时，不需要带路径
var http = require('http');
http.createService(...).listen(3000);

二、ES6 Module

ES6 Module 其模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。其实ES6还提供了export default命令，为模块指定默认输出，对应的import语句不需要使用大括号。

/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };

/** 引用模块 **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

/** export default **/
//定义输出
export default { basicNum, add };
//引入：export default 导出的变量在引用是能设置别名
import math from './math';
function test(ele) {
    ele.textContent = math.add(99 + math.basicNum);
}

三、CommonJS与ES6 Module的不同点

1. CommonJS 模块输出的是一个值的拷贝，可更改。ES6 模块输出的是值的引用，不能更改。

2. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

注意：

CommonJS 模块就是对象，即在输入时是先加载整个模块，生成一个对象，然后再从这个对象上面读取方法，这种加载称为“运行时加载”

而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成