利用 JavaScript 进行函数式编程

设计模式是针对软件设计中常见挑战的既定解决方案。通过利用它们，开发人员可以增强代码的可读性、可扩展性和可维护性。本文探讨了 TypeScript（一种日益流行的 JavaScript 超集）如何通过其类型安全性和现代功能来改进这些模式。无论您是在开发大型应用程序还是业余项目，掌握 TypeScript 中的设计模式都将提高您的开发技能。

什么是设计模式？

设计模式是针对软件设计中常见挑战的可重用的通用解决方案。它们不是实际的代码，而是用于解决这些问题的模板。这些模式源自《四人帮》(GoF) 一书，分为三大类：

1. 创建模式：关注对象创建的机制。
2. 结构模式：强调对象的组成和组织。
3. 行为模式：关注对象之间的交互和通信。

为什么在 TypeScript 中使用设计模式？

TypeScript 的功能使设计模式的实现更加健壮：

1。静态类型： 在编译时捕获错误，减少运行时错误。
2.接口和泛型： 允许更精确和灵活的实现。
3.枚举和联合类型： 简化某些模式，例如状态管理。
4.增强的工具：借助 IDE 支持，TypeScript 提高了工作效率。

TypeScript 中的一些关键设计模式

1. 单例模式

确保一个类只有一个实例并提供对其的全局访问点。

TypeScript 中的实现：

class Singleton {
  private static instance: Singleton;

  private constructor() {} // Prevent instantiation

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

用例：管理配置设置或数据库连接。

2.工厂模式

提供用于创建对象的接口，而无需指定其确切的类。

实施：

interface Button {
  render(): void;
}

class WindowsButton implements Button {
  render() {
    console.log("Rendering Windows button");
  }
}

class MacButton implements Button {
  render() {
    console.log("Rendering Mac button");
  }
}

class ButtonFactory {
  static createButton(os: string): Button {
    if (os === "Windows") return new WindowsButton();
    if (os === "Mac") return new MacButton();
    throw new Error("Unknown OS");
  }
}

const button = ButtonFactory.createButton("Mac");
button.render(); // Output: Rendering Mac button

用例：跨平台应用程序的 UI 框架。

3.观察者模式

定义一对多关系，其中一个对象的更改会通知其所有依赖项。

实施：

class Subject {
  private observers: Array<() => void> = [];

  addObserver(observer: () => void) {
    this.observers.push(observer);
  }

  notifyObservers() {
    this.observers.forEach(observer => observer());
  }
}

const subject = new Subject();
subject.addObserver(() => console.log("Observer 1 notified!"));
subject.addObserver(() => console.log("Observer 2 notified!"));
subject.notifyObservers();

用例： Angular 或 React 等前端框架中的反应性。

4. 策略模式

定义一系列算法，封装每个算法，并使它们可以互换。

实施：

interface PaymentStrategy {
  pay(amount: number): void;
}

class CreditCardPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using Credit Card`);
  }
}

class PayPalPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using PayPal`);
  }
}

class PaymentContext {
  constructor(private strategy: PaymentStrategy) {}

  executePayment(amount: number) {
    this.strategy.pay(amount);
  }
}

const payment = new PaymentContext(new PayPalPayment());
payment.executePayment(100); // Paid 100 using PayPal

用例：电子商务平台中的支付系统。

5. 装饰器模式

动态地向对象添加新功能。

实施：

class Singleton {
  private static instance: Singleton;

  private constructor() {} // Prevent instantiation

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

用例：向购物车中的产品添加功能。

设计模式表

Pattern	Category	Use Case	Benefit
Singleton	Creational	Managing global state like configurations	Guarantees single instance
Factory	Creational	UI components or APIs	Decouples creation logic
Observer	Behavioral	Event systems in frameworks	Simplifies communication
Strategy	Behavioral	Algorithm selection in runtime	Enhances flexibility
Decorator	Structural	Extending class functionality	Adds dynamic capabilities

图案

类别

用例

好处
标题> 单例 创意 管理全局状态（如配置） 保证单实例 工厂 创意 UI 组件或 API 解耦创建逻辑 观察者 行为 框架中的事件系统 简化沟通 策略 行为 运行时的算法选择 增强灵活性 装饰器 结构 扩展类功能 添加动态功能 表> 实施设计模式的最佳实践
1。理解问题：
不要用不必要的模式使事情复杂化。 2.组合模式： 考虑使用诸如 Singleton 与 Factory 之类的组合。

3.利用 TypeScript 功能：

利用接口、泛型和枚举来简化实现。
• 4.编写测试： 确保模式按预期运行。 其他资源
• হাতে কলমে জাভাস্ক্রিপ্ট 作者：Junayed Ahmed

重构模式

---

作者：

Joshua Kerievsky

---

下一篇文章见，小伙子！ ？

我的个人网站：https://shafayet.zya.me

有点风，不是吗？？？

以上是利用 JavaScript 进行函数式编程的详细内容。更多信息请关注PHP中文网其他相关文章！