机制:
跨小顺序页面的事宜注册,派发,播送机制。
代码完成
var broadcast = {
// 经由过程挪用 broadcast.on 注册事宜。其他页面都可以经由过程挪用 broadcast.fire 触发该事宜
// 参数申明:假如 isUniq 为 true,该注册事宜将唯一存在;假如值为 false或许没有传值,每注册一个事宜都将会被存储下来
on: function (name, fn, isUniq) {
this._on(name, fn, isUniq, false)
},
// 经由过程挪用 broadcast.once 注册的事宜,在触发一次以后就会被烧毁
once: function (name, fn, isUniq) {
this._on(name, fn, isUniq, true)
},
_on: function (name, fn, isUniq, once) {
var eventData
eventData = broadcast.data
var fnObj = {
fn: fn,
once: once
}
if (!isUniq && eventData.hasOwnProperty(name)) {
eventData[name].push(fnObj)
} else {
eventData[name] = [fnObj]
}
return this
},
// 触发事宜
// 参数申明:name 示意事宜名,data 示意传递给事宜的参数
fire: function (name, data, thisArg) {
console.log('[broadcast fire]: ' + name, data)
var fn, fnList, i, len
thisArg = thisArg || null
fnList = broadcast.data[name] || []
if (fnList.length) {
for (i = 0, len = fnList.length; i < len; i++) {
fn = fnList[i].fn
fn.apply(thisArg, [data, name])
if (fnList[i].once) {
fnList.splice(i, 1)
i--
len--
}
}
}
return this
},
data: {}
}
module.exports = broadcast
营业上的运用举例
1 app.js 内里注册一个监听上岸页面登录胜利的事宜
步骤以下:
注册一个监听登录胜利的事宜
// 引入 broadcast
const {
broadcast
} = require('utils/util')
// 注册一个监听登录胜利的事宜
// 在login页面实行
broadcast.on('login_success', function () {
wx.redirectTo({
url: `/pages/${name}/index`
})
})
在 login 页面登录胜利后,触发该事宜
// 引入 broadcast
var {
broadcast
} = require('../../utils/util')
// 触发事宜 login_success
broadcast.fire('login_success')
2 在商品报损页注册一个监听报损商品 code 的事宜
这个例子重要表现了运用 broadcast.fire 举行传参的功用
// 引入 broadcast
var {
broadcast
} = require('../../utils/util')
// 触发事宜 setBrokenBikeCode
// "bikeid": "0100010010"
broadcast.fire('setBrokenBikeCode', '0100010010')
// 引入 broadcast
var {
broadcast
} = require('../../utils/util')
...
function next (bikecode) {
that.setData({
bikecode
})
}
...
// 注册事宜 setBrokenBikeCode
broadcast.on('setBrokenBikeCode', (bikecode) => {
next(bikecode)
})
3 恰当的时刻运用 broadcast.on 的时刻须要绑定 this 值
- 绑定体式格局1:
var that = this
broadcast.on('showRiding', function() {
console.log(this) // 值为null
that.showRiding()
})
缘由:如上代码可见,在 broadcast.on 内里打印出的 this 值为 null,在这个函数体内 this 指向不明确所以值为 null。一般我们须要特地绑定 this, 然后才运用
- 绑定体式格局2:
引荐运用
broadcast.on('showRiding', function() {
this.showRiding()
}.bind(this))