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


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 相关文章推荐
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
Vue.js对象转换实例
Jun 07 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 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下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
python去除字符串中的换行符
2017/10/11 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python IDLE入门简介
2017/12/08 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Django进阶之CSRF的解决
2018/08/01 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
python实现飞机大战小游戏
2019/11/08 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
Python 存取npy格式数据实例
2020/07/01 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
How TDD works
2012/09/30 面试题
人事部经理岗位职责
2014/03/07 职场文书
优秀员工评优方案
2014/06/13 职场文书
数学教育专业求职信
2014/07/22 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
大学军训通讯稿
2015/07/18 职场文书