原生js实现的观察者和订阅者模式简单示例
本文实例讲述了原生js实现的观察者和订阅者模式。分享给大家供大家参考，具体如下：
观察者模式也叫发布者-订阅者模式，发布者发布事件，订阅者监听事件并做出反应
在传统的前端解耦方面，观察者模式作为比较常见一种设计模式，大量使用在各种框架类库的设计当中。
核心代码：
//eventProxy.js
'usestrict';
consteventProxy={
onObj:{},
oneObj:{},
on:function(key,fn){
if(this.onObj[key]===undefined){
this.onObj[key]=[];
}
this.onObj[key].push(fn);
},
one:function(key,fn){
if(this.oneObj[key]===undefined){
this.oneObj[key]=[];
}
this.oneObj[key].push(fn);
},
off:function(key){
this.onObj[key]=[];
this.oneObj[key]=[];
},
trigger:function(){
letkey,args;
if(arguments.length==0){
returnfalse;
}
key=arguments[0];
args=[].concat(Array.prototype.slice.call(arguments,1));
if(this.onObj[key]!==undefined
&&this.onObj[key].length>0){
for(letiinthis.onObj[key]){
this.onObj[key][i].apply(null,args);
}
}
if(this.oneObj[key]!==undefined
&&this.oneObj[key].length>0){
for(letiinthis.oneObj[key]){
this.oneObj[key][i].apply(null,args);
this.oneObj[key][i]=undefined;
}
this.oneObj[key]=[];
}
}
};
exportdefaulteventProxy;
使用：引入全局事件类，或通过配置webpack将事件类设置为全局变量
import{eventProxy}from'@/utils'
classParentextendsComponent{
render(){
return(
我是组件一
)
}
}
//componentDidUpdate方法与上例一致
classChild_2extendsComponent{
state={
msg:'start'
};
componentDidMount(){
//监听msg事件
eventProxy.on('msg',(msg,mm)=>{
console.log(msg,mm)
this.setState({
msg:msg
});
});
}
render(){
returnchild_2component:{this.state.msg}
参考：淘宝前端团队技术库
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。