当前位置: 首页 > news >正文

深入理解移动开发的模板复用机制

模板复用机制是android,ios等移动开发技术中类似listview,gridview,slideview等等之类组件常用的技术,deviceone的模板复用完全是和他们一致,deviceone有很多组件基本上涉及到多数据和模板的都会用到复用机制,有必要专门介绍一下。
以下都是以listview为例,但是其实整个机制适合所有deviceone类似的组件。

通过do_ScrollView展示多个View

我们先假定没有do_ListView组件,但是我们需要展示10个View,这10个View样式基本上是一样的,10个View加起来高度超过了屏幕,我们这个时候需要用到do_ScrollView组件,参考下图:

do_ScrollView的高度和屏幕高度一样,10个View组成的do_ALayout/do_LinearLayout比Scrollview高不少,作为do_ScorllView的子View,这样在运行时上下滑动。

这种情况使用do_SrcollView是很好的方式。但是我们假定如果需要显示100条数据,或者1000条数据,还能用Scrollview吗?显然是不行的,每一个View都会占用一部分内存,10个View的内存App轻易处理,但是100个1000个View在内存里App会马上崩溃。

通过do_ListView展示多个View

这个时候就要用到复用机制了,我们以do_ListView来说明。我们假定有100条数据,假定屏幕的大小正好是6个小View的高度和。那么我们就用8个View来显示这100条数据,而不是用100个View来显示。看下图:

我们可以看到初始状态View1和View8看不到,我们只能看到View2—>View7,这6个View分别对应数据Data1—>Data6.

如果我们手势下滑,View8就会上滑动,但是同时会把View1移动到最下面,如下图:

我们可以看到这个时候View2和View1看不到,我们只能看到View3—>View8,这6个View分别对应数据Data2—>Data7.

就这样我们不管怎么上下滑动,显示100条数据只需要8个View,这8个View不断的更新数据,不断的复用来达到这个效果。

复用机制要注意的问题

1. 因为每一个View的样式是通过数据来决定的,同时View又是复用的,对一个View的操作导致样式变化需要更新到data,否则复用的View会样式错乱。

我们来看这个例子,这个模板view包含一个do_Label显示对应数据里的id字段,另外还有一个do_CheckBox组件,缺省是没有选中,目前显示的是第3条到第8条数据,显示后,用手势点击把第4条数据对应的view3里的checkbox勾选上。

当我们往下滑动,view不断的被复用,当滑动到第7条数据的时候,view3被第12条数据复用了,用户就会发现第12条数据对应的checkbox被勾选了,这不是用户期望的。

如何处理这个问题? 其实就是给对应的data每一项增加一个新的字段,比如叫checked用来标示选中的状态,如果我们点中了一项,就更新一下对应的data的checked属性。

这样,checkbox的选中状态是由data里的checked属性来控制,就不会出现这个问题了。
这个可以参考示例里的test1和test2

2. dataRefreshed事件

因为listview对应的每一行的view的ui都是复用的,所以对应的ui.js逻辑代码也是复用的,只会执行一次,但是每一个view不断的更新数据,我们有时候需要在更新数据后做某些操作,就可以使用dataRefreshed事件.参考示例代码:

  1. root.setMapping({
  2. "index_label.text" : "name",
  3. "do_CheckBox_1.checked" : "checked"
  4. });
  5. root.on("dataRefreshed", function() {
  6. // 当数据更新到这个view之后才会触发,这个时候根据checked值,修改背景色
  7. // 这个事件在listview上下滑动的时候会执行多次,所以尽量不要在这个函数里加太多操作,否则会卡顿
  8. change_bgcolor();
  9. })
  10. function change_bgcolor() {
  11. if (check_label.checked)
  12. index_label.bgColor = "FF0000FF";
  13. else
  14. index_label.bgColor = "FF000000";
  15. }

我们可以看到这个模板并没有bind那个label的背景颜色,但是需要根据checkbox的状态变化而变化背景色,则需要订阅dataRefreshed事件。
详细的示例参考这里

3. 多模板

我们上面看到的所有示例都是以listview的单模板为例,也就是每一行的模板对应的ui文件都是一样的。
但是实际上deviceone的模板机制支持多模板,可以模板文件完全不一样。设置的方式也很简单,只需要给listview的templates设置多个模板ui文件即可,中间用逗号隔开。
绑定数据也类似,每一行对应的数据结构和模板一致就可以。
详细的示例参考这里

转载于:https://www.cnblogs.com/andbut/p/5385601.html

相关文章:

  • 9、二叉树存储结构结点定义:三叉链表
  • 内部排序算法:冒泡排序
  • 详解MathType中如何更改公式颜色
  • Ubuntu 12.10 安装JDK7
  • 软件对存储性能的影响​
  • 剖析curator的分布式互斥锁原理
  • LVM Linear vs Striped Logical Volumes
  • Centos Linux kernel内核升级
  • ZenHub Epics创造了GitHub中敏捷Epics
  • Ubuntu 登录闪退
  • 图片格式转换之ImageMagick
  • Python基础(1)--Python编程习惯与特点
  • 不用图像文件的圆角解决--跳起按钮制作(html)
  • Problem M
  • php构造函数的继承方法
  • (十五)java多线程之并发集合ArrayBlockingQueue
  • 【React系列】如何构建React应用程序
  • ESLint简单操作
  • GDB 调试 Mysql 实战(三)优先队列排序算法中的行记录长度统计是怎么来的(上)...
  • mongodb--安装和初步使用教程
  • mysql外键的使用
  • Protobuf3语言指南
  • vue2.0开发聊天程序(四) 完整体验一次Vue开发(下)
  • 安装python包到指定虚拟环境
  • 你不可错过的前端面试题(一)
  • 盘点那些不知名却常用的 Git 操作
  • 前端设计模式
  • 深入 Nginx 之配置篇
  • 使用Maven插件构建SpringBoot项目,生成Docker镜像push到DockerHub上
  • 小李飞刀:SQL题目刷起来!
  • 源码之下无秘密 ── 做最好的 Netty 源码分析教程
  • #NOIP 2014# day.1 T3 飞扬的小鸟 bird
  • #Ubuntu(修改root信息)
  • (4)事件处理——(7)简单事件(Simple events)
  • (8)STL算法之替换
  • (bean配置类的注解开发)学习Spring的第十三天
  • (HAL库版)freeRTOS移植STMF103
  • (二)PySpark3:SparkSQL编程
  • (附源码)springboot课程在线考试系统 毕业设计 655127
  • (附源码)ssm高校志愿者服务系统 毕业设计 011648
  • (一)VirtualBox安装增强功能
  • (原創) 物件導向與老子思想 (OO)
  • ../depcomp: line 571: exec: g++: not found
  • .\OBJ\test1.axf: Error: L6230W: Ignoring --entry command. Cannot find argumen 'Reset_Handler'
  • .Net 中的反射(动态创建类型实例) - Part.4(转自http://www.tracefact.net/CLR-and-Framework/Reflection-Part4.aspx)...
  • .NET/C# 在 64 位进程中读取 32 位进程重定向后的注册表
  • .net流程开发平台的一些难点(1)
  • @property @synthesize @dynamic 及相关属性作用探究
  • [Angular] 笔记 9:list/detail 页面以及@Output
  • [CQOI 2010]扑克牌
  • [CSAWQual 2019]Web_Unagi ---不会编程的崽
  • [Deep Learning] 神经网络基础
  • [dts]Device Tree机制
  • [emacs] CUA的矩形块操作很给力啊
  • [HTML API]HTMLCollection