掌握前端5大常用设计模式

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

一、工厂模式

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

1. 简单工厂

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

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

let UserFactory = function (role) {
 function SuperAdmin() {
 this.name = "超级管理员",
 this.viewPage = ['首页', '用户管理', '订单管理', '应用管理', '权限管理']
 }
 function Admin() {
 this.name = "管理员",
 this.viewPage = ['首页', '订单管理', '应用管理']
 }
 function NormalUser() {
 this.name = '普通用户',
 this.viewPage = ['首页', '订单管理']
 }
 switch (role) {
 case 'superAdmin':
 return new SuperAdmin();
 break;
 case 'admin':
 return new Admin();
 break;
 case 'user':
 return new NormalUser();
 break;
 default:
 throw new Error('参数错误, 可选参数:superAdmin、admin、user');
 }
}
//调用
let superAdmin = UserFactory('superAdmin');
let admin = UserFactory('admin')
let normalUser = UserFactory('user')

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

优点：简单工厂的优点在于，你只需要一个正确的参数，就可以获取到你所需要的对象，而无需知道其创建的具体细节;

缺点：在函数内包含了所有对象的创建逻辑(构造函数)和判断逻辑的代码，每增加新的构造函数还需要修改判断逻辑代码，我们的对象不是上面的3个而是30个或更多时，这个函数会成为一个庞大的超级函数，便得难以维护，简单工厂只能作用于创建的对象数量较少，对象的创建逻辑不复杂时使用;

2. 工厂方法

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

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

//安全模式创建的工厂方法函数 
let UserFactory = function(role) { 
 if(this instanceof UserFactory) { 
 var s = new this[role](); 
 return s; 
 } else { 
 return new UserFactory(role); 
 } 
} 
//工厂方法函数的原型中设置所有对象的构造函数 
UserFactory.prototype = { 
 SuperAdmin: function() { 
 this.name = "超级管理员", 
 this.viewPage = ['首页', '用户管理', '订单管理', '应用管理', '权限管理'] 
 }, 
 Admin: function() { 
 this.name = "管理员", 
 this.viewPage = ['首页', '订单管理', '应用管理'] 
 }, 
 NormalUser: function() { 
 this.name = '普通用户', 
 this.viewPage = ['首页', '订单管理'] 
 } 
} 
//调用 
let superAdmin = UserFactory('SuperAdmin'); 
let admin = UserFactory('Admin') 
let normalUser = UserFactory('NormalUser') 

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

二、单例模式

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

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

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

优点：

可以用来划分命名空间，减少全局变量的数量

可以被实例化，且实例化一次，再次实例化生成的也是第一个实例

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

var single = (function(){ 
 var unique; 
 function getInstance(){ 
 // 如果该实例存在，则直接返回，否则就对其实例化 
 if( unique === undefined ){ 
 unique = new Construct(); 
 } 
 return unique; 
 } 
 function Construct(){ 
 // ... 生成单例的构造函数的代码 
 } 
 return { 
 getInstance : getInstance 
 } 
})(); 

总结：在上面的代码中，我们可以使用single.getInstance来获取到单例，并且每次调用均获取到同一个单例，在我们平时的开发中，我们也经常会用到这种模式，比如当我们单击登录按钮的时候，页面中会出现一个登录框，而这个浮窗是唯一的，无论单击多少次登录按钮，这个浮窗只会被创建一次，因此这个登录浮窗就适合用单例模式。

三、代理模式

代理模式主要是为其他对象提供一种代理以控制对这个对象的访问，主要解决在直接访问对象时带来的问题，比如说：要访问的对象在远程的机器上，在面向对象系统中，有些对象由于某些原因(比如对象创建开销很大，或者某些操作需要安全控制，或者需要进程外的访问)，直接访问会给使用者或者系统结构带来很多麻烦，我们可以在访问此对象时加上一个对此对象的访问层。

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

(function(){ 
 // 示例代码 
 
 // 目标对象，是真正被代理的对象 
 function Subject(){} 
 Subject.prototype.request = function(){}; 
 
 /** 
 * 代理对象 
 * @param {Object} realSubject [持有被代理的具体的目标对象] 
 */ 
 function Proxy(realSubject){ 
 this.realSubject = readSubject; 
 } 
 Proxy.prototype.request = function(){ 
 this.realSubject.request(); 
 }; 
}()); 

总结：在上面的代码中，Proxy可以控制对真正被代理对象的一个访问，在代理模式中，比较常见的就是虚拟代理，虚拟代理用于控制对那种创建开销很大的本体的访问，它会把本体的实例化推迟到有方法被调用的时候，比如说，现在我们假设PublicLibrary的实例化很慢，不能在网页加载的时候立即完成，我们可以为其创建一个虚拟代理，让它把PublicLibrary的实例化推迟到必要的时候，比如说我们在前端中经常用到的图片懒加载，就可以用虚拟代理;

四、观察者模式

如果大家学过一些像vue，react这些框架，相信大家对观察者模式一定很熟悉，现在很多mvvm框架都用到了观察者模式这个思想，观察者模式又叫做发布—订阅模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知和更新，观察者模式提供了一个订阅模型，其中对象订阅事件并在发生时得到通知，这种模式是事件驱动的编程基石，它有利益于良好的面向对象的设计

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

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

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

实现：

指定好谁充当发布者;

给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者;

发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数。

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

document.body.addEventListener("click", function() { 
 alert("Hello World") 
}，false ) 
document.body.click() //模拟用户点击 

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

五、策略模式

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

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

function Price(personType, price) { 
 //vip 5 折 
 if (personType == 'vip') { 
 return price * 0.5; 
 } 
 else if (personType == 'old'){ //老客户 3 折 
 return price * 0.3; 
 } else { 
 return price; //其他都全价 
 } 
} 

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

// 对于vip客户 
function vipPrice() { 
 this.discount = 0.5; 
} 
 
vipPrice.prototype.getPrice = function(price) { 
 return price * this.discount; 
} 
// 对于老客户 
function oldPrice() { 
 this.discount = 0.3; 
} 
 
oldPrice.prototype.getPrice = function(price) { 
 return price * this.discount; 
} 
// 对于普通客户 
function Price() { 
 this.discount = 1; 
} 
 
Price.prototype.getPrice = function(price) { 
 return price ; 
} 
// 上下文，对于客户端的使用 
function Context() { 
 this.name = ''; 
 this.strategy = null; 
 this.price = 0; 
} 
 
Context.prototype.set = function(name, strategy, price) { 
 this.name = name; 
 this.strategy = strategy; 
 this.price = price; 
} 
Context.prototype.getResult = function() { 
 console.log(this.name + ' 的结账价为: ' + this.strategy.getPrice(this.price)); 
} 
var context = new Context(); 
var vip = new vipPrice(); 
context.set ('vip客户', vip, 200); 
context.getResult(); // vip客户 的结账价为: 100 
var old = new oldPrice(); 
context.set ('老客户', old, 200); 
context.getResult(); // 老客户 的结账价为: 60 
var Price = new Price(); 
context.set ('普通客户', Price, 200); 
context.getResult(); // 普通客户 的结账价为: 200 

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

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