es6新特性_前端开发必备 - ES6 新特性之 Module语法和加载实现

往期回顾：

前端开发必备 - ES6 新特性之 let 和 const 命令

前端开发必备 - ES6 新特性之 变量的解构赋值

前端开发必备 - ES6 新特性之 字符串的拓展

前端开发必备 - ES6 新特性之 正则的拓展

前端开发必备 - ES6 新特性之 数值的拓展

前端开发必备 - ES6 新特性之 对象的拓展

前端开发必备 - ES6 新特性之 Symbol

前端开发必备 - ES6 新特性之 Set和Map数据结构

前端开发必备 - ES6 新特性之 Proxy

前端开发必备 - ES6 新特性之 Promise对象

前端开发必备 - ES6 新特性之 Iterator和 for...of循环

前端开发必备 - ES6 新特性之 Generator函数和应用

前端开发必备 - ES6 新特性之 Class语法和继承

16.1 介绍

ES6之前用于JavaScript的模块加载方案，是一些社区提供的，主要有CommonJS和AMD两种，前者用于服务器，后者用于浏览器。

ES6提供了模块的实现，使用export命令对外暴露接口，使用import命令输入其他模块暴露的接口。

16.2 严格模式

ES6模块自动采用严格模式，无论模块头部是否有"use strict"。

严格模式有以下限制：

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

特别是，ES6中顶层this指向undefined，即不应该在顶层代码使用this。

16.3 export命令

使用export向模块外暴露接口，可以是方法，也可以是变量。

可以使用as重命名函数的对外接口。

特别注意：

export暴露的必须是接口，不能是值。

暴露方法也是一样:

16.4 import命令

加载export暴露的接口，输出为变量

import后大括号指定变量名，需要与export的模块暴露的名称一致。

也可以使用as为输入的变量重命名。

import { a as leo } from './a.js';

import不能直接修改输入变量的值，因为输入变量只读只是个接口，但是如果是个对象，可以修改它的属性。

import命令具有提升效果，会提升到整个模块头部最先执行，且多次执行相同import只会执行一次。

16.5 模块的整体加载

当一个模块暴露多个方法和变量，引用时可以用*整体加载。

但是，不允许运行时改变：

16.6 export default 命令

使用export default命令，为模块指定默认输出，引用的时候直接指定任意名称即可。

export default暴露有函数名的函数时，在调用时相当于匿名函数。

export default其实是输出一个名字叫default的变量，所以后面不能跟变量赋值语句。

export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export default之后。

16.7 export 和 import 复合写法

常常在先输入后输出同一个模块使用，即转发接口，将两者写在一起。

常见的写法还有：

常常用在模块继承。

16.8 浏览器中的加载规则

ES6中，可以在浏览器使用