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查出的是唯一对象，

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