前言
使用 ES6 Module 新特性，提供模块格式。前端项目中，常用于封装 API 。所以这里做个汇总及差异对比说明。
方式一：export
定义
/** common.js */
// 设置名称
export function setName(name) {
// ...
}
// 获取名称
export function getName(){
return '张三';
}
// 删除名称
export function deleteName() {
// ...
}
用法
- 代码
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 */
export default {
// 设置名称
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
定义
export default class {
// 设置名称
static setName(name) {
// ...
}
// 获取名称
static getName(){
return '张三';
}
// 删除名称
static deleteName() {
// ...
}
}
用法：与方式二一致。但差异是，二是导出对象，这里是导出类。如要直接使用方式，要设置静态方法 static。`
- 代码第
1行，因为在定义时使用default方式，直接取别名api。调用：别名.方法名()； - 代码第
3行，等同于第1行，省去了default的别名定义；
import api from './common.js'
// 等同于
// import { default as api } from './common.js';
api.getName();
总结
前端项目中，要封装 API ，推荐使用 方式二和 方式三。文章来源：https://www.toymoban.com/news/detail-631281.html
学习链接
ES6 Module文章来源地址https://www.toymoban.com/news/detail-631281.html
到了这里，关于ES6 模块 export 用法(三种方式)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
