官網:https://qiu8310.github.io/minapp/
作者:Mora
在原生小程式開發中,資料流是單向的,無法雙向綁定,但是要實作雙向綁定的功能還是蠻簡單的!
下文要講的是小程式架構 minapp 中實作雙向綁定的原理,在 minapp 中,你隻需要在 wxml 模闆中給元件的屬性名後加上 .sync
就可以實作雙向綁定。下面為了解釋其原理,過程可能會說的稍微複雜些,但其實 minapp 架構已經處理了那些繁雜的細節!
首先,要使資料雙向綁定,應該避免過多的資料源。
在資料從上到下自然流動的情況下,如果每個元件中都維護它們自己的資料,而又要保持它們資料值的一緻,這雖然可以做到,但實作過程并不會簡單。
但是也沒必要說為了有一個統一的資料源就使用 mobx 或 redux 來全局管理資料,這就有點殺雞用牛刀的感覺了。
由于雙向綁定隻存在于父子元件之間,而資料又是從父到子傳遞的,是以可以優先使用父元件中的資料為資料源,
子元件每次更新資料并不更新它自己内部的資料,而是通過事件機制觸發父元件更新它的資料,而父元件更新資料後又會将更新的資料自然地傳給子元件,
由此達到資料的雙向流動!
并不是所有資料都需要雙向綁定,也并不是所有資料都是對外的,子元件還可以有它自己的一個内部資料。是以這就涉及到我們要說的第二個問題:區分哪些資料需要雙向綁定,哪些資料又需要子元件自己維護。
用過 vue 的應該都知道,在 vue 中要實作雙向綁定,需要在模闆中做特殊處理。比如要将父元件的
parentAttr
雙向綁定到子元件的
childAttr
上,需要在父元件的模闆中這樣寫:
<child childAttr.sync="parentAttr" />
複制
但是小程式并沒有這樣的簡單的文法,小程式的 wxml 語言的屬性名中甚至都不允許出現 " . " 這樣的字元。回到我們的問題上來,子元件需要知道哪些屬性需要雙向綁定,哪些屬性需要自己維護,
給模闆加個字段(
syncAttrMap
)專門來告訴子元件需要雙向綁定的資料集合不就行了麼。如,可以将上面的示例寫成微信小程式支援的寫法:
<child childAttr="{{parentAttr}}" syncAttrMap="childAttr=parentAttr" />
<!--
如果同時存在多個雙向綁定和不需要雙向綁定的屬性時,可以寫成下面這樣:
p1, p2 分别雙向綁定到子元件的 c1, c2,而 p3 單向綁定到 c3 上
-->
<child c1="{{p1}}" c2="{{p2}}" c3="{{p3}}" syncAttrMap="c1=p1&c2=p2" />
複制
接着,就需要處理子元件資料更新的問題了,在子元件中有兩部分資料,一部分是内部資料,另一部分是父元件中的資料,
子元件可以通過讀取屬性
syncAttrMap
來得到哪些資料是内部的資料,哪些資料是父元件的資料,并且可以知道對應
的父元件中的資料的鍵名是什麼。由于原生的元件方法
setData
不會管你是内部資料,還是父元件中的資料,隻要
你調用它去更新資料,它隻會更新内部的資料。是以需要另外實作一個新的方法,來自動判斷資料源,如果是内部資料,
則直接調用
setData
;如果是雙向綁定中的父元件資料,則可以觸發一個事件去通知父元件去更新對應的值。
是以根據上面的描述,父元件需要有個監聽函數,子元件需要有個智能的
setData
函數。不防将父元件的監聽函數
命名為
onSyncAttrUpdate
,将子元件的智能
setData
函數命名為
setDataSmart
,則可以有如下代碼:
// 父元件
Component({
methods: {
onSyncAttrUpdate(e) {
this.setData(e.detail) // 子元件傳來的需要更新的資料
}
}
})
複制
<!-- 父元件的模闆 -->
<child childAttr="{{parentAttr}}" syncAttrMap="childAttr=parentAttr" bind:syncAttrUpdate="onSyncAttrUpdate" />
複制
// 子元件
Component({
properties: {
childAttr: String,
syncAttrMap: String
},
methods: {
// 子元件更新資料時,隻要調用此方法即可,而不是 `setData`
setDataSmart(data) {
// splitDataBySyncAttrMap 函數的實作過程就不說了,隻是将對象拆分,大家應該都能實作
let {parentData, innerData} = splitDataBySyncAttrMap(data, this.data.syncAttrMap)
// 内部資料使用 setData 更新
if (Object.keys(innerData).length) {
this.setData(innerData) // setData 中還支援 callback 的回調,為了簡化代碼,這裡不讨論
}
// 雙向綁定的父元件資料觸發事件讓父元件自己去更新
if (Object.keys(parentData).length) {
this.triggerEvent('syncAttrUpdate', parentData)
}
}
}
})
複制
到此,一個簡單的雙向綁定功能就完成了。但是由于子元件也有可能包含其它元件,也就是說子元件也可以是父元件,而父元件同樣也
可以是子元件。是以上面的
onSyncAttrUpdate
setDataSmart
函數需要在每個元件中都實作,是以不防
定義一個公共對象
BaseComponent
來實作上面的所有功能,如:
// BaseComponent
const BaseComponent = {
properties: {
syncAttrMap: String
},
methods: {
setDataSmart() {
// ...
},
onSyncAttrUpdate() {
// ...
}
}
}
複制
然後将 BaseComponent minin 到每個元件的對象上去就可以了;另外小程式中還有一個特殊的元件:Page,雖然 Page 和 Component 結構是兩樣的,
但它也應該算是一個元件,不過它一定是父元件,不可能是别的元件的子元件,是以還需要将
onSyncAttrUpdate
方法寫了所有的 Page 定義中。
所有這些就是 minapp 的雙向綁定的基本原理了。
等等,最後還有一件事:wxml 模闆,不能讓使用者每次寫雙向綁定的時候都要寫那麼複雜語句吧?當然不用,minapp 在編譯時,會将模闆做個簡單的轉化:
<child childAttr.sync="parentAttr" />
<!-- 由于屬性名 syncAttrMap 是固定的,是以完全可以通過編譯手段,将上面的模闆轉成下面這個模闆 -->
<child childAttr="{{parentAttr}}" syncAttrMap="childAttr=parentAttr" />
複制
謝謝,文章到此結束,歡迎關注 minapp:重新定義微信小程式的開發