JavaScript设计模式：职场情商也能带回家？小白也能轻松入门！

2023-05-21 10:32:35

JavaScript 设计模式：提升你的技术实力和软技能

在当今快节奏的科技行业中，掌握强大的工具和技能对于取得成功至关重要。JavaScript 设计模式就是这样一种工具，它可以让你成为一名优秀的程序员，并提高你的职场情商和人际交往能力。

JavaScript 设计模式的三大原则

单一职责原则： 每个函数或对象只专注于一项特定任务，保持代码的模块化和可维护性。
开放封闭原则： 系统对扩展是开放的，对修改是封闭的，使代码易于扩展和维护。
里氏代换原则： 子类对象可以替代父类对象，而不会破坏系统行为。

JavaScript 设计模式的七大常用模式

工厂模式： 创建对象而不指定具体类型，从而提高代码的灵活性。

class Factory {
  createProduct(type) {
    switch (type) {
      case 'A':
        return new ProductA();
      case 'B':
        return new ProductB();
      default:
        throw new Error('Invalid product type');
    }
  }
}

抽象工厂模式： 创建一系列相关的对象，而无需指定具体类型，增强代码的可扩展性和可复用性。

class AbstractFactory {
  createProductA() {
    throw new Error('This method must be implemented by subclasses');
  }

  createProductB() {
    throw new Error('This method must be implemented by subclasses');
  }
}

单例模式： 确保只有一个类的实例，保证数据的一致性和操作的原子性。

class Singleton {
  static instance;

  static getInstance() {
    if (!this.instance) {
      this.instance = new Singleton();
    }

    return this.instance;
  }
}

建造者模式： 将复杂的构建过程分解成一系列简单步骤，提高代码的灵活性。

class Builder {
  constructor() {
    this.product = {};
  }

  buildPartA() {
    this.product.partA = 'Part A';
  }

  buildPartB() {
    this.product.partB = 'Part B';
  }

  getResult() {
    return this.product;
  }
}

原型模式： 使用一个对象作为模板来创建新对象，实现快速的创建和克隆。

const prototype = {
  name: 'John Doe',
  age: 30
};

const person1 = Object.create(prototype);
person1.name = 'Jane Smith';

适配器模式： 将一个类的接口转换成另一个接口，使不兼容的类能够协同工作。

class Adaptee {
  specificRequest() {
    console.log('Specific request');
  }
}

class Adapter {
  constructor(adaptee) {
    this.adaptee = adaptee;
  }

  request() {
    this.adaptee.specificRequest();
  }
}

代理模式： 为一个对象创建一个代理对象，在对象被调用时进行拦截和控制。

class Subject {
  doSomething() {
    console.log('Doing something');
  }
}

class Proxy {
  constructor(subject) {
    this.subject = subject;
  }

  doSomething() {
    // Intercept the request
    console.log('Intercepting request');
    this.subject.doSomething();
  }
}