JavaScript中的观察者模式

前言&＃xff1a;在各种设计模式中&＃xff0c;观察者模式具有很重要的应用&＃xff0c;比如前端很流行的框架Vue.js就是基于观察者模式实现的&＃xff0c;最近也了解了下观察者模式的实现原理&＃xff0c;简单的说就是一个对象改变了&＃xff0c;观察者察觉到了这种改变&＃xff0c;它将这种改变通知给所有和这个对象有关的函数&＃xff0c;然后这些函数被调用并执行。

一. 观察者模式的实现原理

如前言中所说&＃xff0c;观察者具有观察和通知的职责&＃xff0c;那么它是如何来实现这两个职责的呢&＃xff1f;

所谓观察和通知&＃xff0c;就是一旦数据变化就立马发起关于这个数据改变的通知&＃xff0c;那么问题又来了&＃xff0c;通知给谁看呢&＃xff1f;聪明的你肯定一下子就想到了&＃xff0c;当然是给关心这个数据变化的某某看了&＃xff0c;某某收到通知后就可以去发表自己的见解了。所以我们可以这样理解&＃xff1a;

&＃xff08;1&＃xff09;要想把改变通知出去&＃xff0c;必须要有相应的通知的方法&＃xff1b;

&＃xff08;2&＃xff09;通知发布出去&＃xff0c;得有人看&＃xff0c;每个人都是一个订阅者&＃xff0c;所以必须得有添加订阅者的方法&＃xff1b;

&＃xff08;3&＃xff09;订阅之后又不感兴趣了&＃xff0c;就可以取消订阅&＃xff0c;所以又有了一个取消订阅的方法。

实现代码&＃xff1a;

var observer &＃61; {//添加订阅者addSubscriber: function (callback) {this.subscribers[this.subscribers.length] &＃61; callback;},//移除订阅者removeSubscriber: function (callback) {for (var i &＃61; 0; i <this.subscribers.length; i&＃43;&＃43;) {if (this.subscribers[i] &＃61;&＃61;&＃61; callback) {delete (this.subscribers[i]); //删除某个订阅者}}},//发布通知publish: function (data) {for (var i &＃61; 0; i <this.subscribers.length; i&＃43;&＃43;) {if (typeof this.subscribers[i] &＃61;&＃61;&＃61; &＃39;function&＃39;) {this.subscribers[i](data); //执行和data相关的操作}}}
};

我们可以看到在观察者的内部有个订阅者的数组&＃xff0c;关于添加、删除、通知都是针对这个数组来操作的&＃xff0c;每个订阅者都执行的是和data相关的操作&＃xff0c;即只要data改变&＃xff0c;每个订阅者的方法都会被调用。

二. 代码演示

上面的代码主要讲的是观察者如何实现&＃xff0c;下面来看下如何订阅、发布、删除&＃xff1a;
&＃xff08;1&＃xff09;创建一个观察者&＃xff1a;

function CreateObserver(){var obj &＃61; {};for (var i in observer){obj[i] &＃61; observer[i];}obj.subscribers &＃61; []; //添加一个订阅者数组return obj;
}
var weather &＃61; CreateObserver();

&＃xff08;2&＃xff09;添加订阅&＃xff1a;

如上面我们创建了一个叫做天气的观察者&＃xff0c;最近西安的温度40&＃43;&＃xff0c;天气想知道人们的感受&＃xff0c;所以就发布了一条关于天气的帖子&＃xff0c;并订阅了形形色色的关于他的评价&＃xff1a;

var someWords &＃61; [&＃39;北郊说&＃xff1a;下雨之后&＃xff0c;从红烧变清蒸&＃xff01;&＃39;, &＃39;西安人民说&＃xff1a;我与铁板烧之前只差一撮孜然&＃xff01;&＃39;, &＃39;非洲同胞说&＃xff1a;欢迎来非洲避暑&＃xff01;&＃39;, &＃39;吐鲁番说&＃xff1a;地表温度67&＃xff0c;我终于不是第一了&＃xff0c;哈哈哈。。。&＃39;];var func &＃61; [];for (let i &＃61; 0; i function (title){console.log(title &＃43; "---" &＃43;someWords[i]);}weather.addSubscriber(func[i]);
}weather.publish(&＃39;西安地表温度67&＃xff0c;全国第一&＃xff01;热热热&＃39;);

输出如下&＃xff1a;

只想说一句&＃xff0c;是真的热&＃xff01;&＃xff01;&＃xff01;&＃xff01;

&＃xff08;3&＃xff09;取消订阅

天气觉得吐鲁番堕落了&＃xff0c;不是第一还这么开心&＃xff0c;我要取消对他的订阅&＃xff1a;

weather.removeSubscriber(func[3]);weather.publish(&＃39;西安地表温度67&＃xff0c;全国第一&＃xff01;热热热&＃39;);

所以输出就这样了&＃xff1a;

以上是本人对观察者模式的理解&＃xff0c;我觉得它的实现巧妙的地方在于在内部维护了一个数组&＃xff0c;这个数组是关于某个数据变化后的所有回调函数&＃xff0c;当数据变化后逐一去执行这些回调函数&＃xff0c;既可以去统一管理数组成员&＃xff0c;又可以让数组成员去干自己的事情。