ES12 中的 default 指引

在前端开发中，我们经常要使用 import 语句导入其他文件中的代码。ES6 开始，JavaScript 提供了 import/export 语法来解决模块化问题，但在使用 import 语句时，我们可能会遇到文件选择问题，特别是在导入一些特别命名的文件时。

ES12 中的 default 指引是一种新的解决方案，可以帮助我们避免这种选择问题。

default 指引的定义

default 指引是 ES12 中的一个新特性，通过为模块文件添加一个指引函数，在导入时就能自动加载默认模块，避免了选择问题。如果没有指定指引函数，则默认导出包含了整个模块的默认值。

default 指引的用法

使用 default 指引非常简单。首先，你需要在模块文件中定义一个指引函数。这个函数必须返回一个默认对象。例如：

// utils.js
export default function() {
  return {
    days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  };
}

然后，在你需要使用此模块的文件中，你可以在 import 语句中使用 default 参数来导入此默认值：

// main.js
import utils from "./utils.js";

console.log(utils.days); // ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
console.log(utils.months); // ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

如果你没有定义指引函数，则默认导出包含整个模块的默认值。例如：

// utils.js
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

export { days, months as default };

在这个例子中，我们将 months 设置为默认导出，而不是定义指引函数。

然后，在你需要使用此模块的文件中，你可以在 import 语句中省略导出名称来导入默认值：

// main.js
import utils from "./utils.js";

console.log(utils); // ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
console.log(utils.days); // ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

default 指引的指导意义

使用 default 指引能够避免在导入文件时的名称选择问题。在导出一个默认值时，你只需要知道这个默认值的名称，而不需要知道导出的名称，并且不需要与导入名称保持一致。这可以让你在重构代码时更加灵活。

此外，default 指引还可以提高代码的可读性。在阅读代码时，你可以更容易地看出哪些值是此模块的默认值。

总结

ES12 中的 default 指引是一种新的解决方案，能够帮助我们避免在导入时的文件选择问题。通过导出一个默认的对象或值，你只需要知道默认值的名称即可，而不需要和导入名称保持一致。这种方式可以提高代码的灵活性和可读性，让代码更易于理解和修改。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c7c14968c7c53b0783144