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


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 相关文章推荐
不安全的常用的js写法
Sep 15 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
javascript读写json示例
Apr 11 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
JavaScript this使用方法图解
Feb 04 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书写安全的脚本代码
2012/02/05 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
深入理解Vue 组件之间传值
2018/08/16 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python转换摩斯密码示例
2014/02/16 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
python库matplotlib绘制坐标图
2019/10/18 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
成人教育自我鉴定
2013/11/01 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
优秀公益广告词大全
2014/03/19 职场文书
放假通知范文
2015/04/14 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python
springcloud整合seata
2022/05/20 Java/Android
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技