ES12.0 exports default 修改案例

在前端开发中，模块化是一个非常重要的概念。ES6 引入了模块化的概念，通过使用 export 和 import 关键字来实现模块化。随着 ES12.0 的到来，export 关键字也进行了一些修改，本文将介绍 ES12.0 中 exports default 的修改案例。

ES6 中的 export 和 import

在 ES6 中，我们可以使用 export 关键字将一个模块中的某个变量或函数暴露出去，供其他模块使用。示例代码如下：

// module.js
export const name = 'module';

export function sayHello() {
  console.log(`Hello, ${name}!`);
}

在另一个模块中，我们可以使用 import 关键字来导入该模块的变量或函数。示例代码如下：

// app.js
import { name, sayHello } from './module.js';

console.log(name); // 输出：module
sayHello(); // 输出：Hello, module!

ES12.0 中的 exports default

在 ES12.0 中，exports default 的用法发生了一些变化。在 ES6 中，我们可以使用 export default 关键字将一个模块中的某个变量或函数设置为默认导出，示例代码如下：

// module.js
export default function() {
  console.log('Hello, World!');
}

在另一个模块中，我们可以使用 import 关键字来导入该模块的默认导出。示例代码如下：

// app.js
import sayHello from './module.js';

sayHello(); // 输出：Hello, World!

在 ES12.0 中，exports default 的用法发生了一些变化。我们可以使用 exports default 关键字将一个模块中的某个变量或函数设置为默认导出，示例代码如下：

// module.js
export default {
  name: 'module',
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

在另一个模块中，我们可以使用 import 关键字来导入该模块的默认导出。示例代码如下：

// app.js
import module from './module.js';

console.log(module.name); // 输出：module
module.sayHello(); // 输出：Hello, module!

总结

ES12.0 中 exports default 的修改增强了模块化的功能，使得我们能够更加方便地导出和导入模块。在实际开发中，我们可以根据需求选择使用 export 和 export default 关键字来实现模块化，以提高代码的可维护性和可复用性。

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