問題

在之前開發(fā)微信小程序的時(shí)候，獲取用戶信息、openid還有地理位置這些信息的時(shí)候，都是采用Promise的方式異步獲取，但是這樣的話在頁面和App.js中都獲取就可能造成請求重復(fù)的問題。

比如為了在每個(gè)頁面都能獲取到這些共享信息，都會(huì)選擇在App.js中進(jìn)行獲取，然后在頁面級進(jìn)行獲取，這兩次獲取的時(shí)間間隔較小時(shí)就可能導(dǎo)致前一個(gè)請求還未獲取到數(shù)據(jù)，后一個(gè)請求就會(huì)再次進(jìn)行獲取，這樣就產(chǎn)生了兩次請求。

還有一個(gè)問題就是書寫麻煩(雖然也能通過async await簡化)，比如

onLoad() {
 app.getUserInfo()
 .then(userInfo => {
 
 }).catch(err => { /* 錯(cuò)誤處理 */ });
 
 // 如果同時(shí)需要userInfo和openid，可能就是如下形式：
 Promise.all([app.getUserInfo(), app.getOpenid()])
 .then(res => {
 
 }).catch(err => { /* 錯(cuò)誤處理 */ });
}

正好周末的時(shí)候突然想到了vue的watch語法，利用一些相關(guān)的知識，就可以解決這個(gè)麻煩的問題了。

解決思路

雙向綁定

vue的雙向綁定原理，3.0將會(huì)采用Proxy監(jiān)聽數(shù)據(jù)變化，不過考慮到小程序這邊的Proxy兼容性我不知道，所以采用了2.0的Object.defineProperty來監(jiān)聽數(shù)據(jù)的變化。

主要還是攔截設(shè)置的操作，在進(jìn)行賦值時(shí)，將新舊值通知至監(jiān)聽者。

觀察者模式

在頁面級的onLoad監(jiān)聽app.globalData各個(gè)鍵名的事件，而在app.js的onLoad中則使用Object.defineProperty重新定義app.globalData，這樣一旦app.globalData相應(yīng)的鍵值發(fā)生了變化，就會(huì)通知監(jiān)聽的頁面該值發(fā)生了變化。

模塊化的引用

觀察者模式導(dǎo)出的是一個(gè)對象（類實(shí)例），而不是一個(gè)類，所以在導(dǎo)入的時(shí)候這個(gè)對象是共享的，就可以通過這個(gè)對象將app.js和其他頁面聯(lián)系起來。

至于模塊加載的實(shí)質(zhì)，ES6模塊加載的機(jī)制，與CommonJS模塊完全不同。感興趣的可以去看看這個(gè)。

封裝Page

小程序的Page函數(shù)本身是不支持watch，但是我們可以自定義一個(gè)函數(shù)，進(jìn)行參數(shù)合并就可以了。

在頁面onLoad時(shí)先遍歷watch屬性，對app.globalData進(jìn)行監(jiān)聽，可以參考vue的watch用法。

頁面onUnload時(shí)就會(huì)進(jìn)行銷毀，此時(shí)也應(yīng)該取消監(jiān)聽，這些我都封裝過了，不用手動(dòng)處理了。

有了這些思路，用不了多久，一個(gè)雛形就出來了，經(jīng)過手動(dòng)測試，感覺沒什么問題，我就發(fā)布到npm了，大家感興趣的可以安裝體驗(yàn)一下。

安裝

npm i wx-watch -S --production

使用

// app.js
var { watchData, } = require('/miniprogram_npm/wx-watch/index.js');

App({
 onLaunch() {
 this.watchData(); /* 監(jiān)聽this.globalData的變化，并觸發(fā)事件，其他頁面監(jiān)聽的值必須在globalData中預(yù)先定義，否則無法監(jiān)聽 */
 },
 watchData,
 globalData: {
 userInfo: null,
 }
});

// 其他需要監(jiān)聽globalData的頁面.js
var { getPage } = require('../../miniprogram_npm/wx-watch/index.js');
const app = getApp();

/**
 * getPage(頁面參數(shù)，app) app必傳，因?yàn)榉庋b的時(shí)候訪問不到，就只能傳參了
*/
getPage({
 watch: {
 userInfo(userInfo, oldUserInfo) {
 console.log(`來自app.glodalData的userInfo`);
 }
 },
 // 其他參數(shù)
}, app)

github:  github.com/ma125120/wx…

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對腳本之家的支持。