JS逐日一题: 小顺序页面之间怎样通讯?

2019年8月31日 142次阅读 来源: febobo

20190227

小顺序页面之间怎样通讯?

起首将通讯的模子枚举出来, 分为以下几种

  • 兄弟页面间通讯
  • 父途径页面向子途径页面通讯
  • 子途径页面向父途径页面通讯
通讯的体式格局
  • localStorage 当地存储
  • globalData 全局对象
  • eventBus 宣布定阅
  • PageModel 缓存全部pageModel至globalData
LocalStorage

应用onShow/onHide激活要领，经由过程localStorage通报数据

  onShow() {

    let newHello = wx.getStorageSync('__data');

    if (newHello) {
      this.setData({
        helloMsg: newHello
      });
      // 清空上次通讯数据
      wx.clearStorageSync('__data');
    }

  }
GlobalData

同localStorage一样，应用onShow/onHide激活要领，经由过程读写小顺序globalData完成数据通报

  let app = getApp();
  
  onShow() {

    let newHello = app.$$data.helloMsg;

    if (newHello) {
      this.setData({
        helloMsg: newHello
      });
      // 清空上次通讯数据
      app.$$data.helloMsg = null;
    }

  }
EventBus

eventBus基础实用合任何ＪＳ能够运转的环境, 经由过程定阅一个事宜，然后再宣布事宜的时候点收到音讯

// 起首你得完成一个eventBus, 这里假定你已完成了..

// Page A

  onLoad() {
    app.pubSub.on('hello', (msg) => {
      this.setData({
        helloMsg: 'hello :' + msg
      });
    });
  },

// Page B

  onLoad() {
    app.pubSub.emit('hello', 'JS逐日一题')
  },
PageModel

缓存页面PageModel, 通讯时，直接找到要通讯页面的PageModel,进而能够接见通讯页面PageModel一切的属性，要领

// 在app.js中add及get完成
    
  this.$$cache = {}

  add(pageModel) {
    // 增加时以__route__做为key，轻易在别的页面挪用
    let pagePath = this.__route__;

    this.$$cache[pagePath] = pageModel;
  }
  
  get(pagePath) {
    // 同时直接取走响应的pageModel
    return this.$$cache[pagePath];
  }
  
// Page A 在onLoad 时将自身(this)寄存到GlobalData中
  onLoad() {
    app.pages.add(this);
  },
  
// Page B
  onLoad() {
    // 拿到Page A一切属性及要领
    console.log(app.pages.get('pages/a/b')) 
  },

总结

  • localstorage 同步会壅塞历程，异步可能会错过最好取值机遇
  • globalData 直接操纵内存，比localstorage更快，注重全局变量污染
  • eventBus 轻易天真,引荐运用,注重解绑及反复绑定
  • PageModel 思绪很棒,但globalDatac寄存的pageModel过多时内存会不会爆不知道~_~

关于JS逐日一题

JS逐日一题能够看成是一个语音答题社区
天天应用碎片时候采纳60秒内的语音情势来完成当天的考题
群主在越日0点推送当天的参考答案

  • 注 毫不仅限于完成当天使命，更多是查漏补缺，进修群内别的同砚优异的答题思绪

点击到场答题

    原文作者：febobo
    原文地址: https://segmentfault.com/a/1190000018346520
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞