react事件監聽項目地觀察者模式分析

github地址：https://github.com/HuaRongSAO/react-eventproxy/blob/master/src/eventProxy.js

react事件監聽發布，用於跨組件之間地信息交互。

一觀察者模式原理

eventProxy 中總共有 on、one、off、trigger 這 4 個函數。訂閱者為觀察者，發布者為被觀察者。

（1）on函數：用於訂閱者監聽相應的事件，並將事件響應時的函數作為參數， 使用 on 進行訂閱的函數，每次事件發生相應時都會被觸發。

on: function on(key, fn) {
        if (this.onObj[key] === undefined) {
            this.onObj[key] = [];
        }

        this.onObj[key].push(fn);
    },

（2）one函數：用於訂閱者監聽相應的事件，並將事件響應時的函數作為參數，使用 one 進行訂閱的函數，事件只會觸發一次。

one: function one(key, fn) {
        if (this.oneObj[key] === undefined) {
            this.oneObj[key] = [];
        }
        this.oneObj[key].push(fn);
    },

（3）off函數：用於解除所有訂閱了某個事件的所有函數。

off: function off(key) {
        this.onObj[key] = [];
        this.oneObj[key] = [];
    },

（4）trigger函數：trigger 用於發布者發布事件，將除第一參數（事件名）的其他參數，作為新的參數，觸發使用 one 與 on 進行訂閱的函數。

trigger: function trigger() {
        var key = void 0,
            args = void 0;
        if (arguments.length == 0) {
            return false;
        }
        key = arguments[0];
        args = [].concat(Array.prototype.slice.call(arguments, 1));

        if (this.onObj[key] !== undefined && this.onObj[key].length > 0) {
            for (var i in this.onObj[key]) {
                this.onObj[key][i].apply(null, args);
            }
        }
        if (this.oneObj[key] !== undefined && this.oneObj[key].length > 0) {
            for (var _i in this.oneObj[key]) {
                this.oneObj[key][_i].apply(null, args);
                this.oneObj[key][_i] = undefined;
            }
            this.oneObj[key] = [];
        }
    }
};

 

二好處

1、觀察者（訂閱者）和被觀察者（發布者）是抽象耦合的。訂閱者依賴於發布者，將這些方面封裝在獨立的對象中使它們可以各自獨立地改變和復用。

2、建立一套觸發機制。trigger函數 用於發布者發布事件，觸發使用 one 與 on 進行訂閱的函數。發布者與訂閱者間存在一對多關系，當一個發布者發布事件時，則會自動通知它的訂閱者，而不需要一個一個通知。