Westore 1.0 正式釋出 - 小程式框架一個就夠
世界上最小卻強大的小程式框架 - ofollow,noindex" target="_blank">100多行程式碼 搞定全域性狀態管理和跨頁通訊
Github: https://github.com/dntzhang/westore
眾所周知,小程式通過頁面或元件各自的 setData 再加上各種父子、祖孫、姐弟、嫂子與堂兄等等元件間的通訊會把程式搞成一團漿糊,如果再加上跨頁面之間的元件通訊,會讓程式非常難維護和除錯。雖然市面上出現了許多技術棧編譯轉小程式的技術,但是我覺沒有戳中小程式的痛點。小程式不管從元件化、開發、除錯、釋出、灰度、回滾、上報、統計、監控和最近的雲能力都非常完善,小程式的工程化簡直就是前端的典範。而開發者工具也在持續更新,可以想象的未來,元件佈局的話未必需要寫程式碼了。所以最大的痛點只剩下狀態管理和跨頁通訊。
受 Omi 框架 的啟發,且專門為小程式開發的 JSON Diff 庫 ,所以有了 westore 全域性狀態管理和跨頁通訊框架讓一切盡在掌握中,且受高效能 JSON Diff 庫的利好,長列表滾動載入顯示變得輕鬆可駕馭。總結下來有如下特性和優勢:
- 和 Omi 同樣簡潔的 Store API
- 超小的程式碼尺寸(包括 json diff 共100多行)
- 尊重且順從小程式的設計(其他轉譯庫相當於反其道行)
- this.update 比原生 setData 的效能更優,更加智慧
API
Westore API 只有三個, 大道至簡:
- create(store, option) 建立頁面
- create(option) 建立元件
- this.update() 更新頁面或元件
使用指南
定義全域性 store
export default { data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), logs: [] }, logMotto: function () { console.log(this.data.motto) } }
你不需要在頁面和元件上再宣告 data 屬性。如果申明瞭也沒關係,會被 Object.assign 覆蓋到 store.data 上。後續只需修改 this.store.data 便可。
建立頁面
import store from '../../store' import create from '../../utils/create' const app = getApp() create(store, { onLoad: function () { if (app.globalData.userInfo) { this.store.data.userInfo = app.globalData.userInfo this.store.data.hasUserInfo = true this.update() } else if (this.data.canIUse) { app.userInfoReadyCallback = res => { this.store.data.userInfo = res.userInfo this.store.data.hasUserInfo = true this.update() } } else { wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.store.data.userInfo = res.userInfo this.store.data.hasUserInfo = true this.update() } }) } } })
建立 Page 只需傳入兩個引數,store 從根節點注入,所有子元件都能通過 this.store 訪問。
繫結資料
<view class="container"> <view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> <hello></hello> </view>
和以前的寫法沒有差別,直接把 store.data
作為繫結資料來源。
更新頁面
this.store.data.any_prop_you_want_to_change = 'any_thing_you_want_change_to' this.update()
建立元件
import create from '../../utils/create' create({ ready: function () { //you can use this.store here }, methods: { //you can use this.store here } })
和建立 Page 不一樣的是,建立元件只需傳入一個引數,不需要傳入 store,因為已經從根節點注入了。
更新元件
this.store.data.any_prop_you_want_to_change = 'any_thing_you_want_change_to' this.update()
setData 和 update 對比
拿官方模板示例的 log 頁面作為例子:
this.setData({ logs: (wx.getStorageSync('logs') || []).map(log => { return util.formatTime(new Date(log)) }) })
使用 westore 後:
this.store.data.logs = (wx.getStorageSync('logs') || []).map(log => { return util.formatTime(new Date(log)) }) this.update()
看似一條語句變成了兩條語句,但是 this.update 呼叫的 setData 是 diff 後的,所以傳遞的資料更少。
跨頁面同步資料
使用 westore 你不用關係跨頁資料同步,你只需要專注 this.store.data 便可,修改完在任意地方呼叫 update 便可:
this.update()
除錯
console.log(getApp().globalData.store.data)
超大型小程式最佳實踐(兩種方案)
不排除小程式被做大得可能,接觸的最大的小程式有 60+ 的頁面,所以怎麼管理?這裡給出了兩個最佳實踐方案。
- 第一種方案,拆分 store 的 data 為不同模組,如:
export default { data: { commonA: 'a', commonB: 'b', pageA: { a: 1 xx: 'xxx' }, pageB: { b: 2, c: 3 } }, xxx: function () { console.log(this.data) } }
- 第二種方案,拆分 store 的 data 到不同檔案且合併到一個 store 暴露給 create 方法,如:
a.js
export default { data: { a: 1 xx: 'xxx' }, aMethod: function (num) { this.data.a += num } }
b.js
export default { data: { b: 2, c: 3 }, bMethod: function () { } }
store.js
import a from 'a.js' import b from 'b.js' export default { data: { commonNum: 1, commonB: 'b', pageA: a.data pageB: b.data }, xxx: function () { //you can call the methods of a or b and can pass args to them console.log(a.aMethod(commonNum)) }, xx: function(){ } }
當然,也可以不用按照頁面拆分檔案或模組,也可以按照領域來拆分,這個很自由,視情況而定。
原理
--------------------------------------------------------- | this.update|→|json diff|→| setData()-setData()...|→之後就是黑盒(小程式官方實現,但是 dom/apply diff 肯定是少不了) ---------------------------------------------------------
雖然和 Omi 一樣同為 store.updata 但是卻有著本質的區別。Omi 的如下:
-------------------------------------------------------------------------------- |this.update|→|setState|→|jsx rerender|→|vdom diff → apply diff...| --------------------------------------------------------------------------------
都是資料驅動檢視,但本質不同,原因:
- 小程式 store 和 dom 不在同一個環境,先在 js 環境進行 json diff,然後使用 diff 結果通過 setData 通訊
- web 裡使用 omi 的話 store 和 dom 在同一環境,setState 直接驅動的 vdom diff 然後把 diff 結果作用在真是 dom 上
JSON Diff
先看一下我為 westore 專門定製開發的 JSON Diff 庫 的能力:
diff({ a: 1, b: 2, c: "str", d: { e: [2, { a: 4 }, 5] }, f: true, h: [1], g: { a: [1, 2], j: 111 } }, { a: [], b: "aa", c: 3, d: { e: [3, { a: 3 }] }, f: false, h: [1, 2], g: { a: [1, 1, 1], i: "delete" }, k: 'del' })
Diff 的結果是:
{ "a": 1, "b": 2, "c": "str", "d.e[0]": 2, "d.e[1].a": 4, "d.e[2]": 5, "f": true, "h": [1], "g.a": [1, 2], "g.j": 111, "g.i": null, "k": null }
Diff 原理:
- 同步所有 key 到當前 store.data
- 攜帶 path 和 result 遞迴遍歷對比所有 key value
export default function diff(current, pre) { const result = {} syncKeys(current, pre) _diff(current, pre, '', result) return result }
同步上一輪 state.data 的 key 主要是為了檢測 array 中刪除的元素或者 obj 中刪除的 key。
小程式 setData
setData 是小程式開發中使用最頻繁的介面,也是最容易引發效能問題的介面。在介紹常見的錯誤用法前,先簡單介紹一下 setData 背後的工作原理。setData 函式用於將資料從邏輯層傳送到檢視層(非同步),同時改變對應的 this.data 的值(同步)。
其中 key 可以以資料路徑的形式給出,支援改變陣列中的某一項或物件的某個屬性,如 array[2].message,a.b.c.d,並且不需要在 this.data 中預先定義。比如:
this.setData({ 'array[0].text':'changed data' })
所以 diff 的結果可以直接傳遞給 setData
,也就是 this.update
。
setData 工作原理
小程式的檢視層目前使用 WebView 作為渲染載體,而邏輯層是由獨立的 JavascriptCore 作為執行環境。在架構上,WebView 和 JavascriptCore 都是獨立的模組,並不具備資料直接共享的通道。當前,檢視層和邏輯層的資料傳輸,實際上通過兩邊提供的 evaluateJavascript 所實現。即使用者傳輸的資料,需要將其轉換為字串形式傳遞,同時把轉換後的資料內容拼接成一份 JS 指令碼,再通過執行 JS 指令碼的形式傳遞到兩邊獨立環境。
而 evaluateJavascript 的執行會受很多方面的影響,資料到達檢視層並不是實時的。
常見的 setData 操作錯誤:
- 頻繁的去 setData
- 每次 setData 都傳遞大量新資料
- 後臺態頁面進行 setData
上面是官方擷取的內容。使用 webstore 的 this.update 本質是先 diff,再執行一連串的 setData,所以可以保證傳遞的資料每次維持在最小。既然可以使得傳遞資料最小,所以第一點和第三點雖有違反但可以商榷。
Update
這裡區分在頁面中的 update 和 元件中的 update。頁面中的 update 在 onLoad 事件中進行例項收集。
const onLoad = option.onLoad option.onLoad = function () { this.store = store rewriteUpdate(this) store.instances[this.route] = [] store.instances[this.route].push(this) onLoad && onLoad.call(this) } Page(option)
元件中的 update 在 ready 事件中進行行例項收集:
const ready = store.ready store.ready = function () { this.page = getCurrentPages()[getCurrentPages().length - 1] this.store = this.page.store; this.setData.call(this, this.store.data) rewriteUpdate(this) this.store.instances[this.page.route].push(this) ready && ready.call(this) } Component(store)
rewriteUpdate 的實現如下:
function rewriteUpdate(ctx){ ctx.update = () => { const diffResult = diff(ctx.store.data, originData) for(let key in ctx.store.instances){ ctx.store.instances[key].forEach(ins => { ins.setData.call(ins, diffResult) }) } for (let key in diffResult) { updateOriginData(originData, key, diffResult[key]) } } }