在前端开发中，模块化已经成为一种普遍的开发方式。而在 ES6 中，我们可以使用 export 和 import 关键字来实现模块化，其中 export 可以导出多个变量或函数，而 export default 则只能导出一个默认值。在 ES11 中，这两个关键字的功能有了更多的灵活性，可以更好地处理模块之间的依赖和命名。
export
在 ES6 中，我们可以使用 export 关键字将变量或函数导出，例如：
// module.js
export const name = 'module';
export function sayHello() {
console.log(`Hello, ${name}!`);
}在另一个模块中，我们可以使用 import 关键字引入这些变量或函数：
// index.js
import { name, sayHello } from './module.js';
console.log(name); // 'module'
sayHello(); // 'Hello, module!'在 ES11 中，export 关键字可以直接导出一个对象，对象的属性即为导出的变量或函数，例如：
// module.js
const name = 'module';
function sayHello() {
console.log(`Hello, ${name}!`);
}
export { name, sayHello };这样，我们在另一个模块中就可以使用对象的解构语法来引入这些变量或函数：
// index.js
import { name, sayHello } from './module.js';
console.log(name); // 'module'
sayHello(); // 'Hello, module!'这种方式可以更好地处理多个变量或函数之间的依赖关系，使得代码更加清晰和易于维护。
export default
在 ES6 中，export default 关键字只能导出一个默认值，例如：
// module.js
export default function sayHello(name) {
console.log(`Hello, ${name}!`);
}在另一个模块中，我们可以使用任意名称来引入这个默认值：
// index.js
import hello from './module.js';
hello('world'); // 'Hello, world!'在 ES11 中，export default 关键字可以和 export 关键字一起使用，例如：
// module.js
const name = 'module';
function sayHello() {
console.log(`Hello, ${name}!`);
}
export { sayHello as default, name };这样，我们在另一个模块中可以使用对象的解构语法来引入默认值和其他变量或函数：
// index.js
import { default: hello, name } from './module.js';
console.log(name); // 'module'
hello(); // 'Hello, module!'这种方式可以更好地处理模块之间的命名冲突，同时也可以更好地处理默认值和其他变量或函数之间的依赖关系。
总结
在 ES11 中，export 和 export default 关键字的功能更加灵活，可以更好地处理模块之间的依赖和命名。我们可以使用 export 关键字导出一个对象，对象的属性即为导出的变量或函数；同时，我们也可以使用 export default 关键字和 export 关键字一起使用，来更好地处理默认值和其他变量或函数之间的依赖关系。这些技巧可以让我们更加方便地编写模块化的代码，并使得代码更加清晰和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f0294d2b3ccec22f94d52b