ES6 模块化(Module)export和import详解-白红宇

ES6 模块化(Module)export和import详解

阅读量：6080 次

发布时间：2019-06-20

本文共 8061 字，大约阅读时间需要 26 分钟。

ES6 模块化(Module)export和import详解

ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

// ES6模块

import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。由于 ES6 模块是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。除了静态加载带来的各种好处，ES6 模块还有以下好处:

(1)不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点

(2)将来浏览器的新 API 就能用模块格式提供，不再必要做成全局变量或者navigator对象的属性

(3)不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供

1.严格模式(模块必须遵守,严格模式是ES5引入)

(1)严格模式主要有以下限制:

(2)变量必须声明后再使用

(3)函数的参数不能有同名属性，否则报错

(4)不能使用with语句

(5)不能对只读属性赋值，否则报错

(6)不能使用前缀0表示八进制数，否则报错

(7)不能删除不可删除的属性，否则报错

(8)不能删除变量delete prop，会报错，只能删除属性delete global[prop]

(9)eval不会在它的外层作用域引入变量

(10)eval和arguments不能被重新赋值

(11)arguments不会自动反映函数参数的变化

(12)不能使用arguments.callee

(13)不能使用arguments.caller

(14)禁止this指向全局对象

(15)不能使用fn.caller和fn.arguments获取函数调用的堆栈

(16)增加了保留字（比如protected、static和interface）

2.export 命令

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是使用export命令输出变量的方式:

//方式一

export let name = '张三';

//方式二(推荐)可以一起在模块结束位置输出

let age = 12;

let height = 14;

//导出多个数据,单个数据也一样。

export {age,height};

//export age;或者export 12;都是错误的写法

//方式三(输出函数)

//1

export let reduce1 = function reduce1(){

console.log('reduce1函数减少');

};

export let add1 = ()=>{

console.log('add1函数增加');

};

//2

let reduce2 = function reduce2(){

console.log('reduce2函数减少');

};

export {reduce2};

function reduce2k(){

console.log('reduce2k函数减少');

};

export {reduce2k};

let add2 = ()=>{

console.log('add2函数增加');

};

export {add2};

//3

export function reduce3(){

console.log('reduce3函数减少');

};

//export function(){} 没有函数名,不能这么写

//export ()=>{} 没有函数名,不能这么写

//export add3(){} 不能这样写

//方式四(类)

可以使用as关键字，重命名函数或者变量等,重命名后可以用不同的名字export多次输出

export {

age as AGE1,

age as AGE2,

height as HEIGHT

};

另外，export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。这一点与CommonJS规范完全不同,CommonJS模块输出的是值的缓存，不存在动态更新。

export var foo = 'bar';

setTimeout(()=>{foo = 'baz';},500)

3.import 命令

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

import {name} from './Modules';

console.log(name);

import {age,height} from './Modules';

console.log(age + "===" + height);

import {reduce1,reduce2,reduce2k,reduce3,add1,add2} from './Modules';

reduce1();

reduce2();

reduce2k();

reduce3();

add1();

add2();

import {foo} from './Modules';

console.log(foo);

setTimeout(()=>{console.log(foo)},500);

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。可以使用as关键字，重命名函数或者变量等,重命名后可以用不同的名字import多次输入

import {name as name1,name as name2} from './Modules';

console.log(name1+"==="+name2);

export和import命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错。这是因为处于条件代码块之中，就没法做静态优化了，违背了ES6模块的设计初衷。

export先申明后导出不会报错

//导出多个数据,单个数据也一样。

export {age,height};

//方式二(推荐)可以一起在模块结束位置输出

let age = 12;

let height = 14;

export放到函数里面输出就会报错

function A(){

//导出多个数据,单个数据也一样。

export {age,height};

//SyntaxError: 'import' and 'export' may only appear at the top level

import也是同理:

//正确

console.log(name);

import {name} from './Modules';

//错误

function A(){

import {name} from './Modules';

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

// 报错

import { 'f' + 'oo' } from 'my_module';

// 报错

let module = 'my_module';

import { foo } from module;

// 报错

if (x === 1) {

import { foo } from 'module1';

} else {

import { foo } from 'module2';

import语句会执行所加载的模块，因此可以有下面的写法,如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。

import './Modules';

//错误import * from './Modules';

上面代码仅仅执行Modules模块，但是不输入任何值, 比如在某个模块中做了一些不需要输入值的操作,就可以使用,下面是使用import导入样式文件:

import './style.css';//import导入样式

当然样式文件也可以使用一下方式使用样式

import styles from './xx.css';

className="直接的样式名字"和className={styles.root},这里的className可以直接写样式的名字,也可以使用导入的名字点css的样式名字。

4.模块的整体加载

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

//模块的整体加载

import * as Modules from './Modules';

console.log(Modules);

console.log("模块的整体加载"+Modules.age + "=="+Modules.name);

5.export default 命令

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

export default class Person {

getAge() {

console.log('Person age');

};

let weight = 100;

export default weight;

let width = 30;

export {width as default};

export default命令只能使用一次,如果同一个文件中使用了多个export default,前面的将会被覆盖,但是使用export符合用法时,重复会报错。其他模块加载该模块时，import命令可以为该匿名函数指定任意名字,这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。