js设计模式怎么写

一、设计模式在JavaScript中的应用

设计模式是解决特定问题的标准解决方案、提高代码的可读性和维护性、促进代码的重用性。其中一个常见的设计模式是“单例模式”，它确保一个类只有一个实例，并提供一个全局访问点。单例模式在JavaScript中的实现相对简单，通常使用闭包来实现。通过使用单例模式，我们可以管理全局状态，避免重复实例化，进而提高应用程序的性能和一致性。

例如，在一个大型应用程序中，我们可能需要一个全局的配置对象来存储各种配置参数。使用单例模式可以确保这个配置对象在整个应用程序中只有一个实例，从而避免了潜在的冲突和不一致性。

单例模式的实现

单例模式可以通过闭包和立即执行函数来实现。以下是一个简单的例子：

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

在这个例子中，createInstance函数只会被调用一次，instance变量将保存这个唯一的实例。通过调用Singleton.getInstance方法，我们可以获取这个唯一的实例。

二、工厂模式

工厂模式是一种创建对象的设计模式，它通过定义一个接口来创建对象，而不是直接实例化类。工厂模式在需要创建不同类型对象的情况下非常有用，特别是当创建过程涉及复杂的逻辑时。

工厂模式的实现

以下是一个简单的工厂模式的例子：

class Car {
  constructor(model, year) {
    this.model = model;
    this.year = year;
  }
}
class Truck {
  constructor(model, capacity) {
    this.model = model;
    this.capacity = capacity;
  }
}
class VehicleFactory {
  createVehicle(type, attributes) {
    switch (type) {
      case 'car':
        return new Car(attributes.model, attributes.year);
      case 'truck':
        return new Truck(attributes.model, attributes.capacity);
      default:
        throw new Error('Unknown vehicle type');
    }
  }
}
const factory = new VehicleFactory();
const myCar = factory.createVehicle('car', { model: 'Toyota', year: 2021 });
const myTruck = factory.createVehicle('truck', { model: 'Ford', capacity: 10000 });
console.log(myCar); // Car { model: 'Toyota', year: 2021 }
console.log(myTruck); // Truck { model: 'Ford', capacity: 10000 }

在这个例子中，VehicleFactory类提供了一个创建不同类型车辆对象的方法。通过工厂方法，我们可以轻松创建不同类型的车辆，而无需直接实例化具体的类。

三、观察者模式

观察者模式是一种行为设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖于它的对象都将得到通知并自动更新。观察者模式在需要实现事件处理机制的情况下非常有用。

观察者模式的实现

以下是一个简单的观察者模式的例子：

class Subject {
  constructor() {
    this.observers = [];
  }
  addObserver(observer) {
    this.observers.push(observer);
  }
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }
  notifyObservers(message) {
    this.observers.forEach(observer => observer.update(message));
  }
}
class Observer {
  update(message) {
    console.log(`Observer received message: ${message}`);
  }
}
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();
subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notifyObservers('Hello Observers!');
// Observer received message: Hello Observers!
// Observer received message: Hello Observers!

在这个例子中，Subject类维护了一组观察者，当状态发生变化时，通过调用notifyObservers方法通知所有观察者。观察者通过实现update方法来接收和处理通知。

四、策略模式

策略模式是一种行为设计模式，它定义了一系列算法，并将每个算法封装起来，使它们可以相互替换。这种模式使得算法可以独立于使用它们的客户端变化。

策略模式的实现

以下是一个简单的策略模式的例子：

class Strategy {
  execute(a, b) {
    throw new Error('Strategy#execute needs to be overridden');
  }
}
class AddStrategy extends Strategy {
  execute(a, b) {
    return a + b;
  }
}
class SubtractStrategy extends Strategy {
  execute(a, b) {
    return a - b;
  }
}
class MultiplyStrategy extends Strategy {
  execute(a, b) {
    return a * b;
  }
}
class Context {
  setStrategy(strategy) {
    this.strategy = strategy;
  }
  executeStrategy(a, b) {
    return this.strategy.execute(a, b);
  }
}
const context = new Context();
context.setStrategy(new AddStrategy());
console.log(context.executeStrategy(2, 3)); // 5
context.setStrategy(new SubtractStrategy());
console.log(context.executeStrategy(5, 2)); // 3
context.setStrategy(new MultiplyStrategy());
console.log(context.executeStrategy(3, 4)); // 12

在这个例子中，Strategy类定义了一个抽象接口execute，不同的具体策略类（如AddStrategy、SubtractStrategy和MultiplyStrategy）实现了这个接口。Context类通过设置不同的策略来实现不同的算法。

五、代理模式

代理模式是一种结构设计模式，它提供了一个对象的代理，并控制对这个对象的访问。代理模式可以用于延迟对象的创建、控制对对象的访问权限以及在访问对象之前进行一些额外的操作。

代理模式的实现

以下是一个简单的代理模式的例子：

class RealImage {
  constructor(filename) {
    this.filename = filename;
    this.loadFromDisk();
  }
  loadFromDisk() {
    console.log(`Loading ${this.filename} from disk...`);
  }
  display() {
    console.log(`Displaying ${this.filename}`);
  }
}
class ProxyImage {
  constructor(filename) {
    this.filename = filename;
  }
  display() {
    if (!this.realImage) {
      this.realImage = new RealImage(this.filename);
    }
    this.realImage.display();
  }
}
const image = new ProxyImage('test.jpg');
image.display(); // Loading test.jpg from disk... Displaying test.jpg
image.display(); // Displaying test.jpg

在这个例子中，ProxyImage类作为RealImage类的代理，延迟了RealImage对象的创建。只有在需要显示图像时，才会创建RealImage对象，从而节省资源。

六、装饰者模式

装饰者模式是一种结构设计模式，它允许在不改变对象接口的情况下，动态地给对象添加行为和职责。装饰者模式通过创建一个装饰者类来包装原始对象，并在需要时扩展其功能。

装饰者模式的实现

以下是一个简单的装饰者模式的例子：

class Coffee {
  cost() {
    return 5;
  }
}
class MilkDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }
  cost() {
    return this.coffee.cost() + 2;
  }
}
class SugarDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }
  cost() {
    return this.coffee.cost() + 1;
  }
}
let coffee = new Coffee();
coffee = new MilkDecorator(coffee);
coffee = new SugarDecorator(coffee);
console.log(coffee.cost()); // 8

在这个例子中，Coffee类表示基本的咖啡，MilkDecorator和SugarDecorator类分别为咖啡添加牛奶和糖的功能。通过装饰者模式，我们可以灵活地扩展对象的功能，而不需要修改原始类。

七、命令模式

命令模式是一种行为设计模式，它将请求封装成对象，使得可以使用不同的请求、队列或者日志来参数化其他对象。命令模式也支持可撤销的操作。

命令模式的实现

以下是一个简单的命令模式的例子：

class Light {
  turnOn() {
    console.log('The light is on');
  }
  turnOff() {
    console.log('The light is off');
  }
}
class Command {
  execute() {
    throw new Error('Command#execute needs to be overridden');
  }
  undo() {
    throw new Error('Command#undo needs to be overridden');
  }
}
class TurnOnCommand extends Command {
  constructor(light) {
    super();
    this.light = light;
  }
  execute() {
    this.light.turnOn();
  }
  undo() {
    this.light.turnOff();
  }
}
class TurnOffCommand extends Command {
  constructor(light) {
    super();
    this.light = light;
  }
  execute() {
    this.light.turnOff();
  }
  undo() {
    this.light.turnOn();
  }
}
class RemoteControl {
  setCommand(command) {
    this.command = command;
  }
  pressButton() {
    this.command.execute();
  }
  pressUndo() {
    this.command.undo();
  }
}
const light = new Light();
const turnOn = new TurnOnCommand(light);
const turnOff = new TurnOffCommand(light);
const remote = new RemoteControl();
remote.setCommand(turnOn);
remote.pressButton(); // The light is on
remote.pressUndo(); // The light is off
remote.setCommand(turnOff);
remote.pressButton(); // The light is off
remote.pressUndo(); // The light is on

在这个例子中，Command类定义了一个抽象接口，具体的命令类（如TurnOnCommand和TurnOffCommand）实现了这个接口。RemoteControl类通过设置不同的命令来执行不同的操作，并支持撤销操作。

八、适配器模式

适配器模式是一种结构设计模式，它使得不兼容的接口可以协同工作。适配器模式通过创建一个适配器类，将一个接口转换成客户端期望的另一个接口。

适配器模式的实现

以下是一个简单的适配器模式的例子：

class OldPrinter {
  printOld(data) {
    console.log(`Printing using old printer: ${data}`);
  }
}
class NewPrinter {
  print(data) {
    console.log(`Printing using new printer: ${data}`);
  }
}
class PrinterAdapter {
  constructor(oldPrinter) {
    this.oldPrinter = oldPrinter;
  }
  print(data) {
    this.oldPrinter.printOld(data);
  }
}
const oldPrinter = new OldPrinter();
const adapter = new PrinterAdapter(oldPrinter);
const newPrinter = new NewPrinter();
newPrinter.print('Hello World'); // Printing using new printer: Hello World
adapter.print('Hello World'); // Printing using old printer: Hello World

在这个例子中，OldPrinter类和NewPrinter类有不同的打印接口。PrinterAdapter类通过将OldPrinter的接口适配成NewPrinter的接口，使得它们可以协同工作。

九、外观模式

外观模式是一种结构设计模式，它为子系统中的一组接口提供了一个统一的接口，使得子系统更加易于使用。外观模式通过简化客户端与子系统之间的交互，隐藏了子系统的复杂性。

外观模式的实现

以下是一个简单的外观模式的例子：

class CPU {
  start() {
    console.log('CPU started');
  }
  shutDown() {
    console.log('CPU shut down');
  }
}
class Memory {
  load() {
    console.log('Memory loaded');
  }
  free() {
    console.log('Memory freed');
  }
}
class HardDrive {
  read() {
    console.log('Hard Drive read');
  }
  write() {
    console.log('Hard Drive write');
  }
}
class ComputerFacade {
  constructor() {
    this.cpu = new CPU();
    this.memory = new Memory();
    this.hardDrive = new HardDrive();
  }
  start() {
    this.cpu.start();
    this.memory.load();
    this.hardDrive.read();
    console.log('Computer started');
  }
  shutDown() {
    this.cpu.shutDown();
    this.memory.free();
    this.hardDrive.write();
    console.log('Computer shut down');
  }
}
const computer = new ComputerFacade();
computer.start(); // CPU started, Memory loaded, Hard Drive read, Computer started
computer.shutDown(); // CPU shut down, Memory freed, Hard Drive write, Computer shut down

在这个例子中，ComputerFacade类提供了一个统一的接口来启动和关闭计算机系统。通过外观模式，客户端可以方便地与计算机系统进行交互，而无需了解子系统的复杂细节。

十、模板方法模式

模板方法模式是一种行为设计模式，它定义了一个操作中的算法骨架，而将一些步骤延迟到子类中。模板方法模式使得子类可以不改变算法结构的情况下，重新定义算法中的某些步骤。

模板方法模式的实现

以下是一个简单的模板方法模式的例子：

class Game {
  play() {
    this.initialize();
    this.startPlay();
    this.endPlay();
  }
  initialize() {
    throw new Error('Game#initialize needs to be overridden');
  }
  startPlay() {
    throw new Error('Game#startPlay needs to be overridden');
  }
  endPlay() {
    throw new Error('Game#endPlay needs to be overridden');
  }
}
class Cricket extends Game {
  initialize() {
    console.log('Cricket Game Initialized');
  }
  startPlay() {
    console.log('Cricket Game Started');
  }
  endPlay() {
    console.log('Cricket Game Finished');
  }
}
class Football extends Game {
  initialize() {
    console.log('Football Game Initialized');
  }
  startPlay() {
    console.log('Football Game Started');
  }
  endPlay() {
    console.log('Football Game Finished');
  }
}
const cricket = new Cricket();
cricket.play();
// Cricket Game Initialized
// Cricket Game Started
// Cricket Game Finished
const football = new Football();
football.play();
// Football Game Initialized
// Football Game Started
// Football Game Finished

在这个例子中，Game类定义了一个模板方法play，其中包含了初始化、开始和结束游戏的步骤。具体的游戏类（如Cricket和Football）通过重写这些步骤来实现不同的游戏逻辑。

总结

通过使用设计模式，我们可以提高代码的可维护性、可扩展性和可读性。在JavaScript中，常见的设计模式包括单例模式、工厂模式、观察者模式、策略模式、代理模式、装饰者模式、命令模式、适配器模式、外观模式和模板方法模式。每种设计模式都有其独特的应用场景和优势，可以根据具体的需求选择合适的模式来解决问题。

js设计模式怎么写

相关问答FAQs：