详解前端框架中的设计模式 | 豆包MarsCode AI刷题

引言

前端框架中的设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。这些设计模式主要分为创建型模式、结构型模式和行为型模式三大类。以下是对这些设计模式的介绍、优缺点分析以及使用案例：

创建型模式

1. 工厂模式

   • 介绍：工厂模式是一种创建型设计模式，它提供了一种创建对象的最佳方式。在工厂模式中，一个工厂对象决定创建出哪一种产品类的实例。
   • 优点：使代码更加简洁，减少了重复代码；使对象的创建和具体类解耦，提高了代码的可扩展性和可维护性。
   • 缺点：如果产品类型非常多，则工厂类会非常庞大，不便于管理。
   • 使用场景：在一个电商平台中，可以使用工厂模式来创建不同类型的商品对象，如电子产品、服装等。
   • 示例代码

// 产品接口
function Product(name) {
    this.name = name;
}

Product.prototype.use = function() {
    console.log('Using product: ' + this.name);
};

// 具体产品A
function ConcreteProductA(name) {
    Product.call(this, name);
}
ConcreteProductA.prototype = Object.create(Product.prototype);
ConcreteProductA.prototype.constructor = ConcreteProductA;

// 具体产品B
function ConcreteProductB(name) {
    Product.call(this, name);
}
ConcreteProductB.prototype = Object.create(Product.prototype);
ConcreteProductB.prototype.constructor = ConcreteProductB;

// 工厂类
function Creator(productType) {
    this.productType = productType;
}

Creator.prototype.factoryMethod = function() {
    if (this.productType === 'A') {
        return new ConcreteProductA('Product A');
    } else if (this.productType === 'B') {
        return new ConcreteProductB('Product B');
    }
};

// 客户端代码
const creator = new Creator('A');
const product = creator.factoryMethod();
product.use(); // 输出: Using product: Product A

2. 单例模式

   • 介绍：单例模式确保一个类仅有一个实例，并提供一个全局访问点。
   • 优点：节省内存，因为单例模式只允许创建一个实例；提供了全局访问点，方便管理。
   • 缺点：单例模式可能导致职责单一原则违反，因为单例类可能变得过于庞大和复杂。
   • 使用场景：在Web应用中，可以使用单例模式来管理全局状态，如用户登录状态、购物车等。
   • 示例代码

const Singleton = (function() {
    let instance;

    function createInstance() {
        const object = new Object('I am the instance');
        return object;
    }

    return {
        getInstance: function() {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // 输出: true

3. 原型模式

   • 介绍：原型模式通过复制现有对象来创建新对象，而不是通过实例化类来创建对象。
   • 优点：性能较高，因为通过复制现有对象来创建新对象比实例化类要快；减少了子类的数量，简化了代码结构。
   • 缺点：需要为每个被复制的对象配备一个克隆方法，这增加了代码的复杂性。
   • 使用场景：在需要创建大量相似对象时，可以使用原型模式，如在一个图形编辑软件中创建多个相似的图形对象。
   • 示例代码

// 原型类
function Prototype() {
    this.name = 'Prototype';
}

Prototype.prototype.clone = function() {
    const cloned = Object.create(this);
    cloned.name = this.name + ' (cloned)';
    return cloned;
};

// 客户端代码
const prototype = new Prototype();
const cloned = prototype.clone();

console.log(cloned.name); // 输出: Prototype (cloned)

结构型模式

1. 装饰器模式

   • 介绍：装饰器模式允许向一个现有的对象添加新的功能，同时又不改变其结构。
   • 优点：比继承更加灵活，因为装饰器可以随时被添加或移除；避免了类的爆炸式增长。
   • 缺点：装饰器模式可能会导致代码变得复杂，因为需要创建多个装饰器类。
   • 使用场景：在Web开发中，可以使用装饰器模式来增强HTML元素的功能，如为按钮添加点击动画效果。
   • 示例代码

// 组件接口
function Component() {}
Component.prototype.operation = function() {
    console.log('Original Component operation');
};

// 具体组件
function ConcreteComponent() {}
ConcreteComponent.prototype = Object.create(Component.prototype);
ConcreteComponent.prototype.constructor = ConcreteComponent;
ConcreteComponent.prototype.operation = function() {
    console.log('ConcreteComponent operation');
};

// 装饰器基类
function Decorator(component) {
    this.component = component;
}
Decorator.prototype = Object.create(Component.prototype);
Decorator.prototype.constructor = Decorator;
Decorator.prototype.operation = function() {
    this.component.operation();
};

// 具体装饰器A
function ConcreteDecoratorA(component) {
    Decorator.call(this, component);
}
ConcreteDecoratorA.prototype = Object.create(Decorator.prototype);
ConcreteDecoratorA.prototype.constructor = ConcreteDecoratorA;
ConcreteDecoratorA.prototype.operation = function() {
    console.log('ConcreteDecoratorA operation');
    this.component.operation();
};

// 具体装饰器B
function ConcreteDecoratorB(component) {
    Decorator.call(this, component);
}
ConcreteDecoratorB.prototype = Object.create(Decorator.prototype);
ConcreteDecoratorB.prototype.constructor = ConcreteDecoratorB;
ConcreteDecoratorB.prototype.operation = function() {
    console.log('Added state in ConcreteDecoratorB');
    this.component.operation();
};

// 客户端代码
const component = new ConcreteComponent();
const decoratorA = new ConcreteDecoratorA(component);
const decoratorB = new ConcreteDecoratorB(decoratorA);
decoratorB.operation();
// 输出:
// ConcreteDecoratorA operation
// Added state in ConcreteDecoratorB
// ConcreteComponent operation

2. 适配器模式

   • 介绍：适配器模式将一个类的接口转换成客户端所期待的另一种接口形式，使原本由于接口不兼容而不能一起工作的类可以一起工作。
   • 优点：提高了代码的复用性和灵活性；使系统更加容易扩展和维护。
   • 缺点：过多地使用适配器可能会使系统变得复杂和难以维护。
   • 使用场景：在将一个旧系统的数据库迁移到新系统时，可以使用适配器模式来兼容旧系统的数据库接口。
   • 示例代码

// 目标接口
function Target() {}
Target.prototype.request = function() {
    console.log('Called Target request()');
};

// 源类
function Adaptee() {}
Adaptee.prototype.specificRequest = function() {
    console.log('Called Adaptee specificRequest()');
};

// 适配器类
function Adapter() {
    this.adaptee = new Adaptee();
}
Adapter.prototype = Object.create(Target.prototype);
Adapter.prototype.constructor = Adapter;
Adapter.prototype.request = function() {
    this.adaptee.specificRequest();
};

// 客户端代码
const target = new Adapter();
target.request(); // 输出: Called Adaptee specificRequest()

3. 代理模式

   • 介绍：代理模式为其他对象提供一种代理以控制对这个对象的访问。
   • 优点：在客户端和目标对象之间起到了中介的作用，降低了系统的耦合度；可以对目标对象进行额外的控制或处理。
   • 缺点：可能会增加代码的复杂性，因为需要创建代理类。
   • 使用场景：在Web应用中，可以使用代理模式来缓存频繁访问的数据，以提高系统的性能。
   • 示例代码

// 接口
function Image() {}
Image.prototype.display = function() {
    console.log('Image displayed');
};

// 真实对象
function RealImage(filename) {
    this.filename = filename;
    this.loadFromFile(filename);
}
RealImage.prototype = Object.create(Image.prototype);
RealImage.prototype.constructor = RealImage;
RealImage.prototype.loadFromFile = function(filename) {
    console.log('Loading ' + filename);
    // 这里模拟加载时间
    setTimeout(() => {
        console.log(filename + ' has been loaded');
    }, 1000);
};
RealImage.prototype.display = function() {
    console.log('Displaying ' + this.filename);
};

// 代理对象
function ProxyImage(filename) {
    this.realImage = null;
    this.filename = filename;
}
ProxyImage.prototype = Object.create(Image.prototype);
ProxyImage.prototype.constructor = ProxyImage;
ProxyImage.prototype.display = function() {
    if (this.realImage === null) {
        this.realImage = new RealImage(this.filename);
    }
    this.realImage.display();
};

// 客户端代码
const proxy = new ProxyImage('test.jpg');
proxy.display(); // 输出: Loading test.jpg (稍后) test.jpg has been loaded (再稍后) Displaying test.jpg

行为型模式

1. 策略模式

   • 介绍：策略模式定义了一系列算法，并将每一个算法封装起来，使它们可以互换。
   • 优点：提高了代码的灵活性和可扩展性；使算法的变化独立于使用算法的客户。
   • 缺点：增加了系统的复杂性，因为需要创建多个策略类。
   • 使用场景：在一个电商平台中，可以使用策略模式来计算不同商品的折扣算法。
   • 示例代码

// 策略接口
function Strategy() {}
Strategy.prototype.doOperation = function(num1, num2) {};

// 具体策略A
function ConcreteStrategyA() {}
ConcreteStrategyA.prototype = Object.create(Strategy.prototype);
ConcreteStrategyA.prototype.constructor = ConcreteStrategyA;
ConcreteStrategyA.prototype.doOperation = function(num1, num2) {
    return num1 + num2;
};

// 具体策略B
function ConcreteStrategyB() {}
ConcreteStrategyB.prototype = Object.create(Strategy.prototype);
ConcreteStrategyB.prototype.constructor = ConcreteStrategyB;
ConcreteStrategyB.prototype.doOperation = function(num1, num2) {
    return num1 - num2;
};

// 上下文类
function Context(strategy) {
    this.strategy = strategy;
}
Context.prototype.executeStrategy = function(num1, num2) {
    return this.strategy.doOperation(num1, num2);
};

// 客户端代码
const strategyA = new ConcreteStrategyA();
const contextA = new Context(strategyA);
console.log(contextA.executeStrategy(5, 3)); // 输出: 8

const strategyB = new ConcreteStrategyB();
const contextB = new Context(strategyB);
console.log(contextB.executeStrategy(5, 3)); // 输出: 2

2. 观察者模式

   • 介绍：观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。
   • 优点：实现了表示层和数据模型层的分离；提高了系统的可扩展性和灵活性。
   • 缺点：如果观察者过多，可能会导致性能问题。
   • 使用场景：在Web应用中，可以使用观察者模式来实现实时通知功能，如当用户收到新消息时实时通知用户。
   • 示例代码

// 主题接口
function Subject() {}
Subject.prototype.observers = [];

Subject.prototype.addObserver = function(observer) {
    this.observers.push(observer);
};

Subject.prototype.removeObserver = function(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
        this.observers.splice(index, 1);
    }
};

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

// 具体主题
function ConcreteSubject() {
    this.state = null;
}
ConcreteSubject.prototype = Object.create(Subject.prototype);
ConcreteSubject.prototype.constructor = ConcreteSubject;
ConcreteSubject.prototype.setState = function(state) {
    this.state = state;
    this.notifyObservers();
};

// 观察者接口
function Observer() {}
Observer.prototype.update = function(subject) {};

// 具体观察者
function ConcreteObserver(name) {
    this.name = name;
}
ConcreteObserver.prototype = Object.create(Observer.prototype);
ConcreteObserver.prototype.constructor = ConcreteObserver;
ConcreteObserver.prototype.update = function(subject) {
    console.log(this.name + ' received state ' + subject.state);
};

// 客户端代码
const subject = new ConcreteSubject();

const observer1 = new ConcreteObserver('Observer 1');
const observer2 = new ConcreteObserver('Observer 2');

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.setState('New State');
// 输出:
// Observer 1 received state New State
// Observer 2 received state New State

3. 迭代器模式

   • 介绍：迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素，而不需要暴露该对象的内部表示。
   • 优点：支持以不同的方式遍历一个聚合对象；简化了聚合类的接口设计。
   • 缺点：对于简单的遍历需求，可能会增加代码的复杂性。
   • 使用场景：在一个在线图书馆系统中，可以使用迭代器模式来遍历书架上的所有书籍。
   • 示例代码

// 定义迭代器接口（在JavaScript中，我们使用对象字面量来模拟接口）
const Iterator = {
    hasNext: function() {},  // 判断是否存在下一个元素
    next: function() {}      // 返回下一个元素
};

// 定义具体的聚合对象
class Container {
    constructor(items) {
        this._items = items;
    }

    getIterator() {
        return new ConcreteIterator(this._items);
    }
}

// 定义具体的迭代器类
class ConcreteIterator {
    constructor(items) {
        this._items = items;
        this._index = 0;
    }

    hasNext() {
        return this._index < this._items.length;
    }

    next() {
        if (this.hasNext()) {
            return this._items[this._index++];
        }
        return null; // 或者抛出异常，这取决于你的设计决策
    }
}

// 使用示例
const container = new Container([1, 2, 3, 4, 5]);
const iterator = container.getIterator();

// 使用迭代器遍历元素
while (iterator.hasNext()) {
    console.log(iterator.next());
}

综合对比分析

在设计模式的选择上，需要根据具体的应用场景和需求来决定。以下是对前端框架中设计模式的综合对比分析：

• 灵活性：策略模式、装饰器模式和代理模式提供了较高的灵活性，因为它们允许在不修改现有代码的情况下添加新的功能或算法。
• 性能：原型模式和工厂模式在性能上表现较好，因为它们通过复制现有对象或创建特定实例来减少对象的创建时间。
• 复杂性：适配器模式、装饰器模式和代理模式可能会增加代码的复杂性，因为它们需要创建额外的类或接口来实现功能。
• 可扩展性：策略模式、观察者模式和工厂模式提供了较好的可扩展性，因为它们允许在不修改现有代码的情况下添加新的算法、观察者或产品类型。

使用案例对比

以React和Vue为例，这两个前端框架在设计模式的使用上有所不同：

• React：React更强调组件化开发，因此常使用基础组件模式和Hooks来提高组件的可重用性和可维护性。例如，在一个电商应用中，可以使用基础组件模式来创建Button、Card等通用组件，并使用Hooks来管理组件的状态和副作用。
• Vue：Vue则更注重数据的响应式更新和组合式API的使用。例如，在Vue中可以使用数据存储模式和轻量级可组合函数来管理全局状态和业务逻辑。此外，Vue还提供了谦逊组件的设计理念，将业务逻辑放在其他地方，使组件更加简单和易于重用。

结语

前端框架中的设计模式各有优缺点，并且在实际应用中需要根据具体需求来选择合适的设计模式。通过合理的设计模式选择和应用，可以提高代码的可重用性、可维护性和可扩展性。