精华内容
下载资源
问答
  • vue订阅者模式

    2019-03-18 20:54:00
    这是订阅者1 ' ) }) obj.addListener( ' click ' , function (e){ console.log(e) console.log( ' 这是订阅者2 ' ) }) var fn1 = function (){ console.log( ' 这是订阅者3 ' ) } obj....
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <!--
                addeventlistener('click',fn)
                
                @click=fn
                $emit('事件名称','事件内容')
            -->
            
            <script type="text/javascript">
    //            obj.addlistener('click',fn1)
    //            obj.addlistener('click',fn2)
    //            obj.addlistener('click',fn3)
    //            
    //            obj.emit('click','事件内容')
    
    
                var obj = {
                    eventFns:{
    //                    click:[fn1,fn2,fn3]
                    },
                    addListener:function(eventName,fn){
                        if(this.eventFns[eventName]){
                            this.eventFns[eventName].push(fn)
                        }else{
                            this.eventFns[eventName] = []
                            this.eventFns[eventName].push(fn)
                        }
                    },
                    emit:function(eventName,content){
                        
                        this.eventFns[eventName].forEach(function(item){
                            item(content)
                        })
                        
                    },
                    removeListener:function(eventName,fn){
                        var index = this.eventFns[eventName].indexOf(fn)
                        if(index!=-1){
                            this.eventFns[eventName].splice(index,1)
                        }
                    }
                }
                
                
                obj.addListener('click',function(e){
                    console.log(e)
                    console.log('这是订阅者1')
                })
                
                obj.addListener('click',function(e){
                    console.log(e)
                    console.log('这是订阅者2')
                })
                
                var fn1 = function(){
                    console.log('这是订阅者3')
                }
                
                obj.addListener('click',fn1)    
                
                obj.removeListener('click',fn1)
                
                obj.emit('click',{
                    eventname:'click',
                    timestamp:new Date()
                })
                
                
                document.querySelector('body').removeEventListener('事件名称',fn1)
            </script>
        </body>
    </html>

     

    转载于:https://www.cnblogs.com/wwthuanyu/p/10554855.html

    展开全文
  • 发布 订阅模式 // 事件触发器 class EventEmitter { constructor () { // { 'click': [fn1, fn2], 'change': [fn] } this.subs = Object.create(null) } // 注册事件 $on (eventType, handler) { ...

    发布 订阅模式

      // 事件触发器
        class EventEmitter {
          constructor () {
            // { 'click': [fn1, fn2], 'change': [fn] }
            this.subs = Object.create(null)
          }
    
          // 注册事件
          $on (eventType, handler) {
          	debugger
            this.subs[eventType] = this.subs[eventType] || []
            this.subs[eventType].push(handler)
            debugger
          }
    
          // 触发事件
          $emit (eventType) {
          	debugger
            if (this.subs[eventType]) {
            	debugger
              this.subs[eventType].forEach(handler => {
                handler()
                debugger
              })
            }
          }
        }
    
        // 测试
        let em = new EventEmitter()
        em.$on('click', () => {
          console.log('click1')
        })
        em.$on('click', () => {
          console.log('click2')
        })
        em.$on('fn', ()=> {
        	console.log('fn')
        })
        em.$emit('click')
        em.$emit('fn')
    

    观察者模式

        // 发布者-目标
        class Dep {
          constructor () {
            // 记录所有的订阅者
            this.subs = []
          }
          // 添加订阅者
          addSub (sub) {
            if (sub && sub.update) {
              this.subs.push(sub)
            }
          }
          // 发布通知
          notify () {
            this.subs.forEach(sub => {
              sub.update()
            })
          }
        }
        // 订阅者-观察者
        class Watcher {
          update () {
            console.log('update')
          }
        }
    
        // 测试
        let dep = new Dep()
        let watcher1 = new Watcher()
        let watcher2 = new Watcher()
        
        dep.addSub(watcher1)
        dep.addSub(watcher2)
        
        dep.notify()
    

    两者的区别
    在这里插入图片描述

    展开全文
  • vue中发布订阅者模式

    千次阅读 2020-01-13 10:54:07
    https://www.jianshu.com/p/2ec316ca0f8b
    展开全文
  • Vue开发中,一些大型项目或者...这时候,我就推荐使用全新的开发模式,发布-订阅模式,它是基于Vue的on,on,on,off,$emit这三个API开发。原理是创建一个事件中心绑定到每个组件上面,只要有一个组件的有新的数据发布

    在Vue开发中,一些大型项目或者涉及到一些很复杂的组件,需要在不同父组件下面的子组件或者孙组件之间传递数据的。如下图:
    在这里插入图片描述
    可以看出,数据从2号传到4号,就得经过7号,10号,再从10号传到8号,再传到4号,过程非常复杂,代码也显得非常臃肿,难以维护。显然仅仅用单向数据流或者双向绑定,并不能很好的满足我们的开发要求。

    这时候,我就推荐使用全新的开发模式,发布-订阅模式,它是基于Vue的on,on,off,$emit这三个API开发。原理是创建一个事件中心绑定到每个组件上面,只要有一个组件的有新的数据发布到上面,其他已经订阅的组件就可以同步获取。如图:

    在这里插入图片描述
    这样一来,1号组件向4号组件发送数据,只要经过事件中心就行了,而4号组件只要$on订阅,这样就能获取数据。

    好的,原理就先说到这里,下面来个栗子:

    父组件://创建事件中心
    data(){
    return {
    eventBus: new Vue()
    }
    },
    provide(){
    return {
    eventBus: this.eventBus
    }
    }

    子组件://注入事件中心
    inject: [‘eventBus’]
    然后,无论子组件还是父组件都能通过这样来传递数据:

    this.eventBus.emit()//this.eventBus.emit() // 发布 this.eventBus.on() // 订阅
    this.eventBus.$off() // 取消订阅

    展开全文
  • Vue观察者模式

    2019-06-01 16:49:55
    观察者模式,又称订阅发布模式(总线),用于非父子关系的vue组件之间的值的传递。 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>组件间的传值,Bus/...
  • vue中自定义事件,就是用了发布订阅者模式,vm.$on通过自定义事件,事先订阅一件事,vm.$emit通过自定义事件发布消息,vm.$on会接收到。非父子组件数据传递,通常会用到这两个方法: 下边我们先来用js实现发布...
  • 要搞清楚vue中的双向数据绑定原理,就必须理解什么是发布、订阅者模式!! 1、首先想好谁是发布者、谁是订阅者(例如NBA专栏就是发布者,NBA球迷就是订阅者) 2、然后给发布者添加一个缓存列表,用于存放回调函数...
  • 发布订阅模式:也称作观察者模式,定义对象间的一对多的依赖关系,当一个对象的状态发 生改变 时,所有依赖于它的对象都将得到通知; 编码中常用的场景: //订阅事件 window.addEventListener('click',()=&...
  • 。。 转载于:https://www.cnblogs.com/stephenleee/p/10298939.html
  • 现在网上很多文章都讲不清楚什么是发布/订阅和观察者模式,要不就是复制粘贴过来的,百度都能查处一大推一模一样的文章。很气愤!!! 那么我将根据自己的理解去解释发布/订阅和观察者模式,如果有大佬觉得不对,...
  • class Event { constructor (){ this .events = {} } on(type, handler) { if (! this .events.hasOwnProperty(type)...// vue中数据劫持结合发布/订阅模式 ...对发布订阅者的通俗理解 ...观察者模式主要是监听
  • 手写Vue观察者模式

    2021-03-02 20:07:25
    // 发布者-目标 class Dep { ... // 记录所有的订阅者 this.subs = [] } // 添加订阅者 addSub (sub) { if (sub && sub.update) { this.subs.push(sub) } } // 发布通知 notify ...
  • 1:通过创建Bus 的特性来订阅 Vue.prototype.bus=new Vue() 2: 必须要保存当前的作用域 var this_=this &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; ...
  • class Vue { constructor(options) { // 获取到根元素 this.el = document.querySelector(options.el) // #root // 获取到数据 this.data = options.data ...
  • 使用背景如下图 二级菜单为一级菜单的子路由,二级菜单加载M...实现思路,使用事件总线,发布/订阅者模式 1. 创建一个公共的Vue实例 新建一个bus.js,导出实例 import Vue from "vue"; export default n...
  • zh众所周知,vue2.x版本是通过Object.defineProperty() 种的get进行拦截,set进行发送,其实这只是表面理解,实际运用的是JavaScript的 订阅者、发布者模式。首先,了解一下什么是订阅者、发布者模式 吧。w3c 上是...
  • Vue双向绑定(数据劫持,发布订阅者模式,diff算法) 最近一段时间自己找点东西学习,因为面试vue双向绑定问的挺多的,就想去深入研究一下本质原理,说是本质也不算,就是看了看别人的研究总结一点自己的看法和理解...
  • * 发布订阅者模式实现proxy数据劫持(vue)(TypeScript版) */ interface Publish { register(eventName : string, sub : Subscribe) : void;//注册订阅者 remove(eventName : string, sub ?: Subscribe) : ...
  • 当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线。 参考:http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&amp;fps=1 例子:...
  • 有人说观察者模式是发布订阅的升级版,也有人说发布订阅是进阶版的观察者模式,但是无论是观察者模式还是发布订阅模式,它们都是定义了对象之间的一种一对多的依赖关系。 观察者模式 当目标对象的状态发生改变时,...
  • 每当去找工作面试的时候,当面试官问到vue的双向数据绑定或者响应式原理的时候,面试者总是不加思索的张口就来:采用发布者-订阅者模式。。。。。一顿神侃。真不知道是梁静茹给了你们多少勇气说出的这句话。这么说...
  • 这里还有一个细节点需要处理,我们只要在订阅者Watcher初始化的时候才需要添加订阅者,所以需要做一个判断操作,因此可以在订阅器上做一下手脚:在Dep.target上缓存下订阅者,添加成功后再将其去掉就可以了。订阅者...
  • <!... <... <head> ...meta charset="UTF-8">...非父子组件间的传值(Bus/总线/发布订阅者模式/观察着模式)</title> <script src="./vue.js"></script> </head> &...
  • 订阅者 发布者 信号中心 我们假定,存在一个“信号中心”,某个任务执行完成,就向信号中心发布(publish)一个信号,其他任务可以向信号中心订阅(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就...
  • listen,增加订阅者,(对房子的要求,key是对房型的规定,fn往下看是一个打印订阅者信息的方法而已) trigger,是发布消息 最终是通过key来判断每个订阅者的需求,并进行正确的消息发布 let houseObj = {} .
  • ... MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成。View层代表的是视图、模版,负责将数据模型转化为UI展现出来。Model层代表的是模型、数据,可以在Model层中定义数据修改和操作的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 972
精华内容 388
关键字:

vue订阅者模式

vue 订阅