龙空技术网

javascript发布订阅模式,小程序跨页面通信

浪里的大白条 953

前言:

现时各位老铁们对“js订阅者模式”大体比较看重,同学们都想要分析一些“js订阅者模式”的相关文章。那么小编也在网摘上搜集了一些对于“js订阅者模式””的相关资讯,希望小伙伴们能喜欢,朋友们一起来了解一下吧!

发布订阅模式

它的作用在于以下:

1.发布—订阅模式可以广泛应用于异步编程中,这是一种替代传递回调函数的方案。 比如,我们可以订阅ajax请求的error、success等事件。或者如果想在动画的每一帧完成之后做一些事情,那我们可以订阅一个事件,然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发布—订阅模式,我们就无需过多关注对象在异步运行期间的内部状态,而只需要订阅感兴趣的事件发生点。

2.一个对象不用再显式地调用另外一个对象的某个接口。发布—订阅模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响它们之间相互通信。当有新的订阅者出现时,发布者的代码不需要任何修改;同样发布者需要改变时,也不会影响到之前的订阅者。只要之前约定的事件名没有变化,就 可以自由地改变它们。

使用场景如下:

在小程序中使用步骤

1、App 是小程序的实例,在每个 Page 里都能通过执行 getApp 函数获取到它。我们可以把 Event 类的实例挂载在 App 中,方便每个 Page 去调用。

const Event = require('./libs/Event')App({ event: new Event(), ...})

2、订单列表页在 onLoad 生命周期中订阅 “afterPaySuccess” 事件。

//order_list.jsvar app = getApp()Page({ onLoad: function(){ app.event.listen('afterPaySuccess', this.afterPaySuccess, this) }, afterPaySuccess: function(orderId) { ... }, ...})

3、在订单详情页支付成功的回调中,发布 “afterPaySuccess” 事件,同时带上订单 id 参数

//order_detail.jsvar app = getApp()Page({ raisePayment: function() { ...  app.event.trigger('afterPaySuccess', orderId) }, ...})

4、所有 Page 的 onUnload 生命周期,必须注销掉之前订阅的事件。注销方法 off 的调用姿势有三种,不过还是建议注销当前 Page 所订阅的事件,而不是注销所有的。

var app = getApp()Page({ onUnload: function(){ // remove all app.event.remove() // remove all callbacks app.event.remove('afterPaySuccess') // remove specific callbacks app.event.remove('afterPaySuccess', this.afterPaySuccess) }, ...})

标签: #js订阅者模式