《JavaScript设计模式之观察者模式（学习笔记）》由会员分享，可在线阅读，更多相关《JavaScript设计模式之观察者模式（学习笔记）（7页珍藏版）》请在金锄头文库上搜索。
1、JavaScript设计模式之观察者模式（学习笔记）id=Mneiu设计模式（Design Pattern）对于软件开发来说其重要性不言而喻，代码可复用、可维护、可 扩展一肓都是软件T稈中的追求！对于我一个学javascript的人来说，理解设计模式似乎有 些困难，对仅切图、做少量交互效果的FE甚至可能不会用到，但是当你开始使用 Angular/Backbone等框架的时候，就无法避免设计模式、MVC/MVVM这些东西了（反正我 是伤脑筋）。我学设计模式是刚开始接触编程大概三个月的时候，看一木书大话设计模式，里面用 C#语言來写，我很无语，因为强类型的编程语言对于我这种写弱类型的毛头小了來说，
2、似 乎又有困难啊，于是我就学C#基础语法规则去了。今年年初我又学了 JAVA的基础语法 规则然而我的初衷已经被抛弃在一旁，落上了厚厚的灰层。对于H学编稈的我来说，不 知道学习编稈的先后顺序似乎吃亏不少，但是总要有开头的！以上可直接跳过先来说一下我对“观察者模式”的个人理解：观察者模式又称“发布订阅 （Publish/Subscribe）模式”，发布与订阅显然是两个不同对象的功能，比如RSS。知乎是一 个发布者（发布一些对某方面问题的高赞同解答），我作为一个订阅者（在我的邮箱里面订 阅了知乎的相关发布内容），我的同事以及我的老板都订阅了知乎，所以在这个模型中，有 一个发布者，有三个订阅者。在具体
3、编程中，发布者有了新的内容，需要向订阅者推送数据，那么新的内容（state）、 订阅者有哪些（observers）就是发布者需要包含的东西，谁订阅了、谁退订了则要对发布者 中的订阅者列表进行更新。以下是发布者的相关信息代码解读：发布者function Publisher()this.observers =;th is. state = ""Publisher.prototype.addOb=fu nction(obseve)var flag = false;for (var i = this.observerslength 1; i = 0; i-) if(this.obs
4、ervers i =observer) flag=true;if(!flag)this.observers.push(observer);return this;Publisher.prototype.removeOb 二fun ction(observer) var observers = this.observers;for (var i = 0; i) if(observersi=observer)observers.splice(i,l);)；return this;Publisher. prototype.notice=fu nction()var observers = th is
5、.observers;for (var i = 0; i) observersi.update(this.state);；以上在遍历observers数组的时候，可以使用数组类的filter forEach等新特性来处理。 第三个notice函数表示发布者有了新东西，然后对订阅者列表中的所有人通知他们我有新内 容(state) 了，你们拿去更新你们的邮箱吧。这里把内容传递给了每一个订阅者的 叩date 更新功能。那么订阅者呢？订阅者很简单，只需要具有一个叩date功能即可(每一个订阅者叩date 可能不一样，比如我是放讲邮箱了，我的同事则将订阅的拿来，并且顺便把111的删掉了，我 的上司则将数
6、据转发到Gmail去了)。下面是订阅者相关信息代码解读：订阅者function Subscribe()this.update = fun ction(data)con sole.log(data);；实际上，因为每一个订阅者都有这个叩date,所以我们通常应该将具添加到构造器的原 型上面，当对这个默认的update功能不满足要求的时候，可以为每一个订阅者的实例设置 单独的update,比如将这个dnta发送给别人。最示咱们看看怎么应用。实际应用var oba = new Subscribe(),obb = new Subscribe();var pba = new Publisher();pb
7、a.addOb(oba);pba.addOb(obb);oba.update = fun ction(state)console.log(state+&qu ot;hello!&q uot;);obb.update = function(state)console.log(state+&qu ot;world!&q uot;);pba.state = "open "pba.notice();大家看到，我们在最后对发布者手动设置了它的内容(state)并且要求他发出通知(notice )o在实际项目中，发布者的内容可能是从示台获取的也可能是从前台某地方输入的。 然而发布者每次
8、更新内容后乂要手动调用通知是不是有点多余呢?既然更新了内容那就肯 定要通知别人了啊。那我们就把内容的更新与发岀通知进行绑定好了，看下血的代码：DOCTYPE htmlhtml lang="en"headmeta charset=&qu ot;UTF-8&q uot;titleDocume nttitleheadbodyscript type二"text刀avascipt"发布者function Publisher()this.observers =;var state = ""让该内容不能育接访问新增两个对于state的操作 获取/更
9、新this.getState=function() return state;this.setState=function(value) state = value;this.notice();Publisher.prototype.addOb=function(observer)var fkig = false;for (var i = this.observersength - 1; i = 0; i) if(this.observersi=observer) flag=true;);if(!flag)this.observers.push(observer);return this;Pu
10、blisher.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=fu nction()var observers = th is.observers;for (var i = 0; i observersgth; i+) observersi. update
11、(this.getState(); / 获取发布者的内容；订阅者function Subscribe()this.update = fun ction(data)console, log(data);；实际丿应用var oba = new Subscribe。，obb = new Subscribe();var pba = new Publisher();pba.addOb(oba);pba.addOb(obb);oba.update = function(state)console. log(state+&q uot;hello! ");obb.update = function(
12、state)con sole.log(state+&qu ot; world! ");)pba.setState("open "); /发布者更新了 内容scriptbodyhtml对于以上的内容，或许并没有跟我们的项1=1中实际出现的问题有关，那我们就来代入这 种设计模式，做一个例了：三个文木框ABC,其中A可编辑，B与C不可编辑且B的值是 A的值加上麻缀"",C的值是A的值加上前缀"ID-"oDOCTYPE htmlhtml lang二"en"headmeta charset二"UTF-8&
13、quot;titleDocumenttitleheadbodydivlabel用丿r 名称：input type="text" id="pba" placeholder=" 请输入用户名称" /labelbr /br /label生成邮箱:in put type="text" id二&q uot;oba" readonly /label label生成 ID： input type="text" id二&q uot;obb" read only /label divscrip
14、t type二"text(javascFipt"发布者function Publisher(obj)this.observers =;var state = obj.value;让该内容不能肓接访问新增两个对于state的操作获取/更新this.getState=function() return state; this.setState=fu nctio n(value) state = value; this.notice();this.obj = obj;Publishe r. prototype. dclOb二function(obsever)var flag = false;for (var i = this.observerslength - 1; i = 0; i-) if(this.observersi=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 observersength; i+) if(observersi
