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

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

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

基于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>

最后

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

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

項(xiàng)目Github: https://github.com/wwayne/minii

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

最新評(píng)論