sencha touch 组件选择器getCmp和ComponentQuery.query()的效率解析
昨天无意中在网上看到一篇讲解sencha touch组件选择器的文章,名为 Sencha touch 2通过Ext.ComponentQuery.query查找组件。
里面对组件选择器的效率讲解完全反了,说getCmp是在dom树中全文查找,效率不高,而ComponentQuery.query()效率比较高,而且该文章被很多文章采集器采集到了很多网站上。
这里有必要纠正下,跟这边文章的描述恰恰相反,在sencha touch的组件查询中getCmp()要比ComponentQuery.query()效率高,为什么呢?
因为在sencha touch中,当视图组件被实例化的时候,该组件对象会以键值对的形式保存在componentManager中的map对象中,
map对象中的属性名即对应组件对象的id(在st中,如果用户没有给组件对象定义id,st会按照自己的一套规则给组件生成一个id值),而属性的值即组件对象,
简单的说,就是map["id"] = component,下面是componentManager中注册视图组件时候的实现
/**
* Registers an item to be managed.
* @param {Object} component The item to register.
*/
register: function(component) {
var id = component.getId();//获取组件对象的id值 // 判断组件对象的id值在map对象中是否已存在,若存在,提示id已被使
// 用
if (this.map[id]) {
Ext.Logger.warn('Registering a component with a id (`' + id + '`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`.');
} //对组件对象完成注册,将组件对象保存到componentManager的
//map 对象中,属性名为id值,属性值为组件对象
this.map[component.getId()] = component;
},
当我们使用getCmp(id)对组件对象进行查找时,其实是调用了componentManager中的get(id)方法,代码如下:
get: function(id) {
return this.map[id];
}
我们可以看到,这里其实就是直接返回了map对象中属性为id的值,通过map[id]直接查找出了对象的组件对象,没有过多的复杂查找过程
接下来,我们再来看下Ext.ComponetQuery.query(),为什么说它的查询效率不如getCmp,
因为它是在所有已经被保存到componentManager中的组件对象中,按照id,attribute,classname等一系列的规则判断来进行查找,
它会先拆解你query()中传入的selector规则,经过匹配后调用对应的属性查找方法,分别有filterByXType、filterByClassName、filterByAttribute、filterById、filterByPseudo,
而每次执行Ext.ComponentQuery.query()的时候都会调用Ext.ComponentManager.all.getArray()来查找出componentManager中所有的组件对象,然后再执行上面的各个过滤方法,由于这部门内容源码比较多,就不贴出来了,有兴趣的同学可以到ComponentQuery.js中查看源码,这里仅让大家了解下原理。
看到上面的分析,大家应该明白为什么getCmp的效率要比ComponentQuery要高了,
那我们到底使用getCmp呢,还是使用ComponentQuery呢,由于dom元素中id的唯一性等问题,所以官方并不推荐使用id来定义组件(注:id定义的子组件对象在绑定事件时,当组件对象被手动销毁后再重建,在使用sencha cmd打包压缩过代码后,会出现事件无效等奇葩问题,所以一般情况下,我最多只会给父组件定义id),而是使用itemId来定义组件,itemId并不会存在于dom元素中,而是跟对应的组件对象绑定在一起只存在于内存中,itemId的查找只有使用ComponentQuery.query(#itemId),或是组件的down(),up()等方法来查找,所以,在实际开发中,Ext.ComponentQuery.query()使用得较多。
而在性能上我做过测试,Ext.ComponetQuery.query()在组件较多的情况下执行效率跟getCmp()相比最多相差几十ms,getCmp的执行速度一般是0ms-1ms,所以性能上其实影响不大,组件少的情况下,只会差几ms。
功能上,ComponentQuery查找出来的是数组,getCmp查出的是唯一对象,
所以实际开发中,大家根据自己的实际情况来使用这两个查询方法,两者各有优劣。
sencha touch 组件选择器getCmp和ComponentQuery.query()的效率解析的更多相关文章
- sencha touch 选择器
1 DOM元素选择器 Ext.DomQuery操作标准DOM元素 Ext.query(selector, [root]) : HTMLElement[] // 调用Ext.dom.Query.sele ...
- sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标
上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包 在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...
- Ext.ComponentQuery.query()
转载:http://blog.csdn.net/jiushuai/article/details/7938476 用来找特点的所有容器(Ext.container.Container)或是通过Ext. ...
- 俺的新书《Sencha Touch实战》终于出版了
内容简介:Sencha框架是第一个基于HTML 5的移动也能给予框架,可以让Web应用看起来像网络应用.美丽的用户 界面 组件和丰富的数据管理,全部基于最新的HTML 5和CSS 3的Web标准,全部 ...
- 【转载】Sencha Touch 提高篇 组件选择器
免责声明: 本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除. 原文作者:威老 原文地址:http://www.cnblogs.com/weil ...
- sencha touch 入门系列 (九)sencha touch 视图组件简介
对于一个普通用户来说,你的项目就是一组简单的视图集合,用户直接通过跟视图进行交互来操作你的应用,对于一个开发人员来说,视图是一个项目的入口,虽然大部分时候最有价值的部分是在model层和control ...
- Sencha Touch id 和 itemId
通过id获得组件: var view=Ext.getCmp('id'); 通过itemId获得组件: var view = ComponentQuery.query('view_xtype'), // ...
- 【翻译】在Ext JS和Sencha Touch中创建自己定义布局
原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...
- 【翻译】在Ext JS和Sencha Touch中创建自定义布局
原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...
随机推荐
- BusyBox rcS&fstab配置
rcS为系统初始化脚本,完成最开始的一些配置工作,可开启应用程序. #!/bin/shmount -a ;mount文件,要mount的文件有fstab指定. . /etc/profile ...
- MySQL下查询锁信息
SHOW PROCESSLIST;SHOW OPEN TABLES WHERE In_use > 0; #运行线程 SHOW GLOBAL STATUS LIKE 'Threads_runn ...
- C语言实现---学生成绩管理系统
C语言实现了学生成绩管理系统,可以进行学生成绩的增加,删除,更新,查询,计算和展示. 完整代码如下: #include<stdio.h> #include<stdlib.h> ...
- python中copy 与 '=' 的区别
当你a=1000的时候a指向一个新的类,内容为1000,而b仍然指向原来指向的内容,因为你没有叫它指向其他内容.你使用=符号,使得a和b指向同一个内容,而copy则是将b的内容复制后让c指向这个拷贝的 ...
- Qt 线程基础(QThread、QtConcurrent等)
[-] 使用线程 何时使用其他技术替代线程 应该使用 Qt 线程的哪种技术 Qt线程基础 QObject与线程 使用互斥量保护数据的完整 使用事件循环防止数据破坏 处理异步执行 昨晚看Qt的Manua ...
- WebForm和MVC的一些知识(转)
转自:http://www.cnblogs.com/liuhf939/p/3417203.html 比较WebForm和Mvc的请求处理方式 首先简单了解一下Asp.Net中怎么对页面进行请求处理的: ...
- openfire User Service 和删除分组的方法
z4PstKlN 服务器-> 系统属性 plugin.userservice.enabled 值为 true 增加用户 9090/plugins/userService/userservice? ...
- 关于MyEclipse项目的名字的修改对项目导入导出的影响
不要修改项目名字,不管是在MyEclipse中(.project文件里面的额name会变)还是在G:\MyEclipseData目录下(.project文件里面的额name不会变),否则导入的时候不能 ...
- spring 优点
spring 的优点?1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很容易实 ...
- 25个非常实用的jQuery/CSS3应用组件
今天分享25款功能十分强大的jQuery/CSS3应用插件,欢迎收藏. 1.jQuery水晶样式下拉导航 这是一款非常不错的jQuery多功能下拉菜单插件,菜单外观呈水晶样式,晶莹剔透,功能丰富,包含 ...