JavaScript设计模式之观察者模式（学习笔记）

  本文关键词：JavaScript设计模式，由笔耕文化传播整理发布。

设计模式(Design Pattern)对于软件开发来说其重要性不言而喻，代码可复用、可维护、可扩展一直都是软件工程中的追求！对于我一个学javascript的人来说，理解设计模式似乎有些困难，对仅切图、做少量交互效果的FE甚至可能不会用到，但是当你开始使用Angular/Backbone等框架的时候，就无法避免设计模式、MVC/MVVM这些东西了（反正我是伤脑筋）。

我学设计模式是刚开始接触编程大概三个月的时候，看一本书《大话设计模式》，里面用C#语言来写，我很无语，因为强类型的编程语言对于我这种写弱类型的毛头小子来说，似乎又有困难啊，于是我就学C#基础语法规则去了。。。今年年初我又学了JAVA的基础语法规则。。。然而我的初衷已经被抛弃在一旁，落上了厚厚的灰层。对于自学编程的我来说，不知道学习编程的先后顺序似乎吃亏不少，但是总要有开头的！

以上可直接跳过

先来说一下我对“观察者模式”的个人理解：观察者模式又称“发布-订阅（Publish/Subscribe）模式”，发布与订阅显然是两个不同对象的功能，比如RSS。知乎是一个发布者（发布一些对某方面问题的高赞同解答），我作为一个订阅者（在我的邮箱里面订阅了知乎的相关发布内容），我的同事以及我的老板都订阅了知乎，所以在这个模型中，有一个发布者，有三个订阅者。

在具体编程中，发布者有了新的内容，需要向订阅者推送数据，那么新的内容（state）、订阅者有哪些（observers）就是发布者需要包含的东西，谁订阅了、谁退订了则要对发布者中的订阅者列表进行更新。以下是发布者的相关信息代码解读：

Publisher(){ this.observers = []; this.state = ""; } Publisher.prototype.addOb=function(observer){ var flag = false; for (var i = this.observers.length - 1; i >= 0; i--) { if(this.observers[i]===observer){ flag=true; } }; if(!flag){ this.observers.push(observer); } return this; } Publisher.prototype.removeOb=function(observer){ var observers = this.observers; for (var i = 0; i < observers.length; i++) { if(observers[i]===observer){ observers.splice(i,1); } }; return this; } Publisher.prototype.notice=function(){ var observers = this.observers; for (var i = 0; i < observers.length; i++) { observers[i].update(this.state); }; }

以上在遍历observers数组的时候，可以使用数组类的filter、forEach等新特性来处理。第三个notice函数表示发布者有了新东西，然后对订阅者列表中的所有人通知他们我有新内容（state）了，你们拿去更新你们的邮箱吧。这里把内容传递给了每一个订阅者的update更新功能。

那么订阅者呢？订阅者很简单，只需要具有一个update功能即可（每一个订阅者update可能不一样，比如我是放进邮箱了，我的同事则将订阅的拿来，并且顺便把旧的删掉了，我的上司则将数据转发到Gmail去了）。下面是订阅者相关信息代码解读：

Subscribe(){ this.update = function(data){ console.log(data); }; }

实际上，因为每一个订阅者都有这个update，所以我们通常应该将其添加到构造器的原型上面，当对这个默认的update功能不满足要求的时候，可以为每一个订阅者的实例设置单独的update，比如将这个data发送给别人。最后咱们看看怎么应用。

oba = new Subscribe(), obb = new Subscribe(); var pba = new Publisher(); pba.addOb(oba); pba.addOb(obb); oba.update = function(state){ console.log(state+"hello!"); } obb.update = function(state){ console.log(state+"world!"); } pba.state = "open "; pba.notice();

大家看到，我们在最后对发布者手动设置了它的内容（state）并且要求他发出通知（notice）。在实际项目中，发布者的内容可能是从后台获取的也可能是从前台某地方输入的。然而发布者每次更新内容后又要手动调用通知是不是有点多余呢？既然更新了内容那就肯定要通知别人了啊。那我们就把内容的更新与发出通知进行绑定好了，看下面的代码：

Document Publisher(){ []; (){ return state; } (value){ state = value; this.notice(); } } Publisher.prototype.addOb=function(observer){ ; ) { observer){ flag=true; } }; flag){ this.observers.push(observer); } return this; } Publisher.prototype.removeOb=function(observer){ .observers; ) { observer){ observers.splice(i,1); } }; return this; } Publisher.prototype.notice=function(){ .observers; ) { observers[i].update( }; } Subscribe(){ (data){ console.log(data); }; } Subscribe(), obb = new Subscribe(); Publisher(); pba.addOb(oba); pba.addOb(obb); oba.update = function(state){ console.log(state); } obb.update = function(state){ console.log(state); } pba.setState(

对于以上的内容，或许并没有跟我们的项目中实际出现的问题有关，那我们就来代入这种设计模式，做一个例子：三个文本框ABC，其中A可编辑，B与C不可编辑且B的值是A的值加上后缀"@w3c.com",C的值是A的值加上前缀"ID-"。

Document用户名称：生成邮箱：生成ID： Publisher(obj){ []; (){ return state; } (value){ state = value; this.notice(); } obj; } Publisher.prototype.addOb=function(observer){ ; ) { observer){ flag=true; } }; flag){ this.observers.push(observer); } return this; } Publisher.prototype.removeOb=function(observer){ .observers; ) { observer){ observers.splice(i,1); } }; return this; } Publisher.prototype.notice=function(){ .observers; ) { observers[i].update(this.getState()); }; } Subscribe(obj){ obj; (data){ data; }; } )), obb )); )); pba.addOb(oba); pba.addOb(obb); oba.update = function(state){ ; } obb.update = function(state){ state; } pba.obj.addEventListener((){ pba.setState(this.value); });

在《大话设计模式》一书中，提到类似的情况：如果针对发布者内容而订阅者要做不同的事情呢？比如一个按钮和三个矩形，点击按钮的时候，第一个矩形增加宽度，第二个矩形增加高度，，第三个矩形则变成圆角矩形又该怎么做呢？当然我们可以在三个矩形的update内部写具体的实现代码，但是这update岂不是没有一个具体的功能描述了吗？该书中用“事件委托”解决了这个问题（此处事件委托和DOM中的事件委托应该是两码事），我个人理解这个“事件委托”在javascript中可以用一个数组表示，然后里面放各个订阅者的不同名字的update，然后一一调用。

在《JavaScript设计模式》一书中，关于观察者模式的实现也是采用”推“这种方式，章节的最后反问到如何实现”拉“这种方式呢？

我个人理解：发布者推送数据的时候有强制性，促使订阅者更新（update），然而在”拉“这种模式中，发布者本身仅仅包含最新的内容，没有通知（notice）没有订阅者列表，当订阅者需要得到数据的时候在其对应的update方法里面传入发布者对象即可。小白之见，请对该模式有不同理解的道友多多指正。o(∩_∩)o 

  本文关键词：JavaScript设计模式，由笔耕文化传播整理发布。