微信小程序之数据绑定(五)

【未经做者本人容许，请勿以任何形式转载】

前几篇讲述微信小程序开发工具使用、生命周期和事件。

本次讲述微信小程序数据和视图绑定

>>>数据视图绑定

作前端开发的同窗，尤为是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方式操做数据和视图，开发效率低，开发者不买帐。若是采用双向数据流，程序执行效率偏低，并且是逻辑层对象状态不可控。

整体来讲，小程序数据视图单向绑定开发模式，让开发者专一于事件处理上，改变对象状态，实现视图更新。