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

奔赴架构师的小白

已于 2024-07-26 15:18:13 修改

阅读量555

点赞数 21

文章标签：前端面试设计模式

于 2024-07-26 15:16:59 首次发布

本文链接：https://blog.csdn.net/Huang020101/article/details/140716531

版权

引言

随着前端开发技术的不断进步，设计模式在前端领域的应用越来越广泛。设计模式是一种经过验证的、可复用的解决方案，用来解决软件设计中的常见问题。掌握常用的设计模式对于提升代码质量、增强代码可维护性和可扩展性有着重要意义。本文将详细介绍前端开发中常用的几种设计模式，并结合实际应用场景进行解析，希望能帮助你更好地理解和运用这些模式。

第一部分：基础知识

1.1 设计模式定义

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

1.2 设计模式分类

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

第二部分：创建型模式

2.1 单例模式

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

示例代码:

1const Singleton = (function () {
2  let instance;
3  function createInstance() {
4    return { counter: 0, incrementCounter: function () { this.counter++; } };
5  }
6  return {
7    getInstance: function () {
8      if (!instance) {
9        instance = createInstance();
10      }
11      return instance;
12    }
13  };
14})();

2.2 工厂模式

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

示例代码:

1function createProduct(type) {
2  switch (type) {
3    case 'A':
4      return new ProductA();
5    case 'B':
6      return new ProductB();
7    default:
8      throw new Error('Invalid product type');
9  }
10}

2.3 抽象工厂模式

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

示例代码:

1abstract class AbstractFactory {
2  createButton() {}
3  createInput() {}
4}
5
6class ModernFactory extends AbstractFactory {
7  createButton() {
8    return new ModernButton();
9  }
10  createInput() {
11    return new ModernInput();
12  }
13}

第三部分：结构型模式

3.1 适配器模式

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

示例代码:

1class ThirdPartyComponent {
2  specificRequest() {
3    return 'Third-party data';
4  }
5}
6
7class Adapter extends ThirdPartyComponent {
8  request() {
9    return `Adapter: (translated) ${this.specificRequest()}`;
10  }
11}

3.2 装饰器模式

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

示例代码:

1function Component() {
2  this.operation = function () {
3    console.log('Concrete component');
4  };
5}
6
7function Decorator(component) {
8  this.component = component;
9}
10
11Decorator.prototype = Object.create(Component.prototype);
12
13Decorator.prototype.operation = function () {
14  this.component.operation();
15  console.log('Decorator');
16};
17
18const decorator = new Decorator(new Component());
19decorator.operation();

3.3 组合模式

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

示例代码:

1abstract class Component {
2  constructor(name) {
3    this.name = name;
4  }
5  add(component) {}
6  remove(component) {}
7  display(level) {}
8}
9
10class Leaf extends Component {
11  display(level) {
12    console.log(`${' '.repeat(level * 2)}Leaf: ${this.name}`);
13  }
14}
15
16class Composite extends Component {
17  constructor(name) {
18    super(name);
19    this.children = [];
20  }
21
22  add(component) {
23    this.children.push(component);
24  }
25
26  remove(component) {
27    const index = this.children.indexOf(component);
28    if (index > -1) {
29      this.children.splice(index, 1);
30    }
31  }
32
33  display(level) {
34    console.log(`${' '.repeat(level * 2)}Composite: ${this.name}`);
35    this.children.forEach(child => child.display(level + 1));
36  }
37}
38
39// Example usage
40const root = new Composite('root');
41const branch1 = new Composite('branch1');
42const branch2 = new Composite('branch2');
43
44root.add(branch1);
45root.add(branch2);
46
47branch1.add(new Leaf('leaf1'));
48branch1.add(new Leaf('leaf2'));
49
50branch2.add(new Leaf('leaf3'));
51branch2.add(new Leaf('leaf4'));
52
53root.display(0);

第四部分：行为型模式

4.1 观察者模式

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

示例代码:

1class Subject {
2  constructor() {
3    this.observers = [];
4  }
5
6  addObserver(observer) {
7    this.observers.push(observer);
8  }
9
10  removeObserver(observer) {
11    const index = this.observers.indexOf(observer);
12    if (index > -1) {
13      this.observers.splice(index, 1);
14    }
15  }
16
17  notify(data) {
18    this.observers.forEach(observer => observer.update(data));
19  }
20}
21
22class Observer {
23  update(data) {
24    console.log(`Observer received: ${data}`);
25  }
26}
27
28const subject = new Subject();
29const observer1 = new Observer();
30const observer2 = new Observer();
31
32subject.addObserver(observer1);
33subject.addObserver(observer2);
34
35subject.notify('Hello, observers!');

4.2 策略模式

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

示例代码:

1abstract class Strategy {
2  execute(data) {
3    throw new Error('Method not implemented.');
4  }
5}
6
7class ConcreteStrategyA extends Strategy {
8  execute(data) {
9    return `Sorting with strategy A: ${data.sort().join(',')}`;
10  }
11}
12
13class ConcreteStrategyB extends Strategy {
14  execute(data) {
15    return `Sorting with strategy B: ${data.reverse().join(',')}`;
16  }
17}
18
19class Context {
20  constructor(strategy) {
21    this.strategy = strategy;
22  }
23
24  setStrategy(strategy) {
25    this.strategy = strategy;
26  }
27
28  executeStrategy(data) {
29    return this.strategy.execute(data);
30  }
31}
32
33const context = new Context(new ConcreteStrategyA());
34console.log(context.executeStrategy([1, 2, 3, 4]));
35
36context.setStrategy(new ConcreteStrategyB());
37console.log(context.executeStrategy([1, 2, 3, 4]));

4.3 命令模式

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

示例代码:

1abstract class Command {
2  constructor(receiver) {
3    this.receiver = receiver;
4  }
5  execute() {}
6}
7
8class ConcreteCommand extends Command {
9  execute() {
10    this.receiver.action();
11  }
12}
13
14class Receiver {
15  action() {
16    console.log('Receiver: Action executed');
17  }
18}
19
20class Invoker {
21  constructor() {
22    this.commands = [];
23  }
24
25  takeCommand(command) {
26    this.commands.push(command);
27  }
28
29  placeCommands() {
30    this.commands.forEach(command => command.execute());
31  }
32}
33
34const invoker = new Invoker();
35const receiver = new Receiver();
36const concreteCommand = new ConcreteCommand(receiver);
37
38invoker.takeCommand(concreteCommand);
39invoker.placeCommands();