1. 观察者模式介绍
观察者模式也称发布订阅（publish/subscribe简称Pub/Sub）模式。这是一种创建松散耦合代码的技术。它定义对象间 一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。由主体和观察者组成，主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情，观察者知道主体并能注册事件的回调函数。
使用观察者模式的好处：
- 支持简单的广播通信，自动通知所有已经订阅过的对象。
- 页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。
- 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
应用场景：当一个对象的改变需要同时改变其它对象，并且它不知道具体有多少对象需要改变的时候，就应该考虑使用观察者模式。观察者模式所做的工作就是在解耦，让耦合的双方都依赖于抽象，而不是依赖于具体。从而使得各自的变化都不会影响到另一边的变化。
1.1 观察者模式-demo1：一个简单的观察者模式代码实现
观察者模式中主要有三个基本操作：订阅、发布和退订
// 声明主体对象，利用闭包隐藏event对象var PubSub_1 = (function () { var event = {}; return { on: function (eventName, callback) { // 订阅 event[eventName] = callback; }, off: function (eventName) { // 退订 event[eventName] && (delete event[eventName]); }, emit: function (eventName) { // 发布 event[eventName] && event[eventName](arguments[1]); } }}());// 订阅相关信息PubSub_1.on("newspaper", function () { arguments[0] ? console.log(arguments[0] + "新一期报纸出来了") : console.log("无名氏新一期报纸出来了");});PubSub_1.on("newspaper", function () { arguments[0] ? console.log(arguments[0] + "新1期报纸出来了") : console.log("无名氏新1期报纸出来了");});PubSub_1.on("news", function () { arguments[0] ? console.log(arguments[0] + "最新新闻出来了") : console.log("无名氏最新新闻出来了");});// 发布相关信息PubSub_1.emit("newspaper", "bob"); // bob新1期报纸出来了PubSub_1.emit("news", "bob"); // bob最新新闻出来了PubSub_1.emit("newspaper"); // 无名氏新1期报纸出来了PubSub_1.emit("news"); // 无名氏最新新闻出来了// 退订PubSub_1.off("newspaper");不足之处：一个事件只能绑定一个操作,并且取消订阅把整个事件都删除掉了
1.2 观察者模式-demo2
用一个数组把一个事件绑定的多个操作存储起来，发布时按订阅顺序执行，退订时删除对应的数组元素
var PubSub_2 = (function () { var event = {}; return { on: function (eventName, callback) { // 订阅 !event[eventName] && (event[eventName] = []); event[eventName].push(callback); }, off: function (eventName, callback) { // 退订 if (event[eventName]) { event[eventName] = event[eventName].filter(function (value, index) { return value != callback ? value : null; }); } }, emit: function (eventName, args) { // 发布 if (event[eventName]) { for (let i = 0, len = event[eventName].length; i < len; i++) { event[eventName][i](args); } } } }}());// 订阅相关信息function newspaper1() { console.log("第1期报纸出来了");}function newspaper2() { console.log("第2期报纸出来了");}function news() { console.log("最新新闻出来了");}PubSub_2.on("newspaper", newspaper1);PubSub_2.on("newspaper", newspaper2);PubSub_2.on("news", news);// 发布相关信息PubSub_2.emit("newspaper"); // 第1期报纸出来了、第2期报纸出来了PubSub_2.emit("news"); // 最新新闻出来了// 退订PubSub_2.off("newspaper", newspaper1);PubSub_2.emit("newspaper"); // 第2期报纸出来了相关问题：我在测试代码中没有给订阅方法写参数，如果需要参数可以参考demo1，也可以自由发挥呀~~
1.3 观察者模式-jquery中的观察者模式
作为一个前端开发者，我们经常与jquery对象打交道，常用的jquery对象方法on、off、trigger（bind/unbind类似）就可以看做观察者模式中的订阅、退订和发布操作。
// 声明事件处理函数function jq_newspaper1(event, msg1, msg2) { // event是jquery事件处理函数自带的参数 // event.data是绑定事件处理函数时传入的参数 // 除去event的其它参数msg1,msg2是与trigger触发事件时传入的参数数组中的每一项对应的 console.log(event.data[0] + "jquery_第1期报纸出来了" + (msg1 || "") + (msg2 || ""));}function jq_newspaper2() { console.log("jquery_第2期报纸出来了");}$(document).on("newspaper.test", ["hello1~"], jq_newspaper1); // .test是namespace event.data = ["hello1~"] 是对象$(document).on("newspaper", jq_newspaper2);$(document).trigger("newspaper.test", ["msg11", "msg22"]); // hello1~jquery_第1期报纸出来了msg11msg22$(document).trigger("newspaper"); // hello1~jquery_第1期报纸出来了、jquery_第2期报纸出来了$(document).off("newspaper.test"); // 解绑newspaper.test事件 等价于 $(document).off(".test")$(document).trigger("newspaper"); // jquery_第2期报纸出来了需要注意的点：
- on、off、trigger是jquery实例的方法，所以要先实例化一个jquery对象才可以使用这些方法；
- jquery实现的观察者模式，比较灵活。其中最大的好处是命名空间的使用，命名空间最方便的就是在于可以触发和解绑对应的事件而不会影响其它同一类型的事件；
- jquery事件处理函数中默认的第一个形参是event，该对象包含发生该事件时的一些基本属性，其中event.data是利用on方法绑定事件时传入的一个对象（可选）；
- jquery事件处理函数中除第一个参数的其它形参是调用trigger方法的时传入一个实参数组（数组中的每一项分别和事件处理函数第二个形参开始的形参相对应）。
1.4 自定义jquery版观察者模式
使用方式类似于jquery实例对象方法on、off、trigger，只是不用实例化一个jquery对象了，但是自定义版的jquery构造函数的方法绑定浏览器事件是不行的，只有jquery实例对象方法on才可以绑定浏览器事件。
(function ($) { // 实例化一个jquery对象 var eventObj = $({}); $.on = function () { // 具体为什么要用apply 看jquery源码这一块的操作吧 eventObj.on.apply(eventObj, arguments); }; $.off = function () { eventObj.off.apply(eventObj, arguments); }; $.trigger = function () { eventObj.trigger.apply(eventObj, arguments); };}(jQuery));// 回调函数function handle(event, name, welcome) { console.log(name + "自定义jquery观察者模式开始啦~" + welcome);}// 订阅$.on("info", handle);// 发布$.trigger("info", ["sunny1_", "welcome~"]); // sunny1_自定义jquery观察者模式开始啦~welcome~// 退订$.off("info");说明：为了和jquery实例的那些方法一致，所以取得方法名也是一样的，这样是不好的。
1.5 观察者模式-demo1变种
基于demo1实现的另一种观察者模式
var PubSub_1_variation = { on: function (eventName, callback) { // 订阅 if (!this.event) { this.event = {}; } this.event[eventName] = callback; }, off: function (eventName) { // 退订 if (this.event && this.event[eventName]) { delete this.event[eventName] } }, emit: function (eventName) { // 发布 if (this.event && this.event[eventName]) { this.event[eventName](arguments[1]); } }};var person1 = {};var person2 = {};var person1_variation = {};var person2_variation = {};Object.assign(person1, PubSub_1);Object.assign(person2, PubSub_1);Object.assign(person1_variation, PubSub_1_variation);Object.assign(person2_variation, PubSub_1_variation);function call1() { console.log(arguments[0] + "-call1");}function call2() { console.log(arguments[0] + "-call2");}person1.on("call1", call1);person2.on("call2", call2);person1_variation.on("call1", call1);person2_variation.on("call2", call2);person1.emit("call1", "person1"); // person1-call1person1.emit("call2", "person1"); // person1-call2person2.emit("call1", "person2"); // person2-call1person2.emit("call2", "person2"); // person2-call2person1_variation.emit("call1", "person1_variation"); // person1_variation-call1person1_variation.emit("call2", "person1_variation"); // 不输出person2_variation.emit("call1", "person2_variation"); // 不输出person2_variation.emit("call2", "person2_variation"); // person2_variation-call2说明：demo1因为用的是闭包方式，PubSub_1共享同一个event对象，所以操作的event对象都是同一个。demo2也有类似的问题，解决办法类似。最后，Object.assign(target, ...sources) 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。如果属性值是对象那么将共享同一个内存空间。
最后：文章内容仅是自己利用匮乏的知识写的一些demo，如果有不对的地方，麻烦指正一下~~~谢谢啦。
2. 相关文章
- JavaScript实现的发布/订阅(Pub/Sub)模式
- 深入理解JavaScript系列（32）：设计模式之观察者模式
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。