? ? ? ? //订阅者
? ? ? ? function Subscribe(){
? ? ? ? ? ? this.update = function(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+"hello!");
? ? ? ? }
? ? ? ? obb.update = function(state){
? ? ? ? ? ? console.log(state+"world!");
? ? ? ? }
? ? ? ? pba.setState("open "); //发布者更新了内容
? ?

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

? ?
? ?


? ?

? ? <script type="text/java script">
? ? ? ? //发布者
? ? ? ? function Publisher(obj){
? ? ? ? ? ? this.observers = [];
? ? ? ? ? ? var state = obj.value;? ? //让该内容不能直接访问

? ? ? ? ? ? //新增两个对于state的操作 获取/更新
? ? ? ? ? ? this.getState=function(){
? ? ? ? ? ? ? ? return state;
? ? ? ? ? ? }
? ? ? ? ? ? this.setState=function(value){
? ? ? ? ? ? ? ? state = value;
? ? ? ? ? ? ? ? this.notice();
? ? ? ? ? ? }
? ? ? ? ? ? this.obj = obj;

? ? ? ? }
? ? ? ? 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.getState());
? ? ? ? ? ? };
? ? ? ? }

? ? ? ? //订阅者
? ? ? ? function Subscribe(obj){
? ? ? ? ? ? this.obj = obj;
? ? ? ? ? ? this.update = function(data){
? ? ? ? ? ? ? ? this.obj.value = data;
? ? ? ? ? ? };
? ? ? ? }

? ? ? ? //实际应用
? ? ? ? var oba = new Subscribe(document.querySelector("#oba")),
? ? ? ? ? ? obb = new Subscribe(document.querySelector("#obb"));

? ? ? ? var pba = new Publisher(document.querySelector("#pba"));

? ? ? ? pba.addOb(oba);
? ? ? ? pba.addOb(obb);

? ? ? ? oba.update = function(state){
? ? ? ? ? ? this.obj.value = state+"@w3c.com";
? ? ? ? }
? ? ? ? obb.update = function(state){
? ? ? ? ? ? this.obj.value = "ID-"+state;
? ? ? ? }

? ? ? ? pba.obj.addEventListener('keyup',function(){
? ? ? ? ? ? pba.setState(this.value);
? ? ? ? });
? ? ? ?
? ?

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

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