心血来潮的看了两章编译原理,就现学现用,试试自己实现下类似jQuery的选择器,凡事总有个过程,循序渐进慢慢来搞,这次先做个大致的函数结构,内部细节慢慢实现。能不能实现就随缘吧~~哈哈~~
其实相对实现一个编译器的流程来说,实现选择器已经是非常之容易的了,大部分工作集中在编译器的第一步:词法分析。而且很多工作已经被简化了,如映射为词法单元。接着做一些简单的语法分析(主要对CSS选择符分析),后面那些语义分析都不需要了。下面先简单给出些术语定义和产生式(语义规则看不懂略过也无所谓):
1、标识符:跟在一元运算符后面的字母数字之类的(这个不用多废话应该。。)。选择器函数中标识符的合法性,由浏览器自己去搞定就行了,我们就不需要再去一个一个字符去检测了,因此我把标识符看作无法继续分解的单元,这里产生式简单描述为:term->合法的字符串
2、运算符:包括一元运算符:类选择'.',id选择'#',标签选择''(标签运算为空字符);二元运算符:需要2个操作数的运算符,包括直接后代选择符'>',同胞选择符'+',后台选择符'';属性运算符:在属性选择符号中的一些运算符,如[value^=10]中的'^=';伪类运算符:由':'开头,跟着一些伪类选择标识符;
产生式表示为:op->'#'|'.'|''|''|'>'|'+'
运算符产生式目前只写出了一元和二元运算符,属性以及伪类以后再慢慢补充
3、表达式:能够求出值,也就是返回的是一个存储着符合条件的元素数组,若没有符合条件的元素,则为空数组,由运算符加标识符组成。
产生式表示为:expr->expr1+op+expr2|op+term|expr1+op+term|'['+term1+op+term2+']'|expr1+':'+op|'*'
表达式的产生式这里做些讲解:op+term对应一元运算如#xx,'['+term1+op+term2+']'对应属性运算,如[value=10],
expr1+':'+op对应伪类运算,如a:last-chiald,expr1+op+expr2对应二元运算,如:div>.main;expr1+op+term对应组合表达式,如div.main.xx
这里汇总一下产生式:
term->合法的字符串
op->'#'|'.'|''|''|'>'|'+'
expr->expr1+op+expr2|op+term|expr1+op+term|'['+term1+op+term2+']'|expr1+':'+op|'*'
语义分析到此完毕~~~