ES6 新特性之——import

简单介绍不同规范

• CommonJS规范和AMD规范
  运行时加载

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

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

上述代码：
① 整体加载fs模块，生成一个fs对象
② 然后在这个对象上读取方法
这种加载，称之为 运行时加载

• ES6 模块：es6模块不是对象，而是通过export显示输出的代码片段，在通过import方式输入
  编译时加载

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

上述代码：
① 从fs模块加载三个方法，其他方法不加载（按需加载）
这种加载，称为编译时加载或者静态加载

言归正传——ES6模块

• 语法

export 用于规定模块对外的接口

• export 变量名|函数|类（class）| export { 变量1,变量2,变量3...}
  ①输出变量

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

或者

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

②输出函数

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

或者

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

③输出对象

export class A{
}

• as 对输出的变量重命名

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
//用as重命名firstname
export { firstName as ftname, lastName, year };

• 整体加载模块
  export * as 变量名 from ‘模块‘；
• export default

// modules.js
function add(x, y) {
  return x * y;
}
//具名接口改为默认接口
export {add as default};
// 等同于
// export default add;

// app.js
//输入模块的默认接口并且重命名为foo
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';

import 用于输入其他模块提供的功能

• 语法

import { 变量名1,变量名2,变量名3...} from '模块'
变量名必须和模块提供的对外接口名一致