美文网首页
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中父子组件间通信自定义事件

    观察者模式 观察者模式是一种创建松散耦合代码的技术,它定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,...

  • vue第七节

    Vue里组件的通信 通信:传参、控制(A操控B做一个事件)、数据共享 模式:父子组件间、非父子组件 父组件可以将一...

  • Vue 组件详解之组件通信

    组件中的关系可分为父子组件通信、兄弟组件通信和跨级组件通信。 一、自定义事件 ---- 子组件给父组件传递数据 我...

  • vue使用v-model实现父子组件间通信

    前言 vue父子组件之间的通信方式: 父组件到子组件:通过props传递数据; 子组件到父组件:通过自定义事件实现...

  • 第七章 可复用性的组件详解(中)

    7.7 组件通信 组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信 7.7.1 自定义事件—子组件给父组件传...

  • React父子组件间通信的实现方式

    React学习笔记之父子组件间通信的实现:今天弄清楚了父子组件间通信是怎么实现的。父组件向子组件通信是通过向子组件...

  • 父子组件通信

    vue之父子组件间通信实例讲解(props、emit) Vue.js 递归组件实现树形菜单(实例分享)

  • 组件通信

    组件关系可以分为父子组件通信、兄弟组件通信、跨级组件通信 自定义事件--子组件给父组件传递数据 子组件$emit(...

  • vue 组件通信

    组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。自定义事件:当子组件需要向父组件传递数据时,就要用到自定义...

  • EventBus使用

    EventBus事件总线.以观察者模式实现,消息推送/订阅.用于Android组件之间相互通信。 (定义:针对事件...

网友评论

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

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