前端面试常问的设计模式及其应用场景解析

前端面试常问的设计模式及其应用场景解析

引用

CSDN

1.

https://blog.csdn.net/Huang020101/article/details/140716531

设计模式是软件开发中的重要概念，它提供了一套经过验证的解决方案，用于解决软件设计中的常见问题。在前端开发领域，掌握常用的设计模式对于提升代码质量、增强代码可维护性和可扩展性具有重要意义。本文将详细介绍前端开发中常用的几种设计模式，并结合实际应用场景进行解析，帮助读者更好地理解和运用这些模式。

基础知识

1.1 设计模式定义

设计模式是一种在特定情境下解决问题的标准化方法。它描述了一个问题以及该问题的解决方案，并且提供了一种重用这一解决方案的方式。设计模式不是完成的代码，而是指导思想。

1.2 设计模式分类

• 创建型模式 ：关注于对象的创建方式。
• 结构型模式 ：关注于如何组合类或对象形成更大的结构。
• 行为型模式 ：关注于对象间的职责分配和通信。

创建型模式

2.1 单例模式

• 定义 ：确保一个类只有一个实例，并提供一个全局访问点。
• 应用场景 ：配置管理、日志记录、浏览器窗口对象等。
• 示例代码 :

const Singleton = (function () {
  let instance;
  function createInstance() {
    return { counter: 0, incrementCounter: function () { this.counter++; } };
  }
  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

2.2 工厂模式

• 定义 ：定义一个创建产品对象的接口，让子类决定实例化哪一个类。
• 应用场景 ：组件创建、模块加载等。
• 示例代码 :

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

2.3 抽象工厂模式

• 定义 ：提供一个接口，用于创建一系列相关或相互依赖的对象，而无需指定它们具体的类。
• 应用场景 ：多主题样式管理、UI组件库等。
• 示例代码 :

abstract class AbstractFactory {
  createButton() {}
  createInput() {}
}

class ModernFactory extends AbstractFactory {
  createButton() {
    return new ModernButton();
  }
  createInput() {
    return new ModernInput();
  }
}

结构型模式

3.1 适配器模式

• 定义 ：允许一个类接口与另一个不兼容的类接口协同工作。
• 应用场景 ：第三方库集成、跨框架组件复用等。
• 示例代码 :

class ThirdPartyComponent {
  specificRequest() {
    return 'Third-party data';
  }
}

class Adapter extends ThirdPartyComponent {
  request() {
    return `Adapter: (translated) ${this.specificRequest()}`;
  }
}

3.2 装饰器模式

• 定义 ：动态地给一个对象添加一些额外的职责。
• 应用场景 ：权限控制、日志记录等。
• 示例代码 :

function Component() {
  this.operation = function () {
    console.log('Concrete component');
  };
}

function Decorator(component) {
  this.component = component;
}

Decorator.prototype = Object.create(Component.prototype);

Decorator.prototype.operation = function () {
  this.component.operation();
  console.log('Decorator');
};

const decorator = new Decorator(new Component());
decorator.operation();

3.3 组合模式

• 定义 ：将对象组合成树形结构以表示“部分-整体”的层次结构。
• 应用场景 ：文件系统、UI组件树等。
• 示例代码 :

abstract class Component {
  constructor(name) {
    this.name = name;
  }
  add(component) {}
  remove(component) {}
  display(level) {}
}

class Leaf extends Component {
  display(level) {
    console.log(`${' '.repeat(level * 2)}Leaf: ${this.name}`);
  }
}

class Composite extends Component {
  constructor(name) {
    super(name);
    this.children = [];
  }

  add(component) {
    this.children.push(component);
  }

  remove(component) {
    const index = this.children.indexOf(component);
    if (index > -1) {
      this.children.splice(index, 1);
    }
  }

  display(level) {
    console.log(`${' '.repeat(level * 2)}Composite: ${this.name}`);
    this.children.forEach(child => child.display(level + 1));
  }
}

// Example usage
const root = new Composite('root');
const branch1 = new Composite('branch1');
const branch2 = new Composite('branch2');

root.add(branch1);
root.add(branch2);

branch1.add(new Leaf('leaf1'));
branch1.add(new Leaf('leaf2'));

branch2.add(new Leaf('leaf3'));
branch2.add(new Leaf('leaf4'));

root.display(0);

行为型模式

4.1 观察者模式

• 定义 ：定义对象间的一种一对多依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新。
• 应用场景 ：事件处理、状态监测等。
• 示例代码 :

class Subject {
  constructor() {
    this.observers = [];
  }

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

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

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

class Observer {
  update(data) {
    console.log(`Observer received: ${data}`);
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

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

subject.notify('Hello, observers!');

4.2 策略模式

• 定义 ：定义一系列算法，把它们一个个封装起来，并且使它们可相互替换。
• 应用场景 ：支付方式选择、排序算法等。
• 示例代码 :

abstract class Strategy {
  execute(data) {
    throw new Error('Method not implemented.');
  }
}

class ConcreteStrategyA extends Strategy {
  execute(data) {
    return `Sorting with strategy A: ${data.sort().join(',')}`;
  }
}

class ConcreteStrategyB extends Strategy {
  execute(data) {
    return `Sorting with strategy B: ${data.reverse().join(',')}`;
  }
}

class Context {
  constructor(strategy) {
    this.strategy = strategy;
  }

  setStrategy(strategy) {
    this.strategy = strategy;
  }

  executeStrategy(data) {
    return this.strategy.execute(data);
  }
}

const context = new Context(new ConcreteStrategyA());
console.log(context.executeStrategy([1, 2, 3, 4]));

context.setStrategy(new ConcreteStrategyB());
console.log(context.executeStrategy([1, 2, 3, 4]));

4.3 命令模式

• 定义 ：将一个请求封装为一个对象，从而使你可用不同的请求对客户端进行参数化；对请求排队或记录请求日志，以及支持可撤销的操作。
• 应用场景 ：UI按钮操作、命令行工具等。
• 示例代码 :

abstract class Command {
  constructor(receiver) {
    this.receiver = receiver;
  }
  execute() {}
}

class ConcreteCommand extends Command {
  execute() {
    this.receiver.action();
  }
}

class Receiver {
  action() {
    console.log('Receiver: Action executed');
  }
}

class Invoker {
  constructor() {
    this.commands = [];
  }

  takeCommand(command) {
    this.commands.push(command);
  }

  placeCommands() {
    this.commands.forEach(command => command.execute());
  }
}

const invoker = new Invoker();
const receiver = new Receiver();
const concreteCommand = new ConcreteCommand(receiver);

invoker.takeCommand(concreteCommand);
invoker.placeCommands();

实战案例

5.1 案例1：单例模式

• 背景 ：实现一个全局的配置管理器。
• 实现 ：使用闭包和构造函数相结合的方式创建单例。
• 应用场景 ：前端项目中的配置管理、全局事件监听等。

5.2 案例2：观察者模式

• 背景 ：实现一个简单的事件监听器。
• 实现 ：使用数组存储观察者，并在事件触发时遍历执行。
• 应用场景 ：DOM事件绑定、自定义事件发布订阅等。

总结与展望

设计模式是软件工程中的重要组成部分，通过学习和应用这些模式，我们能够编写出更加健壮、易于维护和扩展的代码。前端开发领域中的设计模式不仅限于以上介绍的内容，还有许多其他模式可以探索和应用，比如迭代器模式、代理模式等。随着新技术的发展，未来可能会出现更多适用于前端场景的设计模式。

结语

本文对前端开发中常用的几种设计模式进行了详细的介绍，并提供了相应的示例代码和应用场景。希望本文能够帮助读者更好地理解和应用这些设计模式，提升编程技能和代码质量。