js观察者模式实现vueJs中父子组件间通信自定义事件
程序员文章站
2024-01-14 12:02:28
...
观察者模式
观察者模式是一种创建松散耦合代码的技术，它定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。由主体和观察者组成，主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事，观察者知道主体并能注册事件的回调函数。
*代码实现
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var Even = {
handles: {}, //创建一个事件管理器函数对象
//通过on接口监听事件eventName
//如果事件eventName被触发，则执行callbacks回调函数
on: function(evenName, callbacks) {
if(!this.handles) {
this.handles = {};
}
if(!this.handles[evenName]) {
this.handles[evenName] = [];
}
this.handles[evenName].push(callbacks);
},
//触发事件 eventName
emit: function(evenName) {
if(this.handles[arguments[0]]) {
for(var i = 0; i<this.handles[arguments[0]].length; i++) {
this.handles[arguments[0]][i](arguments[1]);
}
}
}
}
Even.on("test",function(result) {
console.log(result)
})
Even.on("test",function() {
console.log(111)
})
Even.emit("test","hello");
</script>
</body>
</html>
上一篇： sql查询某字段的相同值