js观察者模式实现vueJs中父子组件间通信自定义事件

观察者模式

观察者模式是一种创建松散耦合代码的技术,它定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。由主体和观察者组成,主体负责发布事件,同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事,观察者知道主体并能注册事件的回调函数。

*代码实现

<!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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容