在 JavaScript 开发中，模块化是非常重要的概念。在早期的 JavaScript 中，开发者通常使用对象和函数来模拟模块化。随着 ES6/ES2015 的推出，JavaScript 对模块化的支持变得更加的完善和规范化。在本文中，我们将详细介绍 ES6/ES2015 中的模块化，并提供相关的学习和指导意义。
什么是模块化
在计算机科学中，模块化是指将大型的软件系统分解为小的、独立的模块。每个模块都包含了一个单独的功能，可以独立操作。这种方式可以提高代码的可读性、可维护性和可扩展性。
在 JavaScript 中，模块化是将一个大型的、复杂的应用程序分解为小的、可重用的代码块。这种方式可以使得代码更加模块化、更容易维护，并降低了出现错误的概率。
在 ES6/ES2015 中，模块化是通过 import 和 export 来实现的。笔者将通过示例代码来详细介绍这两个关键字的用法。
export
export 用来将一个模块中的变量、函数或类暴露给其他 JavaScript 文件使用。以下是 export 的用法示例：
// javascriptcn.com 代码示例
// person.js
export const name = 'Tom';
export const age = 20;
export function sayHello() {
console.log(`Hello, my name is ${name}.`);
}
export class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
}上述代码中，首先我们定义了一些变量、函数和类，并使用 export 将它们暴露给外部引用。
import
import 用来引入其他 JavaScript 文件中 export 出来的变量、函数或类。以下是 import 的用法示例：
// javascriptcn.com 代码示例
// main.js
import {name, age, sayHello, Person} from './person.js';
console.log(name); // 'Tom'
console.log(age); // 20
sayHello(); // 'Hello, my name is Tom.'
const person = new Person('Jerry', 25);
person.sayHello(); // 'Hello, my name is Jerry.'上述代码中，我们通过 import 引入了 person.js 文件中 export 的变量、函数和类。其中使用了解构语法，可以直接将 person.js 文件中的变量、函数和类赋值给 main.js 文件中的变量。
另外，还有一种 import 的写法是将 export 的内容统一放到一个对象中，然后通过该对象的属性访问。以下是该写法的示例：
// javascriptcn.com 代码示例
// main.js
import * as person from './person.js';
console.log(person.name); // 'Tom'
console.log(person.age); // 20
person.sayHello(); // 'Hello, my name is Tom.'
const person1 = new person.Person('Jerry', 25);
person1.sayHello(); // 'Hello, my name is Jerry.'ES6/ES2015 中模块化的其他用法
除了 import 和 export 关键字外，ES6/ES2015 中还有其他模块化相关的用法，本文中只做简单介绍。
import() 函数
在 ES6/ES2015 中，还提供了一个 import() 函数，它可以动态地加载一个 JavaScript 模块。以下是 import() 函数的用法示例：
// javascriptcn.com 代码示例
// main.js
import('./person.js')
.then(module => {
console.log(module.name); // 'Tom'
console.log(module.age); // 20
module.sayHello(); // 'Hello, my name is Tom.'
const person = new module.Person('Jerry', 25);
person.sayHello(); // 'Hello, my name is Jerry.'
});export default
在一个模块中，只能使用 export default 一次。当然，你也可以在模块中使用 export 命令来输出多个变量、函数和类。以下是 export default 的用法示例：
// javascriptcn.com 代码示例
// person.js
export const name = 'Tom';
export default class {
constructor(age) {
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${name}, age is ${this.age}.`);
}
}上述代码中，我们使用 export default 将一个没有名称的类暴露给其他 JavaScript 文件。当然，该类在需要引入时可以使用任意名称表示。
总结
ES6/ES2015 中的模块化是 JavaScript 开发中的重要概念，能够提高代码的可读性、可维护性和可扩展性。本文通过 import 和 export 关键字详细介绍了 ES6/ES2015 中的模块化，并与其他模块化相关语法进行了简单比较。希望对 JavaScript 开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654b18e57d4982a6eb50f71e