前端面试必备 | 设计模式篇（P1-10）

1. 什么是设计模式，为什么需要它们？

设计模式是针对特定问题的经过反复验证的解决方案，在软件开发领域被广泛应用。 它是对软件结构、行为或交互等方面的一种通用思路和最佳实践总结，是对编程过程中反复出现的问题所提取出来的公共解决方案。

需要设计模式的原因在于

• 首先，它能够提高代码重用性，能够快速构建出相似功能的代码。
• 其次，设计模式能够将代码进行模块化分解，更加易于维护和扩展。
• 此外，设计模式能够提高程序的可读性和可靠性，让程序员能够更好地理解和应对各种场景下的问题。

总结起来，设计模式不仅能够提高软件开发的效率和质量，还能够降低开发成本并减少出错机会，因此被广泛应用于软件开发过程中。

2. 可以列举几个常用的前端设计模式吗？

• MVC模式 - 将应用程序分为三个组件：模型（数据处理）、视图（UI）和控制器（逻辑层）。
• MVVM模式 - 将MVC中的控制器分为绑定器和视图模型两部分，使视图与数据绑定更简单。
• 观察者模式 - 当被观察对象状态改变时通知所有观察者。
• 工厂模式 - 通过工厂类创建对象，避免使用new关键字直接创建对象。
• 单例模式 - 确保只有一个实例存在的设计模式。
• 装饰器模式 - 动态地向对象添加新的行为，同时保持与原始类的接口兼容性。
• 适配器模式 - 允许不兼容的接口之间进行通信。

3. 简述MVC、MVVM和MVP模式各自的特点和用途。

MVC、MVVM和MVP都是常见的软件架构模式，用于组织和管理应用程序的代码。 它们在不同的上下文中有着各自的特点和用途。

• MVC（Model-View-Controller）模式是最早提出的一种软件架构模式。它将应用程序分为三个主要部分：模型（Model）、视图（View）和控制器（Controller）。模型负责数据的存储和处理，视图负责展示数据给用户，控制器协调模型和视图之间的交互。MVC模式的优点是清晰的分离关注点，提高了代码的可维护性和可测试性。

• MVVM（Model-View-ViewModel）模式是基于MVC模式演变而来的，最早由微软的WPF框架推广。它引入了一个视图模型（ViewModel）层，负责处理视图和模型之间的通信。视图模型通过双向数据绑定将视图和模型关联起来，当模型数据发生变化时，视图会自动更新。MVVM的优点是提高了代码的可维护性和可测试性，减少了视图和模型之间的耦合。

• MVP（Model-View-Presenter）模式也是基于MVC模式演变而来的，常用于Android应用程序开发。它将视图和模型分离，并引入了一个中间层Presenter。Presenter负责处理视图和模型之间的交互，将视图的用户操作转发给模型进行处理，并将模型返回的数据更新到视图上。MVP模式的优点是解耦了视图和模型之间的关系，提高了代码的可测试性和可维护性。

总的来说，MVC、MVVM和MVP都是常见的软件架构模式，用于组织和管理应用程序的代码。选择哪种模式需要根据具体的应用场景和需求来考虑，以最适合项目的方式进行开发。

4. 在实际项目中常用的设计模式？请列举一下应用场景。

在实际项目中常用的设计模式有如下几种：

1. 单例模式（Singleton）：应用于需要保证全局只有一个实例的情况，例如数据库连接池、线程池。

2. 工厂模式（Factory）：应用于创建对象实例的场景，隐藏实际创建逻辑，提供一个统一的接口。

3. 观察者模式（Observer）：应用于一对多的依赖关系，当一个对象状态发生改变时，其依赖的对象会自动进行更新。

4. 适配器模式（Adapter）：应用于将一个类的接口转换成客户端所期望的另一种接口，常用于旧代码的升级与兼容。

5. 策略模式（Strategy）：应用于根据不同的策略做出不同的处理，例如支付方式的选择、排序算法的选择等。

6. 装饰器模式（Decorator）：应用于为对象动态添加额外的功能，而不需要修改其原始代码。

7. 模板方法模式（Template Method）：应用于定义算法的骨架，将一些步骤的具体实现延迟到子类中。

8. 命令模式（Command）：应用于将请求封装成具体的对象，使得可以用不同的请求对客户进行参数化。

9. 迭代器模式（Iterator）：应用于提供一种方法来访问一个容器对象中的各个元素，而无需暴露其内部结构。

10. 组合模式（Composite）：应用于将对象组合成树形结构以表示部分-整体的层次结构，使得用户对单个对象和组合对象的使用具有一致性。

5. 解释一下单例模式的原理及在前端开发中的应用。

单例模式是一种常见的设计模式，用于限制一个类只能创建一个实例，并提供全局访问该实例的方法。

它的核心思想是通过对类的实例化进行控制，确保只能创建一个实例。 这样可以避免多次实例化相同类造成资源浪费的问题，并且能够方便地在不同的代码模块间共享该实例。

在前端开发中，单例模式有以下应用场景：

1. 全局状态管理：单例模式可以用于创建全局的状态管理对象，比如Vuex在Vue.js框架中就采用了单例模式。通过单例模式，我们可以在整个应用中共享和管理全局的状态，方便不同组件之间的数据通信和状态同步。

2. 缓存管理：单例模式也可以用于实现缓存管理的功能。比如，通过一个单例对象来缓存已经请求过的数据，可以在再次需要时直接从缓存中获取，避免重复请求网络资源。

3. 数据共享：在多个页面或组件之间需要共享数据的情况下，可以使用单例模式将数据存储在一个共享的对象中，实现数据的跨页面或跨组件共享。

4. 工具类的创建：有些特殊的工具类只需要一个实例即可，可以使用单例模式保证在整个应用中只有一个实例存在，避免重复创建。

总的来说，单例模式的原理是通过限制一个类只能创建一个实例，来实现全局共享的效果。在前端开发中，单例模式常用于全局状态管理、缓存管理、数据共享和工具类的创建等场景，以提高应用的性能和代码的维护性。

6. 如何在React中实现观察者模式？

在React中实现观察者模式可以借助React提供的Context API来实现。下面是一个简单的示例：

首先，创建一个Observer组件，它将负责存储观察者的列表，并提供注册和通知的方法：

import React, { createContext, useContext, useState } from 'react';

// 创建一个观察者上下文
const ObserverContext = createContext();

// 观察者组件
const Observer = ({ children }) => {
  const [observers, setObservers] = useState([]);

  // 注册观察者
  const registerObserver = (observer) => {
    setObservers((prevObservers) => [...prevObservers, observer]);
  };

  // 通知观察者
  const notifyObservers = (data) => {
    observers.forEach((observer) => observer(data));
  };

  return (
    <ObserverContext.Provider value={{ registerObserver, notifyObservers }}>
      {children}
    </ObserverContext.Provider>
  );
};

// 使用观察者的自定义钩子
const useObserver = () => useContext(ObserverContext);

export { Observer, useObserver };

然后，在需要使用观察者模式的组件中，可以通过useObserver钩子来注册观察者并接收通知：

import Reac