百行代码实现js事件监听实现跨页面数据传输

使用场景

类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息

技术原理

• 跨页面通信:

  基于事件监听,通过监听 storage事件监听回调机制,实现跨页面通信,让每个只操作自身页面的操作

• 同页面事件监听:

  发送事件时,查找回调函数,触发回调

使用效果

demo.gif

使用示例

// 注册事件

eventListener.addEventListener('showMessage', function (message) {

    console.debug("接收到的消息")

})

// 发送事件

eventListener.sendEvent('showMessage', 111)

源码

/**

* js 事件监听

*

*

* useage:

* 1. 注册事件监听

* EventListener.addEventListener('xxx-success',function(xxvalue){

*    refreshList();

* });

* 发送事件

* 2.EventListener.sendEvent('xxx-success','xxvalue')

*/

/**

* 回调队列

* 结构:{

*    eventKey:'xxx',

*    callback:[]

* }

*/

let EventListener = function () {

    this.callback = [];

    this.sendEvent = function (eventKey, eventValue) {

        /**

        * 同一页面,localStorage.setItem 不触发 storage ,发送时 自动触发

        * uuid 保证变更,都能触发 storage事件

        */

        let newEventKey = 'evt_' + eventKey;

        let uuid = _uuid(8, 16);

        let newEventValue = uuid + '_' + (eventValue == undefined ? '' : eventValue);

        //手动触发本页面事件

        this.triggerCallback(newEventKey, newEventValue);

        localStorage.setItem(newEventKey, newEventValue);

    }

    this.addEventListener = function (eventKey, callback) {

        let callbackObject = _findCallbackObject(this, eventKey);

        if (callbackObject == undefined) {

            callbackObject = {eventKey: eventKey, callback: [callback]};

            this.callback.push(callbackObject);

        } else {

            callbackObject.callback.push(callback);

        }

    }

    /**

    * 触发事件对应的回调

    * removeItem setItem 都会触发

    * removeItem eventValue==null 不触发

    */

    this.triggerCallback = function (eventKey, eventValue) {

        if (_isEventKey(eventKey) && _isNotNull(eventValue)) {

            let originalEventKey = _resolveEventKey(eventKey);

            let callbackObject = _findCallbackObject(this, originalEventKey);

            if (callbackObject != undefined) {

                let callbackQueue = callbackObject.callback;

                if (callbackQueue.length > 0) {

                    eventValue = _resolveEventValue(eventValue);

                    for (let index in callbackQueue) {

                        let callback = callbackQueue[index];

                        try {

                            callback(eventValue);

                        } catch (e) {

                            console.error("执行事件" + callbackObject.eventKey + "的函数失败", e)

                        }

                    }

                }

                //触发后删除

                localStorage.removeItem(eventKey);

            }

        }

    }

    /**

    * 查找到事件key对应的监听对象

    */

    function _findCallbackObject(_this, eventKey) {

        if (_this.callback.length > 0) {

            for (let index in _this.callback) {

                let callbackObject = _this.callback[index];

                if (callbackObject.eventKey == eventKey) {

                    return callbackObject;

                }

            }

        }

    }

    function _resolveEventKey(eventKey) {

        return eventKey.split('_')[1];

    }

    function _isEventKey(eventKey) {

        if (eventKey.indexOf('evt_') < 0) {

            return false;

        }

        return true;

    }

    function _resolveEventValue(eventValue) {

        let start = eventValue.indexOf('_') + 1;

        let end = eventValue.length;

        return eventValue.substring(start, end);

    }

    function _isNotNull(value) {

        if (value == undefined || value == null) {

            return false;

        }

        return true;

    }

    function _uuid(len, radix) {

        let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');

        let uuid = [], i;

        radix = radix || chars.length;

        if (len) {

            for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];

        } else {

            let r;

            uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';

            uuid[14] = '4';

            for (i = 0; i < 36; i++) {

                if (!uuid[i]) {

                    r = 0 | Math.random() * 16;

                    uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];

                }

            }

        }

        return uuid.join('');

    };

}

let eventListener = new EventListener();

//注册监听,不同页面也可触发监听事件

window.addEventListener('storage', function (event) {

    eventListener.triggerCallback(event.key, event.newValue);

})

仓库地址: 链接