ES6 的模块化

1、ES6 模块化的构成

　　模块化的产生主要是为了将大型JS程序拆分为相互依赖的小文件，并且相互拼接起来。ES6 模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。在ES6之前社区就已经有了CommonJS 和 AMD 模块两种，在这里暂且不讲，有兴趣的朋友可以自己去查阅相关资料

2、export

　　一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。那么我们需要从别的文件里面获取什么呢。有2个：变量和函数（或者类，类其实也是函数），即JS存储数据和操作数据的基础结构。export 为了能让其他文件读取文件变量，就需要用 export 将文件内变量或者函数输出。

　　（1）输出变量

// export.js 一个任一.js  文件
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

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

// export.js

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };

　　上面代码在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法（直接放置在var语句前）是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

　　（2）输出函数或者类

export function add(x, y) {
  return x + y
}

上面代码对外输出一个函数add。

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

function a () { ... }
function b () { ... }

export {
    a as addA1,
    a as addA2,
    b as addB1
}

上面代码使用as关键字，重命名了函数a和b的对外接口。重命名后，a 可以用不同的名字输出两次。

需要特别注意的是,export 命令规定的是对外的接口，其名字必须与模块内部变量一一对应。

　　（3）需要注意事项

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

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

　　（4）export default

　　从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。ES6 给我们提供了不需要知道就可以直接使用的方法。

　　我们在这里默认输出一个函数，匿名和命名函数都可以。

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

export default function foo() { console.log('foo'); }  // 或者写成 function foo() { console.log('foo'); } export default foo;

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

// import-default.js
import customName from './export-default';
customName(); // 匿名函数 或 'foo'

下面比较一下默认输出和正常输出。

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

import crc32 from 'crc32'; // 输入

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

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

3、import

　　使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。大括号里面的变量名，必须与被导入模块（export.js）对外接口的名称相同。

// main.js
import { firstName, lastName, year } from './export.js'

ele.name = firstName + ' ' + lastName

　　如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

import { lastName as surname } from './export.js';

4、模块的整体加载

　　除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

// main.js

import { area, circumference } from './circle';

console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));

// 整体加载如下
import * as circle from './circle';

console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

1、ES6 模块化的构成

2、export

3、import

4、模块的整体加载

猜你喜欢