資訊專欄INFORMATION COLUMN
摘要：小程序頁(yè)面之間如何通信首先將通信的模型列舉出來分為以下幾種兄弟頁(yè)面間通信父路徑頁(yè)面向子路徑頁(yè)面通信子路徑頁(yè)面向父路徑頁(yè)面通信通信的方式本地存儲(chǔ)全局對(duì)象發(fā)布訂閱緩存整個(gè)至利用激活方法，通過傳遞數(shù)據(jù)清空上次通信數(shù)據(jù)同一樣，利用激活方法，通過讀寫
20190227
小程序頁(yè)面之間如何通信?
首先將通信的模型列舉出來, 分為以下幾種
兄弟頁(yè)面間通信
父路徑頁(yè)面向子路徑頁(yè)面通信
子路徑頁(yè)面向父路徑頁(yè)面通信
localStorage 本地存儲(chǔ)
globalData 全局對(duì)象
eventBus 發(fā)布訂閱
PageModel 緩存整個(gè)pageModel至globalData
利用onShow/onHide激活方法，通過localStorage傳遞數(shù)據(jù)
onShow() {
let newHello = wx.getStorageSync("__data");
if (newHello) {
this.setData({
helloMsg: newHello
});
// 清空上次通信數(shù)據(jù)
wx.clearStorageSync("__data");
}
}
同localStorage一樣，利用onShow/onHide激活方法，通過讀寫小程序globalData完成數(shù)據(jù)傳遞
let app = getApp();
onShow() {
let newHello = app.$$data.helloMsg;
if (newHello) {
this.setData({
helloMsg: newHello
});
// 清空上次通信數(shù)據(jù)
app.$$data.helloMsg = null;
}
}
eventBus基本適用合任何ＪＳ可以運(yùn)行的環(huán)境, 通過訂閱一個(gè)事件，然后再發(fā)布事件的時(shí)間點(diǎn)收到消息
// 首先你得實(shí)現(xiàn)一個(gè)eventBus, 這里假設(shè)你已經(jīng)實(shí)現(xiàn)了..
// Page A
onLoad() {
app.pubSub.on("hello", (msg) => {
this.setData({
helloMsg: "hello :" + msg
});
});
},
// Page B
onLoad() {
app.pubSub.emit("hello", "JS每日一題")
},
緩存頁(yè)面PageModel, 通信時(shí)，直接找到要通信頁(yè)面的PageModel,進(jìn)而可以訪問通信頁(yè)面PageModel所有的屬性，方法
// 在app.js中add及get實(shí)現(xiàn)
this.$$cache = {}
add(pageModel) {
// 添加時(shí)以__route__做為key，方便在其它頁(yè)面調(diào)用
let pagePath = this.__route__;
this.$$cache[pagePath] = pageModel;
}
get(pagePath) {
// 同時(shí)直接取走相應(yīng)的pageModel
return this.$$cache[pagePath];
}
// Page A 在onLoad 時(shí)將本身(this)存放到GlobalData中
onLoad() {
app.pages.add(this);
},
// Page B
onLoad() {
// 拿到Page A所有屬性及方法
console.log(app.pages.get("pages/a/b"))
},
總結(jié)
localstorage 同步會(huì)阻塞進(jìn)程，異步可能會(huì)錯(cuò)過最佳取值時(shí)機(jī)
globalData 直接操作內(nèi)存，比localstorage更快，注意全局變量污染
eventBus 方便靈活,推薦使用,注意解綁及重復(fù)綁定
PageModel 思路很棒,但globalDatac存放的pageModel過多時(shí)內(nèi)存會(huì)不會(huì)爆不知道~_~
關(guān)于JS每日一題JS每日一題可以看成是一個(gè)語(yǔ)音答題社區(qū)
每天利用碎片時(shí)間采用60秒內(nèi)的語(yǔ)音形式來完成當(dāng)天的考題
群主在次日0點(diǎn)推送當(dāng)天的參考答案
注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補(bǔ)缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路
點(diǎn)擊加入答題
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/102241.html
摘要：小程序跳轉(zhuǎn)頁(yè)面有幾種方式有什么不同在小程序中每個(gè)頁(yè)面可以看成是一個(gè)，全部以棧的形式進(jìn)行管理最多五層在說跳轉(zhuǎn)方式之前我們先來溫習(xí)一下棧和堆的區(qū)別管理方式不同棧是系統(tǒng)編譯器啟動(dòng)管理，不需要程序員手動(dòng)管理堆的釋放由程序員手動(dòng)管理，不及時(shí)回收容易產(chǎn) 20190228 小程序跳轉(zhuǎn)頁(yè)面有幾種方式？ 有什么不同? 在小程序中每個(gè)頁(yè)面可以看成是一個(gè)pageModel，pageModel全部以棧的形式進(jìn)...
摘要：提交請(qǐng)求的對(duì)象并不明確知道哪一個(gè)對(duì)象將會(huì)處理它也就是該請(qǐng)求有一個(gè)隱式的接受者。 20190412期 設(shè)計(jì)模式-如何理解職責(zé)鏈模式? 定義: 使多個(gè)對(duì)象都有機(jī)會(huì)處理請(qǐng)求，從而避免請(qǐng)求的發(fā)送者和接收者之間的耦合關(guān)系，將這些對(duì)象連成一條鏈，并沿著這條鏈傳遞該請(qǐng)求，直到有一個(gè)對(duì)象處理它為止 也就是說，請(qǐng)求以后，從第一個(gè)對(duì)象開始，鏈中收到請(qǐng)求的對(duì)象要么親自處理它，要么轉(zhuǎn)發(fā)給鏈中的下一個(gè)候選者。提...
摘要：期如何理解中定義塊格式化上下文，是頁(yè)面的可視化渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。 20190416期 如何理解CSS中BFC? 定義: 塊格式化上下文（Block Formatting Context，BFC） 是Web頁(yè)面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。 BFC 特性及應(yīng)用 同一個(gè)...
摘要：，文本節(jié)點(diǎn)的比較，需要修改，則會(huì)調(diào)用。，新節(jié)點(diǎn)沒有子節(jié)點(diǎn)，老節(jié)點(diǎn)有子節(jié)點(diǎn)，直接刪除老節(jié)點(diǎn)。所以一句話，的作用主要是為了高效的更新虛擬。 20190125 Vue中的diff算法？ 概念: diff算法是一種優(yōu)化手段，將前后兩個(gè)模塊進(jìn)行差異對(duì)比，修補(bǔ)(更新)差異的過程叫做patch(打補(bǔ)丁) 為什么vue,react這些框架中都會(huì)有diff算法呢? 我們都知道渲染真實(shí)dom的開銷是很大的...
摘要：基于此我們可以通過獲取頭部資源加載完的時(shí)刻來近似統(tǒng)計(jì)白屏?xí)r間代碼理解測(cè)試時(shí)間起點(diǎn)，實(shí)際統(tǒng)計(jì)起點(diǎn)為時(shí)間終點(diǎn)頭部資源加載時(shí)間首屏?xí)r間首屏?xí)r間的統(tǒng)計(jì)比較復(fù)雜，因?yàn)樯婕皥D片等多種元素及異步渲染等方式。 20190318期 前端性能監(jiān)控你會(huì)監(jiān)控哪些數(shù)據(jù)? 如何做? 開始之前給大家推薦兩個(gè)檢查網(wǎng)頁(yè)性能的地址 https://developers.google.com... https://www...
閱讀 1959·2021-09-30 09:46
閱讀 1370·2019-08-30 15:43
閱讀 1129·2019-08-29 13:28
閱讀 1929·2019-08-29 11:24
閱讀 1687·2019-08-26 13:22
閱讀 3929·2019-08-26 12:01
閱讀 1823·2019-08-26 11:33
閱讀 3246·2019-08-23 15:34
