基于Proxy的小程序狀態(tài)管理實(shí)現(xiàn)

本篇文章給大家分享的是有關(guān)基于Proxy的小程序狀態(tài)管理實(shí)現(xiàn)，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)專(zhuān)注于侯馬企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城網(wǎng)站開(kāi)發(fā)。侯馬網(wǎng)站建設(shè)公司,為侯馬等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站制作，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

基于Proxy的狀態(tài)管理實(shí)現(xiàn)

Proxy在小程序中已經(jīng)得到了足夠好的支持，目前并沒(méi)有發(fā)現(xiàn)在任何iPhone或者Android上不能使用Proxy的情況。而基于Proxy的狀態(tài)管理其實(shí)也就是訂閱監(jiān)聽(tīng)的模式，一方面監(jiān)聽(tīng)數(shù)據(jù)的變化，另一方面將這些變化傳達(dá)給訂閱的小程序頁(yè)面。

舉一個(gè)比較常見(jiàn)的例子，當(dāng)一個(gè)用戶(hù)從自己的主頁(yè)進(jìn)入用戶(hù)編輯頁(yè)面，然后更改了自己的用戶(hù)名點(diǎn)擊保存后，用戶(hù)主頁(yè)和用戶(hù)編輯頁(yè)上的用戶(hù)名這時(shí)候都應(yīng)該被更新。這背后的程序邏輯則是：更新這個(gè)行為將觸發(fā)Proxy去通知狀態(tài)管理庫(kù)，然后狀態(tài)管理庫(kù)負(fù)責(zé)檢查此時(shí)還在頁(yè)面棧中的所有頁(yè)面，更新訂閱了用戶(hù)名這個(gè)數(shù)據(jù)的頁(yè)面，如下圖：

Part1: 監(jiān)聽(tīng)數(shù)據(jù)變化

監(jiān)聽(tīng)數(shù)據(jù)變化其實(shí)就是監(jiān)聽(tīng)各個(gè)Store的屬性變化，實(shí)現(xiàn)上就是在各個(gè)Store前面加了一層Proxy，用更直觀的圖片來(lái)表示就是這樣：

當(dāng)一個(gè)Store被觀察以后，它的屬性就都變成了Proxy實(shí)例，當(dāng)這個(gè)屬性值是Object或者Array的時(shí)候，它內(nèi)部的值也會(huì)被包裝成Proxy實(shí)例，這樣無(wú)論多深層的數(shù)據(jù)變動(dòng)都能被監(jiān)聽(tīng)到。
而在Proxy的后面，Store的屬性其實(shí)是被另一套數(shù)據(jù)(紫色部分)所維護(hù)，這套數(shù)據(jù)不負(fù)責(zé)監(jiān)聽(tīng)，它就是純數(shù)據(jù)，針對(duì)屬性的任何變動(dòng)最后都會(huì)應(yīng)用到這套數(shù)據(jù)上來(lái)，它的作用是維護(hù)和返回最新的數(shù)據(jù)。

實(shí)現(xiàn)細(xì)節(jié)： https://github.com/wwayne/minii/blob/master/src/api/observe.js

Part2: 頁(yè)面數(shù)據(jù)綁定

因?yàn)樾〕绦蛎總€(gè)頁(yè)面的js都是向Page中傳遞一個(gè)對(duì)象，這就讓我們有機(jī)會(huì)包裝這個(gè)對(duì)象，從而實(shí)現(xiàn)：

進(jìn)入頁(yè)面后，將頁(yè)面保存在頁(yè)面棧中將來(lái)自狀態(tài)管理庫(kù)的數(shù)據(jù)映射到這個(gè)頁(yè)面的data上來(lái)頁(yè)面退出時(shí)，將頁(yè)面從頁(yè)面棧中移除

實(shí)現(xiàn)細(xì)節(jié)： https://github.com/wwayne/minii/blob/master/src/api/mapToData.js

Part3： 頁(yè)面訂閱更新

當(dāng)數(shù)據(jù)被監(jiān)聽(tīng)到變化后，我們需要依次做兩件事，先是找到所有存儲(chǔ)在頁(yè)面棧里的頁(yè)面，然后根據(jù)各個(gè)頁(yè)面訂閱的數(shù)據(jù)來(lái)檢查變化，如果有變化就通知這些頁(yè)面，從而讓它們?nèi)ビ|發(fā)setData更新頁(yè)面。

實(shí)現(xiàn)細(xì)節(jié)：https://github.com/wwayne/minii/blob/master/src/core.js

使用狀態(tài)管理的例子

有了狀態(tài)管理庫(kù)，現(xiàn)在我們就來(lái)實(shí)現(xiàn)一開(kāi)始舉例的更新用戶(hù)信息的操作，我們的文件路徑如下：

stores/
 user.js
pages/
 userEdit/
   index.js
   index.wxml

1.首先我們創(chuàng)建一個(gè)Store保存用戶(hù)的信息，并且監(jiān)聽(tīng)它的變化：

// stores/user.js
import { observe } from 'minii'

Class UserStore {
 constructor () {
   this.name = 'bob'
 }

 changeName (name) {
   this.name = name
 }
}

export default observe(new UserStore(), 'user')

2.接著在我們的小程序頁(yè)面訂閱Store的信息

// pages/userEdit/index.js
import { mapToData } from 'minii'
import userStore from '../../stores/user'

const connect = mapToData(state => (({
 myName: state.user.name
}))
Page(connect({
 updateNameToJames () {
  userStore. changeName('james')
 }
}))

3.完成，現(xiàn)在可以在頁(yè)面中使用和更新數(shù)據(jù)了

// pages/userEdit/index.wxml
<text>{{ myName }}</text>
<button bindtap="updateNameToJames">update name to James</button>

以上就是基于Proxy的小程序狀態(tài)管理實(shí)現(xiàn)，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：基于Proxy的小程序狀態(tài)管理實(shí)現(xiàn)
文章來(lái)源：http://muchs.cn/article8/jchiop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷(xiāo)、、面包屑導(dǎo)航、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)