【认识前端第一步】关于ES6中模块（Module）的使用

对于从老版本js过来的人来说，模块的概念可以说是迈入新前端开发的第一道坎；毕竟历史上，JavaScript 一直没有模块（module）体系；

模块功能主要由两个命令构成：export和import粗矿理解一下，字面意思，一个导入，一个导出；

export

两种写法，例子来源--阮一峰老师的ES6标准入门第三版（这是一个开源书籍，放心去看，也有纸质版可以购买）

1. 直接在定义的时候导出：

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

2. 在脚本文件尾部导出（推荐这种，很明朗）：

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

export { firstName, lastName, year };

• export default 命令

使用这个命令导出后，其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

// export-default.js
export default function () {
  console.log('foo');
}
/*文件分割线*/

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

import

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

• 导入的几种方式

1. 按需导入

// main.js

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

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

2. 整体加载

import * as circle from './circle';

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

ps: 上面介绍了一些概念，用以自己知识更新时做个流程梳理，至少在阅读别人的源码时不至于第一行就被劝退……前端的发展，对于还停留在只是偶尔用传统（html+css+js）来构建测试页面的我冲击还是蛮大的，关于模块还有很多细节和知识点，详情信息可查看阮一峰老师的ES6标准入门第三版或按需搜索来深入理解；