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