为什么80%的码农都做不了架构师?>>>   

模板复用机制是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事件.参示例代码:

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

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

3. 多模板

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

转载于:https://my.oschina.net/voxer/blog/657828

深入理解移动开发的模板复用机制相关推荐

  1. asp.net 报表页面模板_CP:基于JSON配置和vue-cli插件机制的模板复用方案

    前言 Atomic Design是前端开发圈中众所周知的设计理论,尤其是在中台类型的UI开发中.基于vue.js的element-ui.iview-ui和基于react.js的Ant Design都是 ...

  2. Android 系统(59)---Android开发:Handler异步通信机制全面解析(包含Looper、Message Queue)

    Android开发:Handler异步通信机制全面解析(包含Looper.Message Queue) 前言 最近刚好在做关于异步通信的需求,那么,今天我们来讲解下Android开发中的Handler ...

  3. 一文了解SAAS开发、模板定制开发、全定制开发

    ​互联网产品的研发做了一下分析, 大致有三种模式: SAAS开发.模板定制开发.全定制开发.技术架构难度由低到高.  SaaS开发 开发一个系统要支持SaaS模式,系统应满足: l首先,它必须是Web ...

  4. 一篇文章搞定《RecyclerView缓存复用机制》

    一篇文章搞定<RecyclerView缓存复用机制> 前言 零.为什么要缓存 一.RecyclerView如何构建我们的列表视图 二.缓存过程 三.缓存结构 1.mChangedScrap ...

  5. Scons环境搭建和编译原理概述及嵌入式开发常用模板

    Scons环境搭建和编译原理概述及嵌入式开发常用模板 Scons是用python实现的一个类似makefile的软件构建工具.其官网是SCons: A software construction to ...

  6. mosn 中的context、变量 和 内存复用机制

    mosn 中的context.变量 和 内存复用机制 在梳理变量机制中,发现与context.对象复用等机制都有一定关联,而context是贯穿始终的关键,所以本来只想记录变量机制,结果对contex ...

  7. python垃圾回收机制原理_如何理解和掌握Python垃圾回收机制?

    在编程世界里,当一个对象失去引用或者离开作用域后,它就会被当做垃圾而被自动清除,这就是垃圾回收机制.在现在的高级语言如Python.Java都使用了垃圾回收机制,不过与Java采用的垃圾收集机制不同, ...

  8. 云开发的数据库权限机制解读丨云开发101

    在使用云开发进行开发时,数据库权限是一个让不少人困扰的部分,四种数据库权限,到底是什么意思?其各自的权限.应用场景都是什么?大多数人对于这个机制,还是模糊的.为了帮助大家进行更好的开发,在涉及到具体的 ...

  9. 深入理解 iOS 开发中的锁

    深入理解 iOS 开发中的锁 摘要 本文的目的不是介绍 iOS 中各种锁如何使用,一方面笔者没有大量的实战经验,另一方面这样的文章相当多,比如 iOS中保证线程安全的几种方式与性能对比.iOS 常见知 ...

最新文章

  1. php 引用第三方类库,TP3.2 如何调用第三方类库?
  2. 管好统计信息,开启SQL优化之门
  3. Ipad亚麻布纹背景-最终效果_学习教程
  4. 解决 IntelliJ IDEA Tomcat 控制台中文输出乱码问题
  5. outlook异常之:邮件输入模式转换
  6. matlab图像处理——平滑滤波
  7. java 颜色比较_我该如何比较Java中的颜色?
  8. 1. Visio Web 形状 - 无法与 Web 服务器建立连接。请稍后重新进行搜索。处理方式...
  9. 怎么样解决小交换机引起的路由环路故障?
  10. 我不知道的事——深克隆和浅克隆
  11. 官方client php api接口日记
  12. 可方向导不一定连续的例子
  13. Python写的网络爬虫程序
  14. 操作电脑时弹出 UAC被禁用 的解决方法
  15. 如何在Coldfusion中上传文件
  16. 哪些数学特征可以用来描述一组数据
  17. Robocup场地信息
  18. 从金蝶k3到金税盘_金蝶K3操作流程图详解
  19. 记openssl漏洞升级修复的问题
  20. 串口(SerialPort)的使用

热门文章

  1. spring boot四:探究hello world
  2. 2016 ACM/ICPC Asia Regional Shenyang Online
  3. SSL介绍与Java实例
  4. 解决android.permission.WRITE_APN_SETTINGS
  5. PyMySQL 的decode坑
  6. Linux -- Samba访问控制
  7. 三、oracle 用户管理一
  8. 我的MVP,来的那么“糊涂”(2009.4)
  9. Python Flask框架常用组件介绍
  10. Charles(HTTP抓包工具软件)中文版