模块化

CommonJS 模块就是对象，输入时必须查找对象属性。

// CommonJS模块
let { stat, exists, readFile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

// ES6模块
import { stat, exists, readFile } from 'fs';

优点： 这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。

export 命令

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

还可以输出函数

export function multiply(x, y) {
  return x * y;
};

export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

// 报错

export 1;

// 报错
var m = 1;

export m;

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

import 命令

export命令定义了模块的对外接口，JS 文件就可以通过import命令加载这个模块。

import命令输入的变量都是只读的，不允许修改，但是可以修改变量的属性

import {a} from './xxx.js'

a.foo = 'hello'; // 合法操作

import有类似于变量提升的功能

foo();

import { foo } from 'my_module';   //不会报错

export default 命令

默认输出一个函数

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

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

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

export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句

// 正确
export var a = 1;

// 正确    //export default a的含义是将变量a的值赋给变量default
var a = 1;
export default a;

// 错误
export default var a = 1;