每天挤一点,实现自己的selector函数(2)——主要思路与基本结构

在(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函数称为子选择器,子选择器必须能够方便的扩展,以便能够在未来轻松的加入新的选择符。


今天挤得有点少,哈哈~~ 改天继续挤。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值