JavaScript 模块和类

第 9 天：JavaScript 模块和类

**日期：2024 年 12 月 16 日**

欢迎来到第 9 天！今天，我们将探索 JavaScript 中的 **模块** 和 **类**，这两个概念可显著增强代码组织、可重用性和可读性。了解这些主题将提升您的 JavaScript 技能，使您能够像专业开发人员一样构建项目。

1. JavaScript 模块

模块可让您将代码拆分成更小、可重复使用的部分。您可以将功能组织到多个文件中，而不是使用一个大文件，从而使您的代码库更易于管理和维护。

为什么要使用模块？

关注点分离：每个模块负责特定的职责。

可重用性：一个模块的代码可以在另一个模块中重用。

可维护性：更易于调试和更新。

模块中的导出和导入

从模块导出

您可以使用“export”从模块中导出变量、函数或类。

**命名导出**

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

**默认导出**

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

导入模块

使用“import”关键字引入另一个模块的功能。

**示例：导入命名导出**

// main.js
import { add, subtract } from './utils.js';

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

**示例：导入默认导出**

// main.js
import greet from './greet.js';

console.log(greet("Alice")); // Output: Hello, Alice!

动态导入

动态导入在运行时使用“import()”加载模块。

**示例：延迟加载**

const loadModule = async () => {
  const module = await import('./utils.js');
  console.log(module.add(5, 3)); // Output: 8
};

loadModule();

2. JavaScript 类

JavaScript 中的类提供了创建对象和封装相关数据和方法的蓝图。它们是 ES6 的一部分，也是 JavaScript 中面向对象编程的基础。

定义类

使用“class”关键字来定义类。

**示例：基础类**

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

const person1 = new Person("John", 30);
console.log(person1.greet()); // Output: Hello, my name is John and I am 30 years old.

类继承

继承允许一个类使用“extends”关键字从另一个类派生属性和方法。

**示例：继承**

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // Output: Buddy barks.

静态方法

静态方法属于类本身，而不是实例。

**示例：静态方法**

class MathUtil {
  static square(number) {
    return number * number;
  }
}

console.log(MathUtil.square(4)); // Output: 16

私有字段和方法

私有字段和方法只能在类内访问，并以“#”前缀表示。

**示例：私有字段**

class BankAccount {
  #balance;

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(1000);
console.log(account.getBalance()); // Output: 1000
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

类与对象字面量

虽然对象文字对于简单的数据结构来说快速而直接，但类提供：

创建多个类似对象的清晰蓝图。

支持继承和封装。

3. 组合模块和类

在现代 JavaScript 应用程序中，模块和类可以完美地互补。您可以在一个模块中定义一个类，然后在另一个模块中使用它。

**示例：组合模块和类**

// car.js
export class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }

  display() {
    return `${this.brand} ${this.model}`;
  }
}

// main.js
import { Car } from './car.js';

const myCar = new Car("Tesla", "Model 3");
console.log(myCar.display()); // Output: Tesla Model 3

4. 真实示例：购物车

这是一个结合模块和类的实际例子。

**文件：cart.js**

export class Cart {
  constructor() {
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
  }

  getTotalItems() {
    return this.items.length;
  }
}

**文件：main.js**

import { Cart } from './cart.js';

const cart = new Cart();
cart.addItem("Apple");
cart.addItem("Banana");

console.log(`Total Items: ${cart.getTotalItems()}`); // Output: Total Items: 2

关键要点

模块：帮助组织您的代码并提高可重用性。

类：提供一种处理对象的结构化方法，提供继承和封装等特性。

组合使用：结合使用模块和类来构建可扩展且可维护的应用程序。

练习任务

创建一个导出基本算术运算函数的模块。

为图书馆系统编写一个类，其中包含添加和列出书籍的方法。

结合模块和类来模拟基本的电子商务购物车。

下一步是什么？

明天，即**第 10 天**，我们将深入研究**事件循环和异步编程**，您将了解 JavaScript 如何处理并发、回调、承诺和事件循环。敬请期待！

CLIS.CC