淘客推广平台西安seo主管

需求：在做单应用页面的时候，每个组件都是独立的，有时候我们a组件里面的东西修改了，需要b组件进行在a组件修改的同时进行响应，就需要监听器，这种时候我们需要定义监听器并且在b组件里面监听，然后在a组件触发

监听器：可以单独定义一个监听器（事件分发类），也可以用原生提供的，或者直接绑在localStorage上面,这里说下帮在localStorage上面的吧，比较快捷方便

定义监听器（全局）：

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组件 触发监听器

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

b组件 监听事件分发监听器

//监听事件
const localStorageSetHandler = function (e: any) {// localStorageif (e.key === 'collapsed') {//这里接受到了监听触发。做想要处理的事情}
};
document.addEventListener('itemInserted', localStorageSetHandler, false);
return () => {//组件移除需要把事件给移除掉document.removeEventListener('itemInserted', localStorageSetHandler);
};

这样就可以简单的实现全局事件分发了。如果想要更精细点的话可以自己定义一个监听类来实现

不过个人不建议经常使用分发器 来做业务处理，除非是只有这种办法了，因为分发器是全局的，会破环各个组件之间的独立性；单页面应用应该遵循组件独立，模块独立原则，尽量不要互相有关联，（高内聚低耦合）才能让项目在后期更好维护。