在本章中，我们将深入探讨如何使用 export 和 import 关键字来组织和管理模块化的代码。这不仅有助于提高代码的可维护性和可重用性，还能让团队协作变得更加顺畅。
导出默认类
当你想导出一个类作为模块的默认导出时，可以使用 export default 语句。这种方式使得导入方在引入这个模块时无需关心具体的类名，简化了导入过程。
示例：导出默认类
假设我们有一个名为 Vehicle 的类，它定义了一些基本的车辆属性和方法：
-- -------------------- ---- -------
-- ----------
------ ------- ----- ------- -
----------------- ------ -
--------- - -----
---------- - ------
-
------------- -
----------------- -- - ------------ -----------------
-
-然后在其他文件中，你可以这样导入这个类：
// main.js
import Car from './vehicle.js';
const myCar = new Car('Toyota', 'Corolla');
myCar.displayInfo(); // 输出：This is a Toyota Corolla.导出命名类
除了导出默认类之外，你还可以导出命名类，这意味着每个导出都有一个明确的名字，并且在导入时需要指定名字。
示例：导出命名类
假设我们有另一个类 ElectricVehicle，我们希望将其作为一个命名导出：
-- -------------------- ---- -------
-- ------------------
------ ----- --------------- -
----------------- ------ ---------------- -
--------- - -----
---------- - ------
-------------------- - ----------------
-
-------------------- -
---------------- ------- -------- -- ---- ------------ ------------- -- ----------------------- -------
-
-接下来，在另一个文件中，我们可以这样导入并使用这个类：
// 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.同时导出默认类和命名类
有时候，你可能希望在一个模块中同时导出默认类和命名类。这可以通过以下方式实现：
-- -------------------- ---- -------
-- ----------------
------ ----- ------- -
----------------- ------ -
--------- - -----
---------- - ------
-
------------- -
----------------- -- - ------------ -----------------
-
-
------ ------- ----- --- ------- ------- -
----------------- ------ ----- -
----------- -------
--------- - -----
-
------------- -
---------------- --- --- ---- -- ----------------
-
-在这个例子中，我们首先导出了一个 Vehicle 类，然后定义了一个继承自 Vehicle 的 Car 类，并将其作为默认导出。
在另一个文件中，我们可以这样导入：
-- -------------------- ---- ------- -- ------- ------ ---- - ------- - ---- --------------------- ----- ----- - --- ------------- ---------- ------ -------------------- -- ------- -- - ------ -------- -------------------- -- ------ --- --- ---- -- ----- ----- --------- - --- ---------------- --------- ------------------------ -- ------- -- - ----- ------
通过这种方式，你可以灵活地组织和管理你的代码，使其更加模块化和易于维护。
使用别名导入类
在某些情况下，你可能会遇到同名的类，或者为了使代码更具可读性，你可能希望给导入的类起一个别名。你可以使用 as 关键字来创建别名。
示例：使用别名导入类
假设我们有两个文件，都导出了名为 Engine 的类：
-- -------------------- ---- -------
-- ----------
------ ----- ------ -
------------------ -
---------- - ------
-
---------- -
------ -----------
-
-
-- ----------
------ ----- ------ -
------------------- -
----------- - -------
-
----------- -
------ ------------
-
-为了区分这两个类，我们可以为它们创建别名：
-- -------------------- ---- ------- -- ------- ------ - ------ -- ------- - ---- --------------- ------ - ------ -- ------- - ---- --------------- ----- --------- - --- ------------- ---------------------------------- -- ------ ----- --------- - --- ------------- ----------------------------------- -- ----
通过这种方式，即使两个类具有相同的名称，也可以在同一个文件中清晰地区分它们。
总结
通过本章的学习，你应该已经掌握了如何在 JavaScript 中使用 export 和 import 来导出和导入类。无论是默认导出还是命名导出，亦或是同时使用两者，这些技术都能帮助你更好地组织代码，提高项目的可维护性和可扩展性。希望这些知识对你未来的工作有所帮助！