在(1)中进行了初步的语义分析,根据这几天反复的试验,,暂时选定了一个主要的算法流程来实现选择器,如下:
输入:字符串exprs, 由','连接的选择符,形式为"expr1, expr2, expr3 .."如"div .main #x, div, [type]"
输出:符合选择符条件的DOM元素集合ret
1、 将输入exprs以','分隔成子表达式,
2、对每个子表达式求值,
3、 合并每个子表达式的值到ret中,
4、 对ret去除重复元素,
5、 输出ret。
上述5个步骤构成了基本的思想,按照这个流程,定义一个对外的调用接口:
window.XX = window.XX || {};
/*
* 选择器表达式处理函数,
* 参数selectors:CSS选择符,默认为'*'
* 参数context: 选择开始的父元素,默认为document
* 返回值:若返回保存了符合选择符元素的数组或者NodeList对象
* */
XX.$ = function(selectors, context) {
/*上下文,默认为document*/
context = context || document;
if(context.querySelectorAll) {//有原生的选择器,我们就不用操心了,,
return context.querySelectorAll(selector);
}
var i, ret = [];
//预处理,将selectors分解,即:"expr1, expr2, .. "分解为[expr1, expr2, ..]以便逐个处理
selectorArr = selectors.split(',');
//逐个处理并合并元素
for( i = 0, len = selectorArr.length; i < len; ++i) {
ret = ret.concat( XX.selector(selectorArr[i], context));
}
return ret;
};
上述代码中,XX.selector函数是设想的处理子表达式的功能函数,选择器主要的实现就在这个函数上,也就是主要实现步骤2: 对每个子表达式求值。
我这里把XX.selector函数称为子选择器,子选择器必须能够方便的扩展,以便能够在未来轻松的加入新的选择符。
今天挤得有点少,哈哈~~ 改天继续挤。。