es6--Module模块

es6--Module模块

1. 概述2. 严格模式3. export 命令4. import 命令5. 模块的整体加载6. export default

es6–Module模块

1. 概述

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。 由于 ES6 模块是编译时加载，使得静态分析成为可能。 ES6 模块有以下好处： 不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式； 将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性； 不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供。

2. 严格模式

ES6的模块自动采用严格模式；

变量必须声明后再使用 函数的参数不能有同名属性，否则报错 不能使用with语句 不能对只读属性赋值，否则报错 不能使用前缀0表示八进制数，否则报错 不能删除不可删除的属性，否则报错 不能删除变量delete prop，会报错，只能删除属性delete global[prop] eval不会在它的外层作用域引入变量 eval和arguments不能被重新赋值 arguments不会自动反映函数参数的变化 不能使用arguments.callee 不能使用arguments.caller 禁止this指向全局对象 不能使用fn.caller和fn.arguments获取函数调用的堆栈 增加了保留字（比如protected、static和interface）

3. export 命令

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

//index.js export var firstName = "Michael"; export var lastName = "Jackson"; export var age = 18;

或者：

var firstName = "Michael"; var lastName = "Jackson" var age = 18； export {firstName, lastName, age};

export命令除了输出变量，还可以输出函数或类（class):

export function add(a,b){ return a+b; }

使用as可以对要输出的接口重命名：

function add(a,b){ return a+b; } export {add as fn};

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

4. import 命令

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

import {firstName, lastName, age} from "./index.js"; console.log(firstName); //"Michael"

大括号里面的变量名，必须与被导入模块（index.js）对外接口的名称相同。 import也可以使用as进行重命名。

import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。但是，如果import输入的是一个对象，改写该对象的属性是允许的。

import命令具有提升效果，会提升到整个模块的头部，首先执行。import命令是编译阶段执行的，在代码运行之前。

foo(); import { foo } from 'index.js';

由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

// 报错 import { 'f' + 'oo' } from 'index.js';

5. 模块的整体加载

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

输出： // circle.js export function area(radius) { return Math.PI * radius * radius; } export function circumference(radius) { return 2 * Math.PI * radius; } 输入： import * as circle from './circle.js'; console.log('圆面积：' + circle.area(4)); console.log('圆周长：' + circle.circumference(14));

模块整体加载在circle对象上，应该是可以静态分析的，所以不允许运行时改变。

6. export default

export default命令，为模块指定默认输出。

输出：default.js export default function () { console.log('foo'); } 输入： import aaa from './default.js'; //import命令可以为该匿名函数指定任意名字。 aaa(); // 'foo'

一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。