观察者模式

一、什么是观察者模式

　　观察者模式又叫做发布—订阅模式，是我们最常用的设计模式之一。它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知和更新。观察者模式提供了一个订阅模型，其中对象订阅事件并在发生时得到通知，这种模式是事件驱动的编程基石，它有利益于良好的面向对象的设计。

二、观察者模式的使用场景

　　1、实际上，只要我们曾经在DOM节点上面绑定过事件函数，那我们就使用过观察者模式，应为JS和DOM之间就是实现了一种观察者模式。

document.body.addEventListener("click", function() {
    alert("Hello World")
}，false )
document.body.click() //模拟用户点击

　　在上面的代码中，需要监听用户点击 document.body 的动作，但是我们是没办法预知用户将在什么时候点击的。因此我们订阅了 document.body 的 click 事件，当 body 节点被点击时，body 节点便会向订阅者发布 "Hello World" 消息。

　　2、自定义事件

const event = {
    clientList: [],
    listen: function(key , fn) {
        if (this.clientListen[key]) {
            this.clientList[key] = []
        }
        this.clientList[key].push(fn)
    },
    trigger: function() {
        const key = Array.prototype.shift.call(arguments)
        const fns = this.clientList[key]
        if (!fns || fns.length === 0 ) {
            return false
        }
        for (let i = 0, fn ;fn = fns[i++];) {
            fn.apply(this, arguments)
        }
    },
    remove : function(key , fn) {
        const fns = this.clientList[key]
        if (!fns) {
            return false
        }
        if (!fn) {
            fns && (fns.length = 0)
        } else {
            for (let l = fns.length - 1; l>=0; l--) {
                const _fn = fns[l]
                if ( _fn ===fn) {
                    fns.splice(l, 1)
                }
            }
        }
　　}
}

const installEvent = (obj) => {
    for (let i in event) {
        obj[i] = event[i]
    }
}

之后就增加了发布和订阅功能

const events = {}
installEvent(events)
// 订阅信息
events.listen('newMessage',fn1 = (say) => {
    console.log('say:' + say)
})
// 发布信息
events.trigger('newMessage',"Hello world")
//移除订阅
events.remove('newMessage',fn1)

三、观察者模式的弊端

　　观察者模式的有点非常明显：一是时间上的解耦，而是对象之间的解耦。既可用于异步编程中，也可以用帮助我们完成更松耦合的代码编写。但它仍然有所不足：

• 创建订阅者本身要消耗一定的时间和内存
• 当订阅一个消息时，也许此消息并没有发生，但这个订阅者会始终存在内存中。
• 观察者模式弱化了对象之间的联系，这本是好事情，但如果过度使用，对象与对象之间的联系也会被隐藏的很深，会导致项目的难以跟踪维护和理解。

四、面向对象与观察者模式

//模拟一个目标可能拥有的一些列依赖
    function ObserverList() {
        this.observerList = [];
    };

    //添加一个观察者
    ObserverList.prototype.Add = function (obj) {
        return this.observerList.push(obj);
    };

    //清除所有观察者
    ObserverList.prototype.Empty = function () {
        this.observerList = [];
    };

    //获得所有观察者的数量
    ObserverList.prototype.Count = function () {
        return this.observerList.length;
    };

    //获取某个指定的观察者
    ObserverList.prototype.Get = function (index) {
        if (index > -1 && index < this.observerList.length) {
            return this.observerList[index];
        }
    };
    //插入一个观察者
    ObserverList.prototype.Insert = function (obj, index) {
        var pointer = -1;
        if (index === 0) {
            this.observerList.unshift(obj);
            pointer = index;
        } else if (index == this.observerList.length) {
            this.observerList.push(obj);
            pointer = index;
        }
        return pointer;
    };
    //从某个位置开始查找特定的观察者并返回观察者的索引值
    ObserverList.prototype.IndexOf = function (obj, startIndex) {
        var i = startIndex, pointer = -1;
        while (i < this.observerList.length) {
            if (this.observerList[i] == obj) {
                pointer = i;
            } i++;
        }
        return pointer;
    };

    //移除某个特定索引的观察者（如果存在）
    ObserverList.prototype.RemoveIndexAt = function (index) {
        if (index == 0) {
            this.observerList.shift();
        } else if (index == this.observerList.length - 1) {
            this.observerList.pop();
        }
    };

    //扩展对象
    function extend(obj, extension) {
        console.log(obj);
        for (var k in obj) {
            console.log(k);
            extension[k] = obj[k]
        }
    };

    //模拟一个目标对象，并模拟实现在观察者列表上添加、删除和通知观察者的能力
    function Subject() {
        this.observers = new ObserverList();
    };

    //目标添加一个观察者
    Subject.prototype.AddObserver = function (observer) {
        this.observers.Add(observer);
    };

    //目标对象移除某个观察者
    Subject.prototype.RemoveObserver = function (observer) {
        this.observers.RemoveIndexAt(this.observers.IndexOf(observer, 0));
    };

    Subject.prototype.RemoveAllObserver = function () {
        this.observers = [];
    }

    //模拟实现通知功能
    Subject.prototype.Notify = function (context) {
        var observerCount = this.observers.Count();
        for (var i = 0; i < observerCount; i++) {
            this.observers.Get(i).Update(context);
        }
    };
    //模拟创建一个观察者
    function Observer() {
        this.Update = function () {
        };
    }

    var controlCheckbox = document.getElementById("mainCheckBox");
    var removerObserver = document.getElementById("removerAllObserver");
    var addBtn = document.getElementById("addNewObserver");
    var container = document.getElementById("observerContainer");
    extend(new Subject(), controlCheckbox);

    controlCheckbox["onclick"] = Function("controlCheckbox.Notify(controlCheckbox.checked)");

    addBtn["onclick"] = AddNewObserver;
    function AddNewObserver() {
        var check = document.createElement("input");
        check.type = "checkbox";
        extend(new Observer(), check);
        check.Update = function (value) {
            this.checked = value;
        };
        controlCheckbox.AddObserver(check);
        container.appendChild(check);
    }

五、class与观察者模式

/**
 * 发布订阅模式(观察者模式)
 * handles: 事件处理函数集合
 * on: 订阅事件
 * emit: 发布事件
 * off: 删除事件
**/

class PubSub {
  constructor() {
    this.handles = {};
  }

  // 订阅事件
  on(eventType, handle) {
    if (!this.handles.hasOwnProperty(eventType)) {
      this.handles[eventType] = [];
    }
    if (typeof handle == 'function') {
      this.handles[eventType].push(handle);
    } else {
      throw new Error('缺少回调函数');
    }
    return this;
  }

  // 发布事件
  emit(eventType, ...args) {
    if (this.handles.hasOwnProperty(eventType)) {
      this.handles[eventType].forEach((item, key, arr) => {
        item.apply(null, args);
      })
    } else {
      throw new Error(`"${eventType}"事件未注册`);
    }
    return this;
  }

  // 删除事件
  off(eventType, handle) {
    if (!this.handles.hasOwnProperty(eventType)) {
      throw new Error(`"${eventType}"事件未注册`);
    } else if (typeof handle != 'function') {
      throw new Error('缺少回调函数');
    } else {
      this.handles[eventType].forEach((item, key, arr) => {
        if (item == handle) {
          arr.splice(key, 1);
        }
      })
    }
    return this; // 实现链式操作
  }
}

// 下面做一些操作
let callback = function () {
  console.log('you are so nice');
}

let pubsub = new PubSub();
pubsub.on('completed', (...args) => {
  console.log(args.join(' '));
}).on('completed', callback);

pubsub.emit('completed', 'what', 'a', 'fucking day');
pubsub.off('completed', callback);
pubsub.emit('completed', 'fucking', 'again');