原生js如何实现观察者和订阅者模式

这篇文章主要为大家展示了原生js如何实现观察者和订阅者模式,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。

观察者模式也叫发布者——订阅者模式,发布者发布事件,订阅者监听事件并做出反应

在传统的前端解耦方面,观察者模式作为比较常见一种设计模式,大量使用在各种框架类库的设计当中。

核心代码:

//eventProxy.js
　　& # 39;使用严格# 39;;
　　const eventProxy={>从& # 39;进口{eventProxy} @/跑龙套# 39;
　　
　　扩展组件{父类
　　呈现(){
　　回报(
　　& lt; div风格={{marginTop:“50 px"}}祝辞
　　& lt; Child_1/比;
　　& lt; Child_2/比;
　　& lt;/div>
　　);
　　}
　　}//componentDidUpdate与渲染方法与上例一致
　　类Child_1扩展组件{
　　componentDidMount () {
　　setTimeout(()=比;{//发布味精事件
　　console.log (eventProxy)
　　eventProxy.trigger(& # 39;味精# 39;,& # 39;结束# 39;,& # 39;微光# 39;);
　　}, 5000);
　　}
　　呈现(){
　　回报(
　　& lt; div>我是组件一& lt;/div>
　　)
　　}
　　}//componentDidUpdate方法与上例一致
　　类Child_2扩展组件{
　　状态={
　　味精:& # 39;开始# 39;
　　}；
　　
　　componentDidMount () {//监听味精事件
　　eventProxy.on(& # 39;味精# 39;,(味精、毫米)=比;{
　　console.log(味精、毫米)
　　this.setState ({
　　味精:味精
　　});
　　});
　　}
　　
　　呈现(){
　　返回& lt; div>
　　& lt; p> child_2组件:{this.state.msg} & lt;/p>
　　& lt;/div>
　　}
　　}

以上就是关于原生js如何实现观察者和订阅者模式的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看的到。

原生js如何实现观察者和订阅者模式