本篇主要介绍了web前端设计模式面试题，希望对web前端的学习及前端面试有所帮助。

设计模式不是针对某个框架的，而是针对某类问题或某类需求提出的，因此有广泛的适用性。

我们学习设计模式不仅要学习理论，还要学习如何解决实际工作中的问题，所以在面试中，设计模式通常是结合某类需求考察的。

1、什么是设计模式？

设计模式是一套反复使用的并且经过分类编目的代码设计经验总结。

2、设计模式有哪些？

GOF提出的23种设计模式，分为三大类。

创建型模式，共5种，分别是工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。

结构型模式，共7种，分别是适配器模式、装饰器模式、代理模式、外观模式桥接模式、组合模式、享元模式。

行为型模式，共11种，分别是策略模式、模板方法模式、观察者模式、选代子模式、責任链模式、命令模式、备忘录模弌、状态模式、访问者模式、中介者模式、解释器模式。

在前端开发中，有些特定的模式不太适用。当然，有些适用于前端的模式并未包含在这23种设计模式中，如委托模式、节流模式等。

3、你用过哪些设计模式？

工厂模式。

它的优点是可以使用工厂方法而不是new关键字消除对象间的耦合。同时，将所有实例化的代码封装在一起，实现代码重复。工厂模式解决了重复创建对象的问题。

function factory(name, age){var user= new Object();user.name= name; user age= age；user. getIntro= function(){return this.name+'\' s age is ' +this.age；} return user ;var xm= factory（ 'xiao ming',20）;console. log(xm. getIntro() )  // xiao ming's age is 20

4、工厂模式的概念是什么？

其概念如下：

工厂模式需要3个基本步骤，原料投入、加工过程以及成品出厂，例如以下代码。

function playerFactory (username){var user= new object ();user .username = username;return user ;}var xm = playerFactory( 'xiao ming ')

player Factory函数中传递的参数就是“基本原料的投入”。从 var user= new Object()直到return之前，都属于“加工过程”。最后的 return就如同“成品出厂”。

5、工厂模式的缺陷是什么？

缺陷如下

（1）没有使用new关键字，在创建对象的过程中，看不到构造函数实例化的过程。

（2）每个实例化的对象都创建相应的变量和函数，因此需要更多的空间进行属性和方法的存储，从而降低了性能，造成资源的浪费。

6、说说你对MC架构和MwWM架构的理解。

在经典的MVC架构中，包含3个部分，即模型( Model）、视图(view)和控制器(Controller)。控制器可以访问视图，让其更新。控制器可以访问模型，更新数据。视图可以访问模型，获取数据渲染页面。

在MwVM架构中，包含3个部分，即模型( Model)、视图(View)和视图模型(View Model)。视图模型负责视图与模型之间的信息转换，通过欻据双向绑定使视图与模型之间的数据得以传递。

例如代表性的框架 Angular，它通过数据绑定，将模型中的数据映射到视图中，通过事件监听器（ event listener），将视图改变的数据存储在模型内

7、什么是事件代理？

事件代理（ Event Delegation）又称为事件委托，是 JavaScript中常用的绑定事件的方式。顾名思义，“事件代理”就是把原本需要绑定到子元素的事件委托给父元素，让父元素承担事件监听的工作。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处有很多，如减少事件数量，预测未来元素，避免内存外泄等，有利于提高性能。

8、请说说工厂模式的优缺点。

优点如下：

（1）一个调用者想创建一个对象，只要知道它的名称即可。

（2）扩展性高，如果想增加一个产品，只要扩展一个工厂类即可。

（3）屏蔽产品的具体实现，调用者只需关心产品的接口。

缺点如下：

每次增加一个产品时，都需要増加一个具体类和对象实现工厂，使得系统中类的个数成倍增加，在一定程度上增加了系统的复杂度，同时也增加了系统具体类的依赖。

9、单例模式的优缺点是什么？

优点如下：

（1）提供了对唯一实例的受控访问。

（2）由于在系统内存中只存在一个对象，因此可以节约系统资源，对于一些需要频繁创建和销毁的对象，单例模式无疑能够提高系统的性能。

（3）可以根据实际情况的需要，在单例模式的基础上扩展为双例模式和多例模式。

缺点如下：

（1）单例类的职责过重，里面的代码可能会过于复杂，在一定程度上违背了“单职责原则”。

（2）如果实例化的对象长时间不利用，系统会认为它是垃圾而进行回收，这将导致对象状态的丢失。

10、使用工厂模式最主要的好处是什么？

好处如下：

（1）把对象的创建集中在一个地方（工厂），在增加新的对象类型的时候，只需要改变工厂方法。当不使用工厂模式的时候，改变创建方式则需要四处修改，增加维护成本。

（2）新的对象类型可以很容易地添加进来。

（3）只需要关心工厂方法返回的对象，不必关心具体创建的细节。

11、什么是代理模式？

代理（ proxy）模式，即为目标对象指定代理对象，并由代理对象代替目标对象控制客户端对目标对象的访问。

12、原型模式和单例模式的区别是什么？

单例模式就是保证一个类只存在一个实例，只初始化一次，第一次完成初始化以后，在重复使用的时候，返回的都是这个实例，而不是新建一个实例。如果实例化的对象里面的属性值已经改变，就不能用单例了，只能通过原型模式重新实例化，原型模式允许多次创建实例对象。

13、组合模式的适用性指的是什么？

组合模式是表示对象的“部分-整体”层次结构的一种设计模式；组合模式将对象组合成树状结构以表示“部分-整体”的层次结构，组合模式使得用户对单个对象和组合对象的使用具有一致性。

14、什么时候要使用组合模式？

在以下情况下使用组合模式

（1）当想表示对象的“部分-整体”层次结构（树状结构）时可以使用组合模式

（2）在希望用户忽略组合对象与单个对象的不同并且统一地使用组合结构中的所有对象时使用组合模式。

15、设计模式都有哪些问题？

设计模式可以让你用前人总结的经典场景来分析实现某些功能时需要什么角色如何合理地设置接口、提高系统各个层次的独立性、降低耦合度等。然而，这也不是绝对的。不论是设计模式、还是开发框架，都是为了有效开发而出现的，但常常出现“杀鸡用牛刀”的情况，所以学的时候最好要多对比，从不同角度理解与测试，不能照搬书中的内容，这不是设计模式的精髓。

16、你在开发中都用到了哪些设计模式？它们的作用分别是什么？

毎个模式都描述了一个在开发环境中不断岀现的问题，然后描述了该问题的解决方案。用这种方式，可以无限次地使用那些已有的解决方案，无须再做重复、相同的工作。

开发中常用到的模式如下。

singleton：单例模式，用来减少重复创建对象。

factory：工厂模式，用来解耦。

iterator：迭代器模式，用来遍历对象。

observer：观察者模式，用来收发消息。

templete：模板模式，用来避免执行相同的操作。

strategy：策略模式，用来定义算法等。

我是小职，记得找我

✅ 解锁高薪工作

✅ 免费获取基础课程·答疑解惑·职业测评