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 进行订阅的函数。发布者与订阅者间存在一对多关系，当一个发布者发布事件时，则会自动通知它的订阅者，而不需要一个一个通知。

react事件监听项目地观察者模式分析

猜你喜欢