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

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

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

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

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

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

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

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

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

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

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

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

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

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

Part3： 頁面訂閱更新

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

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

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

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

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

1.首先我們創(chuàng)建一個(gè)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>

最后

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

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

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

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

最新評論