Module 的语法

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍

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

xxxxxxxxxx
export var Hello = "hello" // hello.js文件
import { Hello } from "./hello.js" // index.js文件

export 命令

export命令导出变量

xxxxxxxxxx
export var firstName = 'sxt';
export var lastName = 'itbaizhan';
export var year = 2000;

export命令导出函数

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

需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系

xxxxxxxxxx
// 报错
export 1;

// 报错
var m = 1;
export m;

修改正确写法

xxxxxxxxxx
// 写法一
export var m = 1;

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

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

import 命令

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

xxxxxxxxxx
// name.js
export var firstName = 'sxt';
export var lastName = 'itbaizhan';
export var year = 2000;

// main.js
import { firstName, lastName, year } from './profile.js';
function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

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

xxxxxxxxxx
// value.js
export var value = 1;

// main.js
import { value as val } from './value.js';

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

xxxxxxxxxx
// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}
export function circumference(radius) {
  return 2 * Math.PI * radius;
}


// main.js
import { area, circumference } from './circle';
// 可以修改如下
import * as circle from './circle';

export default 命令

从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

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

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

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

实时效果反馈

1. 下列那个不属于ES6的Module语法的关键字：

A export

B import

C export default

D require

答案

1=>D