維護(hù)別人遺留的老項(xiàng)目相當(dāng)頭疼箭券，遇到一個(gè)遺留的ifram模式做的一個(gè)項(xiàng)目，每次的交互都采用一個(gè)一個(gè)來(lái)狸涌，自己維護(hù)的相當(dāng)崩潰切省，重構(gòu)客戶也不愿意。好吧帕胆，時(shí)間緊急数尿，簡(jiǎn)單封裝一個(gè)事件機(jī)制來(lái)稍微減輕自己的麻煩吧。利用了localStorage的監(jiān)聽(tīng)機(jī)制結(jié)合簡(jiǎn)單的事件總線機(jī)制來(lái)實(shí)現(xiàn)惶楼。

創(chuàng)建引入全局js

1.父頁(yè)面引入parent.js

/**
 * @author  DLLCN
 * @time    2020/8/28 4:57 下午
 * @title   應(yīng)用間事件交互
 * @desc
 *
 */
 window.gos = {event: {}};
 gos.event.eventMap = new Map()
 gos.event.emit = function (eventType, data) {
     const time = new Date().getTime();
     const event = {key: eventType, data: data, timestamp: time}
     const detail = JSON.stringify(event);
     localStorage.setItem(`gos.event.${eventType}`, detail)
 }
 gos.event.addEventListener = function (eventType, func) {
     let evtSet = gos.event.eventMap.get(eventType)
     if (!evtSet) {
         evtSet = new Set()
         gos.event.eventMap.set(eventType, evtSet)
     }
     evtSet.add(func)
 }
 gos.event.removeEventListener = function (eventType, func) {
     let evtSet = gos.event.eventMap.get(eventType)
     if (evtSet) {
         evtSet.delete(func)
     }
 }
 
 let oriSetItem = localStorage.setItem;
 localStorage.setItem = function (key, value) {
     //這里拋出自定義事件
     var event = new Event("setItemEvent");
     event.newValue = value;
     event.key = key;
     window.dispatchEvent(event);
 
     //實(shí)現(xiàn)原方法
     oriSetItem.apply(this, arguments);
 }
 window.addEventListener('setItemEvent', e => {
     var str = e.key;
     if (/^gos\.event\..{1,}$/.test(str)) {
         const data = JSON.parse(e.newValue);
         let evtSet = gos.event.eventMap.get(data.key)
         if (evtSet) {
             for (let item of evtSet.values()) {
                 item(data);
             }
         }
     }
 }, false)

2.子頁(yè)面引入children.js

window.gos = top.gos || {};
if(!top || !top.gos || JSON.stringify(top.gos) === '{}'){
    console.error('主界面未引入js,只能使用本地事件服務(wù)右蹦，無(wú)法父子交互!')
}

if (!gos.event) {
    // console.log('渲染本地事件服務(wù)!')
    gos.event = {};
    /**
    * 事件
    * @param {*} eventType
    * @param {*} data
    */
    gos.event.eventMap = new Map()
    gos.event.emit = function (eventType, data) {
        const time = new Date().getTime();
        const event = { key: eventType, data: data, timestamp: time }
        const detail = JSON.stringify(event);
        localStorage.setItem(`gos.event.${eventType}`, detail)
    }
    gos.event.addEventListener = function (eventType, func) {
        let evtSet = gos.event.eventMap.get(eventType)
        if (!evtSet) {
            evtSet = new Set()
            gos.event.eventMap.set(eventType, evtSet)
        }
        evtSet.add(func)
    }
    gos.event.removeEventListener = function (eventType, func) {
        let evtSet = gos.event.eventMap.get(eventType)
        if (evtSet) {
            evtSet.delete(func)
        }
    }
}


const oriSetItem = localStorage.setItem;
localStorage.setItem = function (key, value) {
    //這里拋出自定義事件
    var event = new Event("setItemEvent");
    event.newValue = value;
    event.key = key;
    window.dispatchEvent(event);

    //實(shí)現(xiàn)原方法
    oriSetItem.apply(this, arguments);
}
window.addEventListener('setItemEvent', e => {
    var str = e.key;
    if (/^gos\.event\..{1,}$/.test(str)) {
        const data = JSON.parse(e.newValue);
        let evtSet = gos.event.eventMap.get(data.key)
        if (evtSet) {
            for (let item of evtSet.values()) {
                item(data);
            }
        }
    }
}, false)

使用方法

    // 發(fā)送事件
    gos.event.emit('test', { key: 'parent' })

    // 接收事件
    gos.event.addEventListener('test', () => {
            console.log('接收到事件。');
    })

源碼

原始鏈接:http://dllcny.com:10020/2021/03/18/ifram下的父子交互事件封裝/

許可協(xié)議: 轉(zhuǎn)載請(qǐng)保留原文鏈接及作者歼捐。