掌握前端5大常用设计模式，瞬间高大上(3)

实现：

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

下面举个例子，比如我们给页面中的一个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 

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

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

（编辑：ASP站长网）