ES6 模块 export 用法(三种方式)

前言

使用 ES6 Module 新特性，提供模块格式。前端项目中，常用于封装 API 。所以这里做个汇总及差异对比说明。

方式一：export

定义

/** common.js */// 设置名称exportfunctionsetName(name){// ...}// 获取名称exportfunctiongetName(){return'张三';}// 删除名称exportfunctiondeleteName(){// ...}

用法

• 代码 1 - 3 行，整体加载，* 表示全部，使用关键字 as，取别名为 api。调用：别名.方法名()；
• 代码 5 - 7 行，按需加载，用花括号列出要使用的方法名，直接调用方法名即可；

// 整体加载(推荐)import*as api from'./common.js'
api.getName();// 按需加载，但推荐上面的写法// import { setName, getName, deleteName } from './common.js'// getName();

方式二：export default

定义

/** common.js */exportdefault{// 设置名称setName(name){// ...},// 获取名称getName(){return'张三';},// 删除名称deleteName(){// ...}}

用法：直接使用默认

default

• 代码第 1 行，因为在定义时使用 default方式，直接取别名 api。调用：别名.方法名()；
• 代码第 3 行，等同于第 1 行，省去了 default的别名定义；

import api from'./common.js'// 等同于// import { default as api } from './common.js';

api.getName();

方式三：export default class

定义

exportdefaultclass{// 设置名称staticsetName(name){// ...}// 获取名称staticgetName(){return'张三';}// 删除名称staticdeleteName(){// ...}}

用法：与方式二一致。但差异是，二是导出对象，这里是导出类。如要直接使用方式，要设置静态方法

static

。`

• 代码第 1 行，因为在定义时使用 default方式，直接取别名 api。调用：别名.方法名()；
• 代码第 3 行，等同于第 1 行，省去了 default的别名定义；

import api from'./common.js'// 等同于// import { default as api } from './common.js';

api.getName();

总结

前端项目中，要封装

API

，推荐使用

方式二

和

方式三

。

学习链接

ES6 Module