javascript需要设计模式吗-前端问答-PHP中文网

1. 单例模式

2. 发布/订阅模式

3. 工厂模式

4. 装饰器模式

JavaScript设计模式的优缺点

如何有效地使用JavaScript设计模式

结论

首页

web前端

前端问答

javascript需要设计模式吗

王林

May 09, 2023 am 09:37 AM

随着Web应用程序的发展，JavaScript已成为最流行的编程语言之一，其设计模式也逐渐引起了广泛关注。但是，JavaScript是否需要设计模式呢？这是一个有争议的话题。在本文中，我们将探讨JavaScript设计模式的优缺点，以及如何有效地使用它们。

设计模式是解决编程问题和实现的重复代码的通用解决方案。它们被广泛使用于各种编程语言和开发环境中。Javascript 也不例外。虽然JavaScript没有像Java或C 这样的静态类型系统，但是它可以使用设计模式来解决共同的编程问题以及提高代码可读性和可维护性。

首先，让我们来看看JavaScript的一些常见设计模式，以及它们如何工作。

1. 单例模式

单例模式是一种常见的设计模式，它用于创建只有一个实例的类。在JavaScript中，可以使用闭包和立即执行函数(IIFE)来实现单例模式。

const Singleton = (() => {
  let instance;
  
  const createInstance = () => {
    const object = new Object({name: 'test object'});
    return object;
  }
  
  return {
    getInstance: () => {
      if(!instance){
        instance = createInstance();
      }
      return instance;
    }
  }
})();

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

console.log(instance1 === instance2); // true

登录后复制

在上面的代码中，我们使用IIFE来创建了一个自执行函数Singleton，它返回一个包含一个getInstance方法的对象。getInstance方法检查是否已经创建了实例，如果没有，则调用createInstance方法创建一个新的实例。如果已经创建，则返回现有实例。由于JavaScript中函数是第一等公民，可以用作对象，所以我们可以将函数作为实例的构造函数来使用，并且可以使用构造函数中的属性和方法来操作实例。

2. 发布/订阅模式

发布/订阅模式是一种常见的设计模式，用于解耦事件处理程序和他们的相应行为。在JavaScript中，可以使用事件模型实现发布/订阅模式。

class Event {
  constructor(){
    this.handlers = new Map();
  }
  
  subscribe(eventName, handler){
    if(!this.handlers.has(eventName)){
      this.handlers.set(eventName, []);
    }
    this.handlers.get(eventName).push(handler);
  }
  
  unsubscribe(eventName, handler){
    const handlers = this.handlers.get(eventName);
    const index = handlers.indexOf(handler);
    handlers.splice(index, 1);
  }
  
  publish(eventName, ...args){
    const handlers = this.handlers.get(eventName);
    handlers.forEach(h => {
      h(...args);
    });
  }
}

const event = new Event();

event.subscribe('click', () => console.log('click event fired'));
event.publish('click');

登录后复制

在上面的代码中，我们使用一个Event类来实现发布/订阅模式。我们可以为不同的事件名称添加不同的处理程序，然后使用publish方法发布事件。当事件触发时，所有相应的处理程序都会执行。

3. 工厂模式

工厂模式是用来创建对象的常用设计模式。通过工厂模式，我们可以创建具有相同属性和行为的对象实例。在JavaScript中，可以使用工厂函数来实现工厂模式。

class Product {
  constructor(name, price){
    this.name = name;
    this.price = price;
  }
  
  getName(){
    return this.name;
  }
  
  getPrice(){
    return this.price;
  }
}

const ProductFactory = (() => {
  const products = new Map();
  
  const create = (name, price) => {
    if(products.has(name)){
      return products.get(name);
    }
    const product = new Product(name, price);
    products.set(name, product);
    return product;
  }
  
  return {
    create
  }
})();

const product1 = ProductFactory.create('product1', 100);
const product2 = ProductFactory.create('product2', 200);
const product3 = ProductFactory.create('product1', 300);

console.log(product1 === product3); // true

登录后复制

在上面的代码中，我们使用一个ProductFactory函数来实现工厂模式。当需要创建一个新产品时，我们首先检查该产品是否已经存在。如果存在，则返回现有产品实例。如果不存在，则创建一个新的产品实例并将其存储在Map对象中。

4. 装饰器模式

装饰器模式是一种常见的设计模式，用于动态地向对象添加行为。在JavaScript中，可以使用混入(mixins)和装饰器(decorators)来实现装饰器模式。

class Car {
  constructor(){
    this.speed = 0;
  }
  
  accelerate(){
    this.speed += 10;
    console.log(`Current speed is ${this.speed}`);
  }
}

const AC = {
  turnOn(){
    console.log('AC is on');
  },
  turnOff(){
    console.log('AC is off');
  }
};

const Turbo = {
  boost(){
    this.speed += 50;
    console.log(`Current speed is ${this.speed}`);
  }
};

const ACDecorator = (car) => {
  return Object.assign(car, AC);
}

const TurboDecorator = (car) => {
  const accelerate = car.accelerate;
  car.accelerate = () => {
    accelerate.call(car);
    Turbo.boost.call(car);
  }
  return car;
}

let car = new Car();
car = ACDecorator(car);
car = TurboDecorator(car);

car.turnOn(); // AC is on
car.accelerate(); // Current speed is 10, then Current speed is 60
car.turnOff(); // AC is off

登录后复制

在上面的代码中，我们使用混入和装饰器来实现装饰器模式。我们首先定义了一个简单的Car类，然后使用AC和Turbo混入对象来扩展Car类的功能。最后，我们使用ACDecorator和TurboDecorator函数来动态地向Car对象添加相应的功能。