不再使用 export default 导出模块的理由

为什么你不应该使用 export default 导出模块？

在写了许多年的 JavaScript 代码后，我已经变得厌恶默认导出（export default）。我发现大多数与 JavaScript 模块相关的问题都可以归咎于默认导出，因此决定改用具名导出（export named）。

具名导出 vs 默认导出：有什么区别？

使用默认导出时，导出的模块只能通过一个名字访问。例如：

// 导出一个默认的函数
export default function add(a, b) {
  return a + b;
}

这种导出方式的缺点是，当你想使用导出的模块时，你必须使用相同的名称。例如：

// 导入默认的函数
import add from './add.js';

// 使用导出的函数
const result = add(1, 2);

这可能会导致名称冲突，尤其是当你有多个模块都导出具有相同名称的函数时。

具名导出则没有这样的问题。使用具名导出时，可以为导出的每个变量或函数指定一个不同的名称。例如：

// 导出一个具名的函数
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

这种导出方式的优点是，你可以使用不同的名称来导入导出的模块。例如：

// 导入具名的函数
import { add, subtract } from './add-subtract.js';

// 使用导出的函数
const result1 = add(1, 2);
const result2 = subtract(3, 1);

这样可以避免名称冲突，使你的代码更易于阅读和理解。

为什么你应该使用具名导出？

有很多原因可以解释为什么你应该使用具名导出。以下是一些最常见的原因：

• 避免名称冲突： 具名导出可以帮助你避免名称冲突，使你的代码更易于阅读和理解。
• 提高可读性： 具名导出使你的代码更易于阅读和理解，因为你可以使用有意义的名称来命名导出的变量和函数。
• 提高重用性： 具名导出可以提高代码的重用性，因为你可以将导出的模块导入到其他模块中使用。
• 提高灵活性： 具名导出使你的代码更具灵活性，因为你可以选择只导入你需要的变量和函数。

如何使用具名导出？

使用具名导出非常简单。只需在要导出的变量或函数前面加上export，然后指定一个名称即可。例如：

// 导出一个具名的函数
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

要导入具名的模块，可以使用import关键字，后跟大括号内的变量或函数名称。例如：

// 导入具名的函数
import { add, subtract } from './add-subtract.js';

// 使用导出的函数
const result1 = add(1, 2);
const result2 = subtract(3, 1);

结论

具名导出是一种比默认导出更优越的导出方式。它可以帮助你避免名称冲突，提高代码的可读性、重用性和灵活性。因此，我建议你放弃使用默认导出，转而使用具名导出。