Ext源码解析:2, DomQuery.js

81 阅读 0 评论 54 点赞

我是靠谱客的博主含糊羊，最近开发中收集的这篇文章主要介绍Ext源码解析:2, DomQuery.js，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

from[url]http://www.beyondrails.com/blogs/19/edit[/url]

在[url=http://www.beyondrails.com/blogs/14]Extjs Introduction[/url]中提到:
[quote]
DomQuery is 2~3 times faster than jQuery/dojo/Mootools, Prototype is the most slowest one!
[/quote]
Speed Test测试页面: [url=http://extjs.com/playpen/slickspeed/]http://extjs.com/playpen/slickspeed/[/url]

[color=Red]Ext的DomQuery为啥这么快呢？[/color]
一是因为DomQuery的byId/byTag/byClassName/byAttribute/byPseudo等基本查询方法实现的比较好
二是因为DomQuery良好的结构和模块设计
三是因为DomQuery有一个查询缓存

DomQuery的Dom查询器分四种类型：
1，Element Selector
2，Attribute Selector
3，Pseudo Class Selector
4，CSS Value Selector

Ext的查询方法是Ext.query(String selector, [Node root]) : Array
[code]
Ext.query = Ext.DomQuery.select;
[/code]
select方法的实现:
[code]
select : function(path, root, type){
if(!root || root == document){
root = document;
}
if(typeof root == "string"){
root = document.getElementById(root);
}
var paths = path.split(",");
var results = [];
for(var i = 0, len = paths.length; i < len; i++){
var p = paths[i].replace(trimRe, "");
if(!cache[p]){
cache[p] = Ext.DomQuery.compile(p);
if(!cache[p]){
throw p + " is not a valid selector";
}
}
var result = cache[p](root);
if(result && result != document){
results = results.concat(result);
}
}
if(paths.length > 1){
return nodup(results);
}
return results;
}
[/code]
可以看到，Ext对于selector做了一个cache，缓存结果为Ext.DomQuery.compile方法返回的一个function
返回的function接收一个参数root来指示从那个Dom元素开始查询
[code]
compile : function(path, type){
type = type || "select";

var fn = ["var f = function(root){n var mode; ++batch; var n = root || document;n"];
var q = path, mode, lq;
var tk = Ext.DomQuery.matchers;
var tklen = tk.length;
var mm;

// accept leading mode switch
var lmode = q.match(modeRe);
if(lmode && lmode[1]){
fn[fn.length] = 'mode="'+lmode[1].replace(trimRe, "")+'";';
q = q.replace(lmode[1], "");
}
// strip leading slashes
while(path.substr(0, 1)=="/"){
path = path.substr(1);
}

while(q && lq != q){
lq = q;
var tm = q.match(tagTokenRe);
if(type == "select"){
if(tm){
if(tm[1] == "#"){
fn[fn.length] = 'n = quickId(n, mode, root, "'+tm[2]+'");';
}else{
fn[fn.length] = 'n = getNodes(n, mode, "'+tm[2]+'");';
}
q = q.replace(tm[0], "");
}else if(q.substr(0, 1) != '@'){
fn[fn.length] = 'n = getNodes(n, mode, "*");';
}
}else{
if(tm){
if(tm[1] == "#"){
fn[fn.length] = 'n = byId(n, null, "'+tm[2]+'");';
}else{
fn[fn.length] = 'n = byTag(n, "'+tm[2]+'");';
}
q = q.replace(tm[0], "");
}
}
while(!(mm = q.match(modeRe))){
var matched = false;
for(var j = 0; j < tklen; j++){
var t = tk[j];
var m = q.match(t.re);
if(m){
fn[fn.length] = t.select.replace(tplRe, function(x, i){
return m[i];
});
q = q.replace(m[0], "");
matched = true;
break;
}
}
// prevent infinite loop on bad selector
if(!matched){
throw 'Error parsing selector, parsing failed at "' + q + '"';
}
}
if(mm[1]){
fn[fn.length] = 'mode="'+mm[1].replace(trimRe, "")+'";';
q = q.replace(mm[1], "");
}
}
fn[fn.length] = "return nodup(n);n}";
eval(fn.join(""));
return f;
}
[/code]
而compile方法会使用正则表达式匹配selector，然后分别去选择调用quickId/getNodes/byId/byTag/byClassName等特定查询模式的实现function
正则表达式匹配selector:
[code]
matchers : [{
re: /^.([w-]+)/,
select: 'n = byClassName(n, null, " {1} ");'
}, {
re: /^:([w-]+)(?:(((?:[^s>/]*|.*?))))?/,
select: 'n = byPseudo(n, "{1}", "{2}");'
},{
re: /^(?:([[{])(?:@)?([w-]+)s?(?:(=|.=)s?['"]?(.*?)["']?)?[]}])/,
select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
}, {
re: /^#([w-]+)/,
select: 'n = byId(n, null, "{1}");'
},{
re: /^@([w-]+)/,
select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'
}
]
[/code]
看看quickId/byId的实现:
[code]
function quickId(ns, mode, root, id){
if(ns == root){
var d = root.ownerDocument || root;
return d.getElementById(id);
}
ns = getNodes(ns, mode, "*");
return byId(ns, null, id);
}
function byId(cs, attr, id){
if(cs.tagName || cs == document){
cs = [cs];
}
if(!id){
return cs;
}
var r = [], ri = -1;
for(var i = 0,ci; ci = cs[i]; i++){
if(ci && ci.id == id){
r[++ri] = ci;
return r;
}
}
return r;
};
[/code]
如果是在默认的document下查找一个指定id的元素，则直接调用document.getElementById
否则用getNodes得到所有的子Dom元素，再用byId来匹配Id，第一个匹配上的返回

操作符匹配:
[code]
operators : {
"=" : function(a, v){
return a == v;
},
"!=" : function(a, v){
return a != v;
},
"^=" : function(a, v){
return a && a.substr(0, v.length) == v;
},
"$=" : function(a, v){
return a && a.substr(a.length-v.length) == v;
},
"*=" : function(a, v){
return a && a.indexOf(v) !== -1;
},
"%=" : function(a, v){
return (a % v) == 0;
},
"|=" : function(a, v){
return a && (a == v || a.substr(0, v.length+1) == v+'-');
},
"~=" : function(a, v){
return a && (' '+a+' ').indexOf(' '+v+' ') != -1;
}
}
[/code]
pseudo class匹配:
[code]
first-child
last-child
nth-child
only-child
empty
contains
nodeValue
checked
not
any
odd
even
nth
first
last
has
next
prev
[/code]