微信小程序之數據綁定(五)

【未經做者本人容許，請勿以任何形式轉載】

前幾篇講述微信小程序開發工具使用、生命週期和事件。

本次講述微信小程序數據和視圖綁定

>>>數據視圖綁定

作前端開發的同窗，尤爲是WEB前端，天天都要跟視圖打交道，假如你是用過jQuery，你就能體會到jQuery的代碼冗餘和操做不便性，須要手動管理視圖和對象的數據一致性。

如下數據和對象等同。

傳統的視圖和數據綁定

 

那麼微信小程序是經過什麼方法來管理視圖和對象綁定的呢？狀態模式-單向數據流。

狀態模式定義一個對象，這個對象能夠經過管理其狀態從而使得應用程序做出相應的變化。

 

簡單的講，對象狀態化，只要對象狀態發送變化，就通知頁面更新視圖元素。 
三個步奏： 
1. 識別哪一個UI元素被綁定了相應的對象。 
2. 監視對象狀態的變化。 
3. 將全部變化傳播到綁定的視圖上。

注意數據流向是單向的，即視圖變化不會影響對象狀態。

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

 

Page({

 data: {

   message: 'Hello MINA!'

 }

})

 

就這麼簡單完成視圖跟數據的綁定。

僅僅經過數據更新視圖是不夠的，用戶操做引發視圖更新，數據怎麼同步呢？

這裏要區分的是，用戶觸發事件不只要考慮當前UI元素更新，還會經過當前元素更新其餘視圖。

因此視圖上的數據都必須用過事件傳遞給對象，只有用戶操做視圖，才能獲取到數據，並更新對象狀態。 
以下圖：

 

什麼是『事件』：

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

想知道爲何的童鞋能夠了解數據單雙向流，這裏不介紹了。

再來看視圖與視圖之間是如何影響?

流程說明： 
1. 視圖A因爲用戶操做，觸發事件A 
2. 事件A處理函數中，更新對象A和對象B的狀態 
3. 因爲對象A和B狀態變化，通知視圖A和B更新

咱們以用戶登陸爲例，用戶點擊(事件A)登陸按鈕後，把按鈕變成禁用不可點(視圖A)，同時彈出等待框(視圖B). 
部分代碼以下：

<view>

   <loading hidden="{{loadingHidden}}">正在登陸...</loading>

   <button type="primary" size="default" disabled="{{disabled}}" bindtap="loginBtn">數據請求</button>

</view>

Page({

 data:{

   disabled: false,

   loadingHidden: true

 },

 //按鈕事件

 loginBtn: function(event){

   //禁用按鈕

   this.setData({disabled: true});

   //彈出正在登陸框

   this.setData({loadingHidden: false});

 }

})

　　

總結：

如今流行數據單雙向綁定，小程序使用了單向數據流，若是採用傳統的jQuery方式操做數據和視圖，開發效率低，開發者不買帳。若是採用雙向數據流，程序執行效率偏低，並且是邏輯層對象狀態不可控。

整體來講，小程序數據視圖單向綁定開發模式，讓開發者專一於事件處理上，改變對象狀態，實現視圖更新。