js export default problems All In One

js export default problems All In One

problems

1. 潜在的 bug
2. 维护成本
3. 不同人代码的命名不一致

solution

1. named export

demos

1. export default 👎

// sum.js

const sum = (a, b) => a + b;

export default sum;

// or
export default const sum = (a, b) => a + b;

// test.js

// ??? 不确定模块默认导出的名称是什么，增加心智负担，浪费不必要的时间
// 1. 本地模块，需要查看对应的模块
// 2. 第三方模块，需要查看文档或源码
import Sum from "./sum.js";

// or, 随意重新命名，编辑器无法智能提示
import Add from "./sum.js";

// or, 导致同一个模块不同的人命名不一致
import * as myAdd from "./sum.js";
import * as yourAdd from "./sum.js";
import * as useAddAsSum from "./sum.js";

1. export default 👍

// sum.js
const sum = (a, b) => a + b;

export sum;

// or
export {
  sum,
};

// test.js

// 确定模块导出的名称是什么
// 编辑器可以智能提示
import {sum} from "./sum.js";

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---