js_Event registration, dispatch, and broadcast mechanism across mini program pages

Mechanism:

Event registration, dispatch and broadcast mechanism across mini program pages.

Code implementation

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

Business application example

1 Register a monitoring login in app.js The event of successful login on the page

The steps are as follows:

Register an event to listen for successful login

// 引入 broadcast
const {
  broadcast
} = require('utils/util')
// 注册一个监听登录成功的事件
// 在login页面执行
broadcast.on('login_success', function () {
  wx.redirectTo({
    url: `/pages/${name}/index`
  })
})

After the login page is successfully logged in, this event is triggered

// 引入 broadcast
var {
  broadcast
} = require('../../utils/util')
// 触发事件 login_success
broadcast.fire('login_success')

2 Register an event to monitor the code of the damaged product on the product damage report page

This example mainly reflects the function of using broadcast.fire to pass parameters

// 引入 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 When using broadcast.on appropriately, you need to bind this value

• Binding method 1:

var that = this
broadcast.on('showRiding', function() {
 console.log(this) // 值为null
 that.showRiding()
})

Reason: As can be seen from the above code, the value of this printed in broadcast.on is null. In the body of this function, the point of this is unclear, so the value is null. Usually we need to specifically bind this before we can use

• Binding method 2:

Recommended to use

broadcast.on('showRiding', function() {
 this.showRiding()
}.bind(this))

Related Article:

Introduction to WeChat Mini Program Development Registration Page

How to monitor events when jumping between WeChat Mini Program pages

The above is the detailed content of js_Event registration, dispatch, and broadcast mechanism across mini program pages. For more information, please follow other related articles on the PHP Chinese website!