美文网首页
订阅-发布模式实现小程序的页面通讯

订阅-发布模式实现小程序的页面通讯

作者: 磨人的磨磨虫 | 来源:发表于2019-04-03 11:13 被阅读0次

    实现页面之间通讯的方法,无非就是把方法订阅(监听)在小程序全局状态下,然后在业务场景中发布(执行),这里写了一个事件类 订阅 发布 销毁
    废话不多说直接上代码看

    //event.js
    
    class Event {
      /** on 方法把订阅者所想要订阅的事件及相应的回调函数记录在 Event 对象的 _cbs 属性中*/
      on(event, fn) {
        if (typeof fn != "function") {
          console.error('fn must be a function')
          return
        }
        this._cbs = this._cbs || {};
        (this._cbs[event] = this._cbs[event] || []).push(fn)
      }
      /**emit 方法接受一个事件名称参数,在 Event 对象的 _cbs 属性中取出对应的数组,并逐个执行里面的回调函数 */
      emit(event) {
        this._cbs = this._cbs || {}
        var callbacks = this._cbs[event], args
        if (callbacks) {
          callbacks = callbacks.slice(0)
          args = [].slice.call(arguments, 1)
          for (var i = 0, len = callbacks.length; i < len; i++) {
            callbacks[i].apply(null, args)
          }
        }
      }
      /** off 方法接受事件名称和当初注册的回调函数作参数,在 Event 对象的 _cbs 属性中删除对应的回调函数。*/
     off(event, fn) {
        this._cbs = this._cbs || {}
        // all
        if (!arguments.length) {
          this._cbs = {}
          return
        }
        var callbacks = this._cbs[event]
        if (!callbacks) return
        // remove all handlers
        if (arguments.length === 1) {
          delete this._cbs[event]
          return
        }
     // remove specific handler
        var cb
        for (var i = 0, len = callbacks.length; i < len; i++) {
          cb = callbacks[i]
          if (cb === fn || cb.fn === fn) {
            callbacks.splice(i, 1)
            break
          }
        }
        return
      }
    }
    export default Event
    
    //app.js
    import Event form event.js
    //挂载到wx的实例上
    wx.event=new Event()
    

    使用方法如下:

    //a页面 a.js page
    page{
      onload(){
        //订阅
        wx.event.on('testFunc',(e)=>{
            console.log(e)//{id:1}
            console.log('订阅事件')
        })
      }
    }
    
    //b页面 b.js page
    page{
     showEvent(){
        //发布
        wx.event.emit('testFunc',{id:1})
      }
    }
    

    相关文章

      网友评论

          本文标题:订阅-发布模式实现小程序的页面通讯

          本文链接:https://www.haomeiwen.com/subject/kreabqtx.html