龙空技术网

js设计模式:观察者模式,一个小例子帮忙理解一下。

前端小菜鸡 825

前言:

眼前你们对“js订阅者模式和观察者模式代码”大概比较关心,朋友们都想要知道一些“js订阅者模式和观察者模式代码”的相关资讯。那么小编也在网络上搜集了一些对于“js订阅者模式和观察者模式代码””的相关资讯,希望大家能喜欢,咱们一起来学习一下吧!

首先定义一个构造函数,叫Observe,给构造函数添加一个属性dep,用于收集所有的订阅者,并在原型上添加一个patch方法,用于发布信息。

在这里我想解释一个小概念:所谓的订阅者(观察者),其实就是我们接到数据后进行处理的函数,Observe中的dep属性,收集的就是这一堆回调函数。

因此,我们的patch方法很简单,就是遍历dep中收集的回调函数(订阅者/观察者),并依次调用。

为了方便我们任何一个函数都可以做为观察者使用,直接在Function构造函数的原型上添加两个方法,一个叫subscribe(订阅),一个叫unsubscribe(取消订阅)。

在我们自定义的函数上调用subscribe方法:遍历我们传入的Observe实例中的dep属性,判断当前函数是否已经被dep收集,若没有被收集,则将当前函数加入到dep数组中。

在我们自定义的函数上调用unsubscribe方法:过滤我们传入的Observe实例中的dep属性(将当前函数剔除)。

图省事儿,我这边用vue项目进行演示。

图一是定义Observe构造函数,并为Function原型添加subscribe,unsubscribe方法。

图二是在vue中使用。

图三是演示效果(演示需要输入框回车才会patch信息)。

标签: #js订阅者模式和观察者模式代码