微信小程序的市場在進一步的擴大，而背后的技術(shù)社區(qū)仍在摸索著最好的實踐方案。我在幫助Nike，沃爾瑪以及一些創(chuàng)業(yè)公司開發(fā)小程序后，依舊認為使用小程序原生框架是一個更高效，穩(wěn)定的選擇，而使用原生框架唯獨缺少一個好的狀態(tài)管理庫，如果不引入狀態(tài)管理則會讓我們在模塊化，項目結(jié)構(gòu)以及單元測試上都有些捉襟見肘。

目前相對比較穩(wěn)健的做法是針對redux或者mobx做一個adaptor應(yīng)用到小程序中，但這樣需要自己想辦法打包引入外部庫，還要想怎么去寫這個adaptor，總顯得有些麻煩。于是我迸發(fā)出一個想法去寫一個專用于小程序的狀態(tài)管理庫，它使用起來足夠簡單并且可以通過小程序自己的npm機制安裝。

目前我已經(jīng)用這個開源庫開發(fā)了兩個電商小程序，在提高我開發(fā)效率的同時亦保證了程序的性能，所以接下來我想談?wù)勥@背后的理念以啟發(fā)更多開發(fā)者嘗試新的解決方案。

基于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
<text>{{ myName }}</text>
<button bindtap="updateNameToJames">update name to James</button>

最后

小程序因為有體積的限制，所以我希望在代碼量上也盡量做到輕量和便捷，所以目前這個狀態(tài)管理庫并沒有太多很復(fù)雜的功能，在小程序打包后所占用的體積也不到1kb，頗有點夠用就好的意思。

我也已經(jīng)用它開發(fā)了兩款小程序，在經(jīng)歷了一段時間的用戶使用后，我也更有信心說這個方案在小程序中是可行的。如果你有任何想法和建議，都歡迎告訴我。

項目Github: https://github.com/wwayne/minii

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論