微信小程序最近要火，火不火看看微信用戶就知道了，做前端的朋友可以大展身手，跟上腳步，這里來(lái)介紹下微信小程序的數(shù)據(jù)綁定。

>>>數(shù)據(jù)視圖綁定

做前端開發(fā)的同學(xué)，尤其是WEB前端，每天都要跟視圖打交道，假如你是用過(guò)jQuery，你就能體會(huì)到j(luò)Query的代碼冗余和操作不便性，需要手動(dòng)管理視圖和對(duì)象的數(shù)據(jù)一致性。

以下數(shù)據(jù)和對(duì)象等同。

傳統(tǒng)的視圖和數(shù)據(jù)綁定

 那么微信小程序是通過(guò)什么方法來(lái)管理視圖和對(duì)象綁定的呢？狀態(tài)模式-單向數(shù)據(jù)流。

狀態(tài)模式定義一個(gè)對(duì)象，這個(gè)對(duì)象可以通過(guò)管理其狀態(tài)從而使得應(yīng)用程序作出相應(yīng)的變化。

 簡(jiǎn)單的講，對(duì)象狀態(tài)化，只要對(duì)象狀態(tài)發(fā)送變化，就通知頁(yè)面更新視圖元素。

三個(gè)步奏：

1. 識(shí)別哪個(gè)UI元素被綁定了相應(yīng)的對(duì)象。
2. 監(jiān)視對(duì)象狀態(tài)的變化。
3. 將所有變化傳播到綁定的視圖上。

注意數(shù)據(jù)流向是單向的，即視圖變化不會(huì)影響對(duì)象狀態(tài)。

<view> {{ message }} </view>

Page({

 data: {

  message: 'Hello MINA!'

 }

})

就這么簡(jiǎn)單完成視圖跟數(shù)據(jù)的綁定。

僅僅通過(guò)數(shù)據(jù)更新視圖是不夠的，用戶操作引起視圖更新，數(shù)據(jù)怎么同步呢？

這里要區(qū)分的是，用戶觸發(fā)事件不僅要考慮當(dāng)前UI元素更新，還會(huì)通過(guò)當(dāng)前元素更新其他視圖。

所以視圖上的數(shù)據(jù)都必須用過(guò)事件傳遞給對(duì)象，只有用戶操作視圖，才能獲取到數(shù)據(jù)，并更新對(duì)象狀態(tài)。
如下圖：

 什么是『事件』：

事件是視圖層到邏輯層的通訊方式。

想知道為什么的童鞋可以了解數(shù)據(jù)單雙向流，這里不介紹了。

再來(lái)看視圖與視圖之間是如何影響?

流程說(shuō)明：

1. 視圖A由于用戶操作，觸發(fā)事件A
2. 事件A處理函數(shù)中，更新對(duì)象A和對(duì)象B的狀態(tài)
3. 由于對(duì)象A和B狀態(tài)變化，通知視圖A和B更新

我們以用戶登錄為例，用戶點(diǎn)擊(事件A)登錄按鈕后，把按鈕變成禁用不可點(diǎn)(視圖A)，同時(shí)彈出等待框(視圖B).
部分代碼如下：

<view>
 
  <loading hidden="{{loadingHidden}}">正在登錄...</loading>
 
  <button type="primary" size="default" disabled="{{disabled}}" bindtap="loginBtn">數(shù)據(jù)請(qǐng)求</button>
 
</view>

Page({
 
 data:{
 
  disabled: false,
 
  loadingHidden: true
 
 },
 
 //按鈕事件
 
 loginBtn: function(event){
 
  //禁用按鈕
 
  this.setData({disabled: true});
 
  //彈出正在登錄框
 
  this.setData({loadingHidden: false});
 
 }
 
})
　　

總結(jié)：

現(xiàn)在流行數(shù)據(jù)單雙向綁定，小程序使用了單向數(shù)據(jù)流，如果采用傳統(tǒng)的jQuery方式操作數(shù)據(jù)和視圖，開發(fā)效率低，開發(fā)者不買賬。如果采用雙向數(shù)據(jù)流，程序執(zhí)行效率偏低，而且是邏輯層對(duì)象狀態(tài)不可控。

總體來(lái)說(shuō)，小程序數(shù)據(jù)視圖單向綁定開發(fā)模式，讓開發(fā)者專注于事件處理上，改變對(duì)象狀態(tài)，實(shí)現(xiàn)視圖更新。

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

最新評(píng)論