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

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

作者: lwz4070 | 来源:发表于2018-09-17 10:54 被阅读0次
    观察者模式

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

    *代码实现

    <!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>
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/kbrknftx.html