$函数是Javascript框架里面最神奇的一个函数。从一开始只是单纯地作为document.getElementById的简写,到现在已经可以对CSS3进行解释,$函数的确大大简化了获取元素的操作。
有一次我在学校开发网站的时候应用了myJSFrame框架(http://www.happyshow.org/content.asp?id=184),尽管这个框架的$仅支持CSS1以及CSS2中的属性选择器,但我对它的实现产生了浓厚的兴趣。跟着又接触了jQuery,但是jQuery的代码可读性实在不那么好,很难读懂。后来我在一本书上看到了有一个叫做cssQuery(http://dean.edwards.name/my/cssQuery/)的程序,作者说这套程序的扩展性很强,于是我又下载看看。通过深入分析,我了解到cssQuery扩展性强的奥秘。
$函数实现里面最重要的一点就是对CSS选择器的解析。以”#aaa,div input[type=text]“为例,在myJSFrame里面,$的实现思路如下:
1、检查选择器里面是否没有” “, “,”, “.”, “[", "]“这些字符,如果没有,就直接作为id或者tagname来解析。
2、如果不符合1,通过逗号分隔出每一段(["#aaa", "div input[type=text]“])。
3、对每一段进行解析,通过空白进行分隔(["div", "input[type=text]“])。
4、对每一段的属性进行解析,把”[type=text]“通过正则表达式存入到数组["type", "=", "text"]。
5、遍历属性数组过滤出结果。
myJSFrame的$很难扩展,因为它的解析已经写死在程序流程里面了。而在cssQuery里面,$的实现思路完全不同,首先它还是通过逗号分隔出每一段,但是对每一段的解析过程中作者使用了操作符和操作数的概念,他通过一个正则表达式把CSS选择器的选择符以及表达式分离出一个数组,例如”div.area>input”分离成["div", ".", "area", ">", "input"],正如数学里面 1+2 是一个计算过程,这里的”div.area”也可以看作一个计算过程,因此每一个选择符就可以写成一个以前面的结果以及后面的表达式为参数的函数。
很明显,这样的程序扩展性很好,如果CSS的新标准又多了操作符,只需要多加一个解析函数就行了,大多数情况下无需修改主函数。而cssQuery的代码文件就是这样分布的:
cssQuery.js —— 核心文件及CSS1的解析
cssQuery-level2.js —— CSS2的解析
cssQuery-level3.js —— CSS3的解析
按照上面的思路仍有几个解析上的难点:
1、”div.area>input”的分离结果是["div", ".", "area", ">", "input"],而”.area > div”的分离结果是[".", "area", ">", "div"]。如何知道数组里面哪个是选择符,哪个是表达式?
2、属性选择符包含”["和"]“两个符号,怎么办?
对于第一个问题,作者是这样处理的:首先,他把省略部份补齐,例如”.area>div”补充为”*.area>div”;接着补上一个空格,注意空格在CSS选择器里面是选择后代元素的操作符;把分离结果的格式定为:从0开始,双数位是操作符,单数位是表达式。所以”.area>div”的分离结果是[" ", "*", ".", "area", ">", "div"],执行过程就是先获取所有元素,然后再按照类名筛选,而”div.area>input”的分离结果就是[" ", "div", ".", "area", ">", "input"]。有了固定格式,这个问题就解决了。但是这里有一种极端情况会导致性能低下:”#area>div”的分离结果是[" ", "*", "#", "area", ">", "div"],执行过程就是获取所有元素以后再通过id进行过滤,而实际上,如果首段是id选择器,只需要通过document.getElementById就可以获取元素了。cssQuery并没有对这种情况进行特别处理,估计是为了保证代码的结构吧。
而第二个问题非常好解决,把中括号换成一个自定义的选择符就OK,例如input[type=text]替换成input@type=text。
总得来说,cssQuery的执行效率不高,但是它程序设计的思想是非常值得借鉴的。
我一直很奇怪,国内那么多Internet企业的UE/UED部门,为什么看起来都是只是做Web的,blog上的的文章都是JavaScript、CSS……
既然不是实际关注user,干什么要起一个U字开头的部门名称呢?纯粹是为了表面上证明自己的企业跟上了国际潮流?老实说,Microsoft和Google的有关部门都是叫做UX的,只是国内的企业不知道ex开头的单词应该缩写为X,所以都叫做UE。
按理xp
也应该叫”ep”….,或者很多人不知道xp的x是来自什么单词