在本章中，我们将深入探讨如何使用 export 和 import 关键字来组织和管理模块化的代码。这不仅有助于提高代码的可维护性和可重用性，还能让团队协作变得更加顺畅。
导出默认类
当你想导出一个类作为模块的默认导出时，可以使用 export default 语句。这种方式使得导入方在引入这个模块时无需关心具体的类名，简化了导入过程。
示例：导出默认类
假设我们有一个名为 Vehicle 的类，它定义了一些基本的车辆属性和方法：
// www.javascriptcn.com code example
// vehicle.js
export default class Vehicle {
constructor(make, model) {
this.make = make;
this.model = model;
}
displayInfo() {
console.log(`This is a ${this.make} ${this.model}.`);
}
}然后在其他文件中，你可以这样导入这个类：
// main.js
import Car from './vehicle.js';
const myCar = new Car('Toyota', 'Corolla');
myCar.displayInfo(); // 输出：This is a Toyota Corolla.导出命名类
除了导出默认类之外，你还可以导出命名类，这意味着每个导出都有一个明确的名字，并且在导入时需要指定名字。
示例：导出命名类
假设我们有另一个类 ElectricVehicle，我们希望将其作为一个命名导出：
// www.javascriptcn.com code example
// electricVehicle.js
export class ElectricVehicle {
constructor(make, model, batteryCapacity) {
this.make = make;
this.model = model;
this.batteryCapacity = batteryCapacity;
}
displayBatteryInfo() {
console.log(`The battery capacity of this ${this.make} ${this.model} is ${this.batteryCapacity} kWh.`);
}
}接下来，在另一个文件中，我们可以这样导入并使用这个类：
// main.js
import { ElectricVehicle } from './electricVehicle.js';
const myEV = new ElectricVehicle('Tesla', 'Model S', 100);
myEV.displayBatteryInfo(); // 输出：The battery capacity of this Tesla Model S is 100 kWh.同时导出默认类和命名类
有时候，你可能希望在一个模块中同时导出默认类和命名类。这可以通过以下方式实现：
// www.javascriptcn.com code example
// vehicleModule.js
export class Vehicle {
constructor(make, model) {
this.make = make;
this.model = model;
}
displayInfo() {
console.log(`This is a ${this.make} ${this.model}.`);
}
}
export default class Car extends Vehicle {
constructor(make, model, year) {
super(make, model);
this.year = year;
}
displayYear() {
console.log(`The car was made in ${this.year}.`);
}
}在这个例子中，我们首先导出了一个 Vehicle 类，然后定义了一个继承自 Vehicle 的 Car 类，并将其作为默认导出。
在另一个文件中，我们可以这样导入：
// www.javascriptcn.com code example
// main.js
import Car, { Vehicle } from './vehicleModule.js';
const myCar = new Car('Toyota', 'Corolla', 2022);
myCar.displayInfo(); // 输出：This is a Toyota Corolla.
myCar.displayYear(); // 输出：The car was made in 2022.
const myVehicle = new Vehicle('Honda', 'Civic');
myVehicle.displayInfo(); // 输出：This is a Honda Civic.通过这种方式，你可以灵活地组织和管理你的代码，使其更加模块化和易于维护。
使用别名导入类
在某些情况下，你可能会遇到同名的类，或者为了使代码更具可读性，你可能希望给导入的类起一个别名。你可以使用 as 关键字来创建别名。
示例：使用别名导入类
假设我们有两个文件，都导出了名为 Engine 的类：
// www.javascriptcn.com code example
// engine1.js
export class Engine {
constructor(power) {
this.power = power;
}
getPower() {
return this.power;
}
}
// engine2.js
export class Engine {
constructor(volume) {
this.volume = volume;
}
getVolume() {
return this.volume;
}
}为了区分这两个类，我们可以为它们创建别名：
// www.javascriptcn.com code example
// main.js
import { Engine as Engine1 } from './engine1.js';
import { Engine as Engine2 } from './engine2.js';
const myEngine1 = new Engine1(250);
console.log(myEngine1.getPower()); // 输出：250
const myEngine2 = new Engine2(3.0);
console.log(myEngine2.getVolume()); // 输出：3通过这种方式，即使两个类具有相同的名称，也可以在同一个文件中清晰地区分它们。
总结
通过本章的学习，你应该已经掌握了如何在 JavaScript 中使用 export 和 import 来导出和导入类。无论是默认导出还是命名导出，亦或是同时使用两者，这些技术都能帮助你更好地组织代码，提高项目的可维护性和可扩展性。希望这些知识对你未来的工作有所帮助！