需求：在做單應(yīng)用頁面的時候，每個組件都是獨立的，有時候我們a組件里面的東西修改了，需要b組件進行在a組件修改的同時進行響應(yīng)，就需要監(jiān)聽器，這種時候我們需要定義監(jiān)聽器并且在b組件里面監(jiān)聽，然后在a組件觸發(fā)

監(jiān)聽器：可以單獨定義一個監(jiān)聽器（事件分發(fā)類），也可以用原生提供的，或者直接綁在localStorage上面,這里說下幫在localStorage上面的吧，比較快捷方便

定義監(jiān)聽器（全局）：

const originalSetItem = localStorage.setItem;localStorage.setItem = function (key, value) {const event: any = new Event('itemInserted');event.value = value; // Optional..event.key = key; // Optional..document.dispatchEvent(event);// @ts-ignore// eslint-disable-next-lineoriginalSetItem.apply(this, arguments);
};

a組件 觸發(fā)監(jiān)聽器

localStorage.setItem('collapsed', collapsed ? '0' : '1');

b組件 監(jiān)聽事件分發(fā)監(jiān)聽器

//監(jiān)聽事件
const localStorageSetHandler = function (e: any) {// localStorageif (e.key === 'collapsed') {//這里接受到了監(jiān)聽觸發(fā)。做想要處理的事情}
};
document.addEventListener('itemInserted', localStorageSetHandler, false);
return () => {//組件移除需要把事件給移除掉document.removeEventListener('itemInserted', localStorageSetHandler);
};

這樣就可以簡單的實現(xiàn)全局事件分發(fā)了。如果想要更精細(xì)點的話可以自己定義一個監(jiān)聽類來實現(xiàn)

不過個人不建議經(jīng)常使用分發(fā)器 來做業(yè)務(wù)處理，除非是只有這種辦法了，因為分發(fā)器是全局的，會破環(huán)各個組件之間的獨立性；單頁面應(yīng)用應(yīng)該遵循組件獨立，模塊獨立原則，盡量不要互相有關(guān)聯(lián)，（高內(nèi)聚低耦合）才能讓項目在后期更好維護。