轻松掌握前端设计模式：真实场景示例让你眼前一亮

2022-12-12 00:08:42

揭秘前端设计模式：代码优雅、健壮与可维护的秘诀

前端开发的世界瞬息万变，复杂场景层出不穷。想要轻松应对这些挑战，掌握设计模式是必备技能。设计模式宛如锋利的宝剑，助你斩断代码难题，铸就优雅、健壮且可维护的代码基石。

单一职责原则：代码清晰度之源

单一职责原则遵循的理念是：让函数专注于单一职责，若功能过于复杂，将其拆分细化。此举带来的优势显而易见：代码清晰度大幅提升，维护和理解变得更加容易。

// 遵循单一职责原则
const addProductToCart = (product) => {
  // 将商品添加到购物车
};

const removeProductFromCart = (productId) => {
  // 从购物车中移除商品
};

const calculateTotalPrice = (cart) => {
  // 计算购物车总价
};

开放/封闭原则：灵活代码之鑰

开放/封闭原则强调：对扩展开放，对修改封闭。这意味着代码易于扩展，无需修改现有代码。当需要添加新功能时，只需扩展代码即可。

// 遵循开放/封闭原则
class Player {
  move(direction) {
    // 根据方向移动
  }
}

// 创建不同移动策略的子类
class LeftMoveStrategy {
  move() {
    // 向左移动
  }
}

class RightMoveStrategy {
  move() {
    // 向右移动
  }
}

// 玩家可以动态更换移动策略
player.moveStrategy = new LeftMoveStrategy();
player.move();

策略模式：算法与对象分离之道

策略模式的核心思想是将算法与使用算法的对象分离。如此一来，我们可以轻松更换算法，无需修改使用该算法的对象。

// 遵循策略模式
class Shape {
  draw() {
    this.drawStrategy.draw();
  }
}

// 创建不同绘图策略的子类
class CircleDrawStrategy {
  draw() {
    // 绘制圆形
  }
}

class RectangleDrawStrategy {
  draw() {
    // 绘制矩形
  }
}

// 形状可以动态更换绘图策略
shape.drawStrategy = new CircleDrawStrategy();
shape.draw();

工厂模式：对象创建之利器

工厂模式的核心思想是将对象的创建与使用对象的对象分离。如此一来，我们可以轻松更换对象的创建方式，无需修改使用该对象的对象。

// 遵循工厂模式
class ShapeFactory {
  createShape(type) {
    switch (type) {
      case "circle":
        return new Circle();
      case "rectangle":
        return new Rectangle();
      default:
        throw new Error("Unknown shape type");
    }
  }
}

// 创建形状，无需了解具体的创建细节
const shapeFactory = new ShapeFactory();
const circle = shapeFactory.createShape("circle");

观察者模式：松散耦合之典范

观察者模式的核心思想是当一个对象发生变化时，所有依赖于它的对象都会收到通知。如此一来，我们可以轻松解耦对象之间的关系，让代码更加灵活和易于维护。

// 遵循观察者模式
class Subject {
  observers = [];

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    this.observers.splice(this.observers.indexOf(observer), 1);
  }

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

class Observer {
  update() {
    // 当主题发生变化时更新
  }
}

代理模式：安全与控制之墙

代理模式的核心思想是为另一个对象提供一个接口，以控制对该对象的访问。如此一来，我们可以轻松限制对对象的访问，让代码更加安全和可靠。

// 遵循代理模式
class SecurityProxy {
  constructor(realObject) {
    this.realObject = realObject;
  }

  access() {
    if (this.checkAccess()) {
      return this.realObject.access();
    } else {
      throw new Error("Access denied");
    }
  }

  checkAccess() {
    // 检查访问权限的逻辑
  }
}

适配器模式：兼容性之桥梁

适配器模式的核心思想是将一个接口转换成另一个接口，以让两个不兼容的接口可以一起工作。如此一来，我们可以轻松让两个不兼容的系统一起工作，让代码更加灵活和易于维护。

// 遵循适配器模式
class OldSystemAdapter {
  constructor(oldSystem) {
    this.oldSystem = oldSystem;
  }

  convertOldSystemData() {
    // 将旧系统数据转换成新系统的数据格式
  }
}

// 旧系统可以与新系统兼容
const adapter = new OldSystemAdapter(oldSystem);
const data = adapter.convertOldSystemData();