昨天無意中在網上看到一篇講解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查出的是唯一對象，

　　所以實際開發中，大家根據自己的實際情況來使用這兩個查詢方法，兩者各有優劣。

　　

轉載于:https://www.cnblogs.com/cjpx00008/p/3640016.html

總結

以上是生活随笔為你收集整理的sencha touch 组件选择器getCmp和ComponentQuery.query()的效率解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。