莫方教程网

专业程序员编程教程与实战案例分享

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信息)。





控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言