import & export的应用要点

[pekonchan]

export

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

导出值是一个接口，而不能是一个静态值，要能与模块内部变量建立一一对应的关系，如导出一个定义表达式，导出一个对象，有点类似指针的意思。

export var a = 1;
export function example(){}
export class test {}

var b = 2;
export { b } // 对象缩写写法

function example2 () {}
export { example2 };

以上都是正确的，而下面的是错误的写法

export 1;

var a = 1;
export a; // 本质上还是导出了1这个静态值

function example () {}
export example; 

注意：

导出的值，与导出所在模块对应的值是实时的，即动态变化的。如果导出的值，在模块内经过某种变化后，那么对应导入该导出值时，也是实时变化的。

export var exam = 'value1';
setTimeout(() => exam = 'value2', 300);

5秒后，exam值会变为value2

重命名

能为导出接口重命名，

export { example2 as exam };

即把原本导出的接口名example2重命名为exam，在导入时就用exam指定导入。

需要知道的是，这跟直接导入example2是不会冲突的，如果有两个导出：

export { example2 }
export { example2 as exam };

导入可以各自导入example2和exam，虽然他们指向的同样的代码。

如上，如果要导出多个值，可以写在一起，用逗号隔开

export { example2, example2 as exam };

默认值

以上是指定导出哪些值，在导入的时候，也是需要写明需要导入哪些值。一般你用这个模块都是使用一个指定的导出值，或者如果你引入你一个不熟悉的模块，你还要知道它内部的值名称才能导入，就显得很麻烦。所以为了方便，引入默认值的概念，指定哪个导出接口作为默认导出值，因此在导入时就不用指明了。

语法也很简单

export default xxx

实际上，以上写法就是

export { xxx as default }

的缩写。

因此，采用默认形式导出时，xxx的值可以是静态值，如

export default 1;

但不能是定义表达式了，如

// 这是错误的，因为这缩写还原回原本的写法是不符合语法的
export default var a = 1;

一个模块仅有一个默认值导出

另外，export可以放在模块顶层作用域任何位置。下面的import亦然，import具有提升作用。如果放在代码块作用域里会报错。

import

import用来导入模块，是静态编译的，即不能使用表达式或变量来动态加载模块。
导入的值也不能直接赋值改变原本值，但是如果导入的是对象的话，就可以更改其属性值。

基本语法是

// value为指定导入值名称
// moduleFile为导入模块的名

import { value } from moduleFile.js

以上语法就是针对非导出默认值的导入方式

如果是针对导出默认值的话，采用以下语法

// renamedValue即为你为导入默认值起的名字，不一定要跟原来默认值名一样
import renamedValue from moduleFile.js

// 相当于
import {default as renamedValue} from moduleFile.js

from后面为文件地址，可以是绝对路径也可以是相对路径。

如果导入多个，都是来自同一个模块，那么可以分别写import，也可以写在一个import里：

import {value1, value2} from moduleFile.js

// 这是默认值和指定值来自一个文件的导入
import defaultValue, { value1 } from moduleFile.js

如果你仅仅想执行导入模块内的代码，而不引入某个导出值，就像通过script标签引入某个文件一样，就可以直接使用

import moduleFile.js

就算写了多个导入同一个文件，执行也只会执行一次。

重命名

导入也支持重命名，如

import {value} from moduleFile.js
// 可以命名为newName
import {value as newName} from moduleFile.js


import deafultValue from moduleFile.js
// 可以命名为newDefault
import defaultValue as newDefault from moduleFile.js

如果你想导入模块的全部导出值，可以用*来表示，导入的会是一个对象（用as来指定这个对象名字），每个导出值作为对象的对应属性

export {value1, value2, value3};

import * as whole from module.js
console.log(whole.value1);

总结

export和import是相互配合的，如果指定导出，那么久需要指定导入

export { value };

import {value} from module.js

如果默认导出，那么可以默认导入

export default value;

import value from module.js

导入和导出都可以通过as来重命名