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

我們一直強調(diào)成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計對于企業(yè)的重要性,如果您也覺得重要,那么就需要我們慎重對待,選擇一個安全靠譜的網(wǎng)站建設(shè)公司,企業(yè)網(wǎng)站我們建議是要么不做，要么就做好,讓網(wǎng)站能真正成為企業(yè)發(fā)展過程中的有力推手。專業(yè)網(wǎng)站設(shè)計公司不一定是大公司,創(chuàng)新互聯(lián)作為專業(yè)的網(wǎng)絡(luò)公司選擇我們就是放心。

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

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

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

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

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

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

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

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

因為小程序每個頁面的js都是向Page中傳遞一個對象，這就讓我們有機會包裝這個對象，從而實現(xiàn)：

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

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

Part3： 頁面訂閱更新

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

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

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

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

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

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

// 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.接著在我們的小程序頁面訂閱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)在可以在頁面中使用和更新數(shù)據(jù)了

// pages/userEdit/index.wxml
{{ myName }}
update name to James

以上就是基于Proxy的小程序狀態(tài)管理實現(xiàn)，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：基于Proxy的小程序狀態(tài)管理實現(xiàn)-創(chuàng)新互聯(lián)
文章來源：http://weahome.cn/article/iisip.html