微信小程序 数据绑定详解及实例


Posted in Javascript onOctober 25, 2016

微信小程序最近要火,火不火看看微信用户就知道了,做前端的朋友可以大展身手,跟上脚步,这里来介绍下微信小程序的数据绑定。

>>>数据视图绑定

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

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
浅析JavaScript动画
Jun 10 Javascript
node网页分段渲染详解
Sep 05 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
JS实现520 表白简单代码
May 21 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
用JS写一个发布订阅模式
Nov 07 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 #Javascript
javascript 中的事件委托详解
Oct 25 #Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 #Javascript
分分钟玩转Vue.js组件
Oct 25 #Javascript
谈谈target=_new和_blank的不同之处
Oct 25 #Javascript
js实现上传图片预览方法
Oct 25 #Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 #Javascript
You might like
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
php 可变函数使用小结
2018/06/12 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
用Python进行websocket接口测试
2020/10/16 Python
运行时异常与一般异常有何异同?
2014/01/05 面试题
业务部经理岗位职责
2014/01/04 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
婚前保证书
2014/04/29 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
Django基础CBV装饰器和中间件
2022/03/22 Python
Python学习之迭代器详解
2022/04/01 Python