在前端开发中，模块化是一个非常重要的概念。它可以使代码更加清晰、易于维护和复用。ES6 提供了一种新的模块化方案，即 module 模块。而在 ES7 中，还提出了一些新的模块功能。本文将详细介绍这两个模块化方案的异同点，并提供示例代码以供学习和参考。
ES6 的 module 模块
ES6 的 module 模块是一种新的模块化方案，它可以使不同的模块之间相互独立，不会产生命名冲突。使用 module 模块，我们可以将一个模块中的变量、函数、类等导出，然后在另一个模块中导入，从而实现模块之间的交互。
导出模块
在 ES6 中，我们可以使用 export 关键字将一个模块中的变量、函数、类等导出。例如，我们可以将一个名为 foo 的变量导出：
// module.js export const foo = 'bar';
导入模块
在 ES6 中，我们可以使用 import 关键字将一个模块中的变量、函数、类等导入。例如，我们可以将 module.js 中导出的 foo 变量导入：
// main.js
import { foo } from './module.js';
console.log(foo); // 输出 'bar'模块的默认导出
除了导出具体的变量、函数、类等，我们还可以使用 default 关键字导出模块的默认值。例如，我们可以将一个名为 foo 的函数作为模块的默认值导出：
// module.js
export default function foo() {
console.log('Hello World!');
}在导入模块时，我们可以省略大括号，直接导入模块的默认值：
// main.js import foo from './module.js'; foo(); // 输出 'Hello World!'
ES7 的模块功能
除了 ES6 的 module 模块之外，ES7 还提出了一些新的模块功能，包括 import()、export * 和 export ** 等。下面我们将分别介绍这些新的模块功能。
import()
import() 是 ES7 中引入的一个新的模块加载方法。它可以在运行时动态地加载模块。这个功能非常有用，因为它可以避免在应用程序启动时加载所有模块，从而提高应用程序的性能。
// javascriptcn.com 代码示例
// main.js
function loadModule() {
return import('./module.js')
.then(module => {
console.log(module.foo); // 输出 'bar'
})
.catch(err => {
console.log(err);
});
}
loadModule();export *
export * 可以将一个模块中的所有导出项都导出。例如，我们可以将 module.js 中的所有导出项都导出：
// javascriptcn.com 代码示例
// module.js
export const foo = 'bar';
export function hello() {
console.log('Hello World!');
}
export class Person {
constructor(name) {
this.name = name;
}
}
// main.js
import * as module from './module.js';
console.log(module.foo); // 输出 'bar'
module.hello(); // 输出 'Hello World!'
const person = new module.Person('Tom');
console.log(person.name); // 输出 'Tom'export **
export ** 可以将一个模块中的所有导出项都导出，包括默认值和命名导出。例如，我们可以将 module.js 中的所有导出项都导出：
// javascriptcn.com 代码示例
// module.js
export const foo = 'bar';
export function hello() {
console.log('Hello World!');
}
export default function() {
console.log('This is a default function.');
}
// main.js
import * as module from './module.js';
console.log(module.foo); // 输出 'bar'
module.hello(); // 输出 'Hello World!'
module.default(); // 输出 'This is a default function.'总结
ES6 的 module 模块和 ES7 提出的模块功能都是非常有用的模块化方案。使用这些模块化方案可以使代码更加清晰、易于维护和复用。在实际开发中，我们可以根据实际情况选择使用哪种模块化方案。如果需要动态加载模块，可以使用 ES7 中的 import() 方法。如果需要将一个模块中的所有导出项都导出，可以使用 ES7 中的 export * 和 export **。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65783cd4d2f5e1655d223cfd