ES6模块化

ES6模块化

在之前的 javascript 中一直是没有模块系统的，前辈们为了解决这些问题，提出了各种规范, 最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。而 ES6 中提供了简单的模块系统，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

基本使用

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个 变量，就必须使用export关键字输出该变量。下面是一个JS文件，里面使用export命令输出变量。

es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能

// a.js
export const name = 'pp'
export const age = 18
export const desc = '很帅'

使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）

//main.js
import {name, age, desc} from './a.js'
console.log('从模块内部导出的内容:', name, age, desc)

export详解

上面介绍了模块化最基础的用法，export 不止可以导出函数，还可以导出对象，数组，字符串等等

//a.js
export const name = 'pp'
export const arr = [1, 2, 3]
export const obj = {
  name: 'zs',
  age: 18
}

export的写法，除了像上面这样，还有另外一种。

//a.js
const name = 'pp'
const arr = [1, 2, 3]
const obj = {
  name: 'zs',
  age: 18
}

//	优点：上面代码在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。 
export {name, arr, obj}

export输出的变量就是本来的名字，但是可以使用as关键字重命名。

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

export default 指定默认输出, import 无需知道变量名就可以直接使用

//a.js
export default function fn () {
  console.log('哈哈')
}

//main.js
//在导入时，可以随意的使用变量名来接收
import a from './a'
a()

注意：export default是非常用的语法，用的很多, 以一些常用的模块为例

import $ from 'jQuery'   // 加载jQuery 库
import moment from 'moment' // 加载 moment

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

// 正确
export var a = 1;

// 正确
var a = 1;
export default a;

// 错误
export default var a = 1;

一个模块只能有一个export default，因此想导入export default导出的变量时不需要{}，以下例子合法：

// 第一组
export default function crc32() { // 输出
  // ...
}

import crc32 from 'crc32'; // 输入

// 第二组
export function crc32() { // 输出
  // ...
};

import {crc32} from 'crc32'; // 输入

export default也可以用来输出类

// MyClass.js
export default class { ... }

// main.js
import MyClass from 'MyClass';
let o = new MyClass();

import详解

import 为加载模块的命令，基础使用方式和之前一样

• import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。
• 可以通过as关键字重命名变量
• import a from 模块中变量a只读，如果a是一个对象，改写a的属性是允许的。
• import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。
• 注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。

foo();

import { foo } from 'my_module';
// 不报错，import命令是编译阶段执行的，在代码运行之前。

//main.js
import {name, arr, user} from './a'

//如果是export default导出的内容
import a from './a'

兼容性说明

上面介绍了，es6 中模块的使用方式，但是现在es6的模块化，无论在浏览器端还是 node.js 上都没有得到很好的支持，所以需要，一些转码的工具（babel）。使我们可以用es6的方式来编码，最后输出es5的代码。