前台常用的几种设计模式

今天主要详情一下我们平时会经常用到的设计模式，设计模式总的来说有23种。而设计模式在前台中又该怎样运用呢，接下来主要比照较前台中常见的设计模式做一个简单的详情。

image

设计模式的定义

设计模式是在面向对象软件设计过程中针对特定问题的简洁而优雅的处理方案。在不同的编程语言中，对设计模式的实现其实是可能会有区别的。

比方java和javascript，在Java这种静态编译型语言中，无法动态地给已存在的对象增加职责，所以一般通过包装类的方式来实现装饰者模式。但在JavaScript这种动态解释型语言中，给对象动态增加职责是再简单不过的事情。这就造成了JavaScript语言的装饰者模式不再关注于给对象动态增加职责，而是关注于给函数动态增加职责。

image

本篇将详情以下几个比较常见的设计模式：

• 工厂模式
• 单例模式
• 代理商模式
• 观察者模式
• 策略模式

image

一、工厂模式

工厂模式是用来创立对象的一种最常用的设计模式，不暴露创立对象的具体逻辑，而是将逻辑封装在一个函数中，那么这个函数即可以被视为一个工厂，工厂模式根据笼统程度的不同可以分为：简单工厂，工厂方法和笼统工厂，接下来，将对简单工厂和工厂方法在JavaScript中的运用举个简单的例子：

image

1. 简单工厂

简单工厂模式又叫静态工厂模式，由一个工厂对象决定创立某一种产品对象类的实例，主要用来创立同一类对象

比方说，在实际的项目中，我们常常需要根据客户的权限来渲染不同的页面，高级权限的客户所拥有的页面有些是无法被低级权限的客户所查看，所以我们可以在不同权限等级客户的构造函数中，保存该客户能够看到的页面。

image

总结：在上面的例子中，UserFactory就是一个简单工厂，在该函数中有3个构造函数分别对应不同的权限的客户，当我们调用工厂函数时，只要要传递superAdmin, admin, user这三个可选参数中的一个获取对应的实例对象

image

• 优点：简单工厂的优点在于，你只要要一个正确的参数，即可以获取到你所需要的对象，而无需知道其创立的具体细节;
• 缺点：在函数内包含了所有对象的创立逻辑(构造函数)和判断逻辑的代码，每添加新的构造函数还需要修改判断逻辑代码，我们的对象不是上面的3个而是30个或者更多时，这个函数会成为一个庞大的超级函数，便得难以维护，简单工厂只能作用于创立的对象数量较少，对象的创立逻辑不复杂时使用。

image

2. 工厂方法

工厂方法模式的本意是将实际创立对象的工作延迟到子类中，这样核心类就变成了笼统类，但是在JavaScript中很难像传统面向对象那样去实现创立笼统类，所以在JavaScript中我们只要要参考它的核心思想就可，我们可以将工厂方法看作是一个实例化对象的工厂类

比方说上面的例子，我们用工厂方法可以这样写，工厂方法我们只把它看作是一个实例化对象的工厂，它只做实例化对象这一件事情，我们采用安全模式创立对象

image

总结：在简单工厂中，假如我们新添加加一个客户类型，需要修改两个地方的代码，一个是添加新的客户构造函数，一个是在逻辑判断中添加对新的客户的判断，而在笼统工厂方法中，我们只要要在UserFactory.prototype中增加即可以啦。

image

二、单例模式

定义：是保证一个类只有一个实例，并且提供一个访问它的全局访问点。

需求：少量对象我们往往只要要一个，比方线程池、全局缓存、浏览器中的window对象、登录浮窗等。

实现：用一个变量标识当前能否已经为某个类创立过对象，假如是，则在下一次获取这个类的实例时，直接返回之前创立的对象。

优点：

• 可以用来划分命名空间，减少全局变量的数量
• 可以被实例化，且实例化一次，再次实例化生成的也是第一个实例

下面举个例子，在js中，我们可以使用闭包来创立实现这种模式：

image

总结：在上面的代码中，我们可以使用single.getInstance来获取到单例，并且每次调用均获取到同一个单例。

在我们平常的开发中，我们也经常会用到这种模式，比方当我们单击登录按钮的时候，页面中会出现一个登录框，而这个浮窗是唯一的，无论单击多少次登录按钮，这个浮窗只会被创立一次，因而这个登录浮窗就适合用单例模式。

image

三、代理商模式

代理商模式主要是为其余对象提供一种代理商以控制对这个对象的访问，主要处理在直接访问对象时带来的问题。

比方说：要访问的对象在远程的机器上，在面向对象系统中，有些对象因为某些起因(比方对象创立开销很大，或者者某些操作需要安全控制，或者者需要进程外的访问)，直接访问会给使用者或者者系统结构带来很多麻烦，我们可以在访问此对象时加上一个对此对象的访问层。

image

代理商模式最基本的形式是对访问进行控制，代理商对象和另一个对象(本体)实现的是同样的接口。

实际上工作还是本体在做，它才是负责执行所分派的任务的那个对象或者类，代理商对象所做的不外乎节制对本体的访问，代理商对象并不会在另一对象的基础上增加方法或者修改其方法，也不会简化那个对象的接口，它实现的接口与本体完全相同，所有对它进行的方法调用都会被传递给本体。

image

总结：在上面的代码中，Proxy可以控制对真正被代理商对象的一个访问。在代理商模式中，比较常见的就是虚拟代理商，虚拟代理商用于控制对那种创立开销很大的本体的访问，它会把本体的实例化延迟到有方法被调用的时候。

比方说，现在我们假设PublicLibrary的实例化很慢，不能在网页加载的时候立即完成，我们可以为其创立一个虚拟代理商，让它把PublicLibrary的实例化延迟到必要的时候，比方说我们在前台中经常用到的图片懒加载，即可以用虚拟代理商;

image

四、观察者模式

假如大家学过少量像vue，react这些框架，相信大家对观察者模式肯定很熟习，现在很多mvvm框架都用到了观察者模式这个思想，观察者模式又叫做发布—订阅模式。

它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知和升级，观察者模式提供了一个订阅模型，其中对象订阅事件并在发生时得到通知，这种模式是事件驱动的编程基石，它有利益于良好的面向对象的设计

image

定义：对象间的一种一对多的依赖关系。

需求：当一个对象的状态发生变化时，所有依赖于他的对象都将得到通知。

优点：时间上的解耦，对象之间的解耦。

实现：

• 指定好谁充任发布者;
• 给发布者增加一个缓存列表，用于存放回调函数以便通知订阅者;
• 发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数。

image

下面举个例子，比方我们给页面中的一个dom节点绑定一个事件，其实即可以看做是一种观察者模式：

image

总结：在上面的例子中，需要监听客户点击 document.body 的动作，但是我们是没办法预知客户将在什么时候点击的，因而我们订阅了 document.body 的 click 事件，当 body 节点被点击时，body 节点便会向订阅者发布 “Hello World” 消息。

image

五、策略模式

策略模式指的是定义少量列的算法，把他们一个个封装起来，目的就是将算法的使用与算法的实现分离开来，避免多重判断条件，更具备扩展性。

下面也是举个例子，现在超市有活动，vip为5折，老用户3折，普通顾客没折，计算最后需要支付的金额，假如不使用策略模式，我们的代码可能和下面一样：

image

在上面的代码中，我们需要很多个判断，假如有很多优惠，我们又需要增加很多判断，这里已经违反了刚才说的设计模式的六大准则中的开闭准则了，假如使用策略模式，我们的代码可以这样写：

imageimage

总结：在上面的代码中，通过策略模式，使得用户的折扣与算法解藕，又使得修改跟扩展能独立的进行，不影到用户端或者其余算法的使用。

当我们的代码中有很多个判断分支，每一个条件分支都会引起该“类”的特定行为以不同的方式作出改变，这个时候即可以使用策略模式，可以改进我们代码的质量，也更好的可以进行单元测试。

若有不对，欢迎指正。假如对你有所帮助还请您转发和点赞。谢谢

我是一名前台工程师，欢迎大家一起来交流

image