每天挤一点,实现自己的selector函数(1)-语义分析-v1.02(最后修改于2012年3月19日)

心血来潮的看了两章编译原理,就现学现用,试试自己实现下类似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-chialdexpr1+op+expr2对应二元运算,如:div>.mainexpr1+op+term对应组合表达式,如div.main.xx


这里汇总一下产生式:

term->合法的字符串

op->'#'|'.'|''|''|'>'|'+'

expr->expr1+op+expr2|op+term|expr1+op+term|'['+term1+op+term2+']'|expr1+':'+op|'*'

语义分析到此完毕~~~


你可能感兴趣的:(selector)