网站设计一般包括哪几个部分,网站模块下载,珠海做网站优化,wordpress电话按钮需求#xff1a;在做单应用页面的时候#xff0c;每个组件都是独立的#xff0c;有时候我们a组件里面的东西修改了#xff0c;需要b组件进行在a组件修改的同时进行响应#xff0c;就需要监听器#xff0c;这种时候我们需要定义监听器并且在b组件里面监听#xff0c;然后…需求在做单应用页面的时候每个组件都是独立的有时候我们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);
};
这样就可以简单的实现全局事件分发了。如果想要更精细点的话可以自己定义一个监听类来实现 不过个人不建议经常使用分发器 来做业务处理除非是只有这种办法了因为分发器是全局的会破环各个组件之间的独立性单页面应用应该遵循组件独立模块独立原则尽量不要互相有关联高内聚低耦合才能让项目在后期更好维护。
