zoukankan      html  css  js  c++  java
  • 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查出的是唯一对象,

      所以实际开发中,大家根据自己的实际情况来使用这两个查询方法,两者各有优劣。

      

  • 相关阅读:
    hdu 5366 简单递推
    hdu 5365 判断正方形
    hdu 3635 并查集
    hdu 4497 数论
    hdu5419 Victor and Toys
    hdu5426 Rikka with Game
    poj2074 Line of Sight
    hdu5425 Rikka with Tree II
    hdu5424 Rikka with Graph II
    poj1009 Edge Detection
  • 原文地址:https://www.cnblogs.com/cjpx00008/p/3640016.html
Copyright © 2011-2022 走看看