// 基于CustomEvent的通信機制
let eventGlobalState = {
a: 1,
b: '2',
c: true,
};
const MY_CUSTOM_EVENT_NAME = 'MY_CUSTOM_EVENT_NAME';
function noop() {}
// 事件監(jiān)聽
document.addEventListener(MY_CUSTOM_EVENT_NAME, (event) => {
console.log(event);
const {
detail: { type, params, callback = noop },
} = event;
let newEventGlobalState = JSON.parse(JSON.stringify(eventGlobalState));
if (type === 'get') {
if (Array.isArray(params) && params.length) {
const newTempEventGlobalState = {};
params.forEach((keyItem) => {
newTempEventGlobalState[keyItem] = newEventGlobalState[keyItem];
});
newEventGlobalState = newTempEventGlobalState;
}
}
else if (type === 'set') {
eventGlobalState = {
...eventGlobalState,
...params,
};
newEventGlobalState = {
...newEventGlobalState,
...params,
};
}
callback(newEventGlobalState);
});
// 事件派發(fā)
function dispatch({ type, params, callback = noop }) {
const detailParams = {
type,
params,
callback: noop,
};
const cv = new CustomEvent(MY_CUSTOM_EVENT_NAME, {
detail: detailParams,
});
return new Promise((resolve, reject) => {
if (type === 'get') {
} else if (type === 'set') {
}
cv.detail.callback = function (response) {
callback(response);
resolve(response);
};
document.dispatchEvent(cv);
});
}
window.dispatch = dispatch;
// await dispatch({ type: 'set', params: { a: 3, d: 'ddd' } } )
// await dispatch({ type: 'get', params: ['c'] })
2022-04-23 CustomEvent 自定義事件通信
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門赖舟，熙熙樓的掌柜王于貴愁眉苦臉地迎上來蓬戚，“玉大人，你說我怎么就攤上這事宾抓÷蹈” “怎么了裕偿？”我有些...
- 文/不壞的土叔 我叫張陵，是天一觀的道長痛单。 經(jīng)常有香客問我嘿棘，道長，這世上最難降的妖魔是什么旭绒？ 我笑而不...
- 正文 為了忘掉前任鸟妙，我火速辦了婚禮，結果婚禮上挥吵，老公的妹妹穿的比我還像新娘重父。我一直安慰自己，他們只是感情好忽匈，可當我...
- 文/花漫 我一把揭開白布房午。 她就那樣靜靜地躺著，像睡著了一般丹允。 火紅的嫁衣襯著肌膚如雪郭厌。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼承冰，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了食零？” 一聲冷哼從身側響起巷懈，我...
- 正文 年R本政府宣布岸更，位于F島的核電站鸵膏，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏怎炊。R本人自食惡果不足惜谭企，卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望评肆。 院中可真熱鬧债查，春花似錦、人聲如沸瓜挽。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽久橙。三九已至俄占，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間剥汤，已是汗流浹背颠放。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 一、組件的定義與使用 1峭范、vue文件的組成 （1）模板頁面 （2）js模塊對象 （3）樣式 2财松、基本使用 （1）引...
- ***組件自己的數(shù)據(jù)：this.state={a:'test'} 設置this.setState({a:'b'})...
- 觀察者模式 觀察者模式是一種創(chuàng)建松散耦合代碼的技術辆毡，它定義對象間一種一對多的依賴關系菜秦，當一個對象的狀態(tài)發(fā)生改變時，...
- https://www.bilibili.com/video/BV15741177Eh?p=60&spm_id_f...
