broadcast.js

메커니즘:
애플 릿 페이지 를 뛰 어 넘 는 이벤트 등록, 배포, 방송 체제.
코드 구현

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. 상품 파손 신고 페이지 에 감청 신고 상품 코드 를 등록 하 는 사건
이 예 는 주로 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))