2019-08-14 | 前端开发 | UNLOCK

JavaScript中普通接口和默认接口的区别

ES6的模块化功能主要有两个关键字: exportimport

export主要用于模块对外暴露接口。
import用于引入其他模块暴露的接口。

export

export有两种用法:

export default foo
export foo

exportexport default均可用于导出常量、函数、文件、模块等
一种是直接导出,一种是导出默认。区别在于export default导出的是一个默认的变量

这两种的区别在于:

  1. export default 在一个模块里只能有一个,但是export可以有多个
  2. 通过export方式导出,在导入时要加**{ }**,export default则不需要
  3. export能直接导出变量表达式,export default不行
    例如:
    export var foo='...' 是合法语句,但是export default var foo='...'是不合法的
  4. 模块中通过export方式导出的可以重新赋值,但是通过export default导出的无法修改
    例如:
let e1='e1e1e1';
let e2='e2e2e2';
export {e1};
export default e2;
e1='hahahaha';
e2='hahahaha';

//执行结果
console.log(e1);
console.log(e2);

hahahaha
e2d2e2

import

export (default)导出的模块,在其他模块中可以通过import导入

不同的是:

使用export foo导出的,导入时需要加个大括号

import {foo} from './a'

通过as重命名

import {foo as e1} from './a'

使用export default foo导出的,导入时不用加入大括号

import foo from './a'

评论加载中