QWrap Selector之W3C版

在移动开发上,我们的库只需支持webkit系列,那可不可以让代码变少一点?
selector_w3c.js就是一个简版的selector,它假设当前浏览器已支持querySelectorAll方法。
………………
点击查看详情

Posted in : 开发相关by : JKNovember 27, 20110 CommentsTag : QW.Selector

Selector解密之五:小结

Selector自从被jquery带到js中来,它在js中就一直是一个使用频率最高的东西之一。
作为使用者,也没必要去详细了解。不过通过写selector来了解selector与提高自己的js水平,还是一件不错的事。我想,在为数不多的写过selector的同学里,大部分也应该只是练练手而已,而没有刻意追求使用性。
前面几篇文章只是粗略的介绍了下selector的写法、querySelector顺序、matchSelector概要、自选器转换,它们是selector中几个容易误解或走岔的地方,了解了这些,selector就会变得简单。再也不必听别人怎么神话化sizzle,或许是历史的原因,sizzle也有功能不全,也有理论缺陷、也有实现漏洞、也有效率极限与坑坑、等等,只是,它看它的代码有点累,所以大家都没有细心了解罢了。
2010年底,QWrap决定开源,最后选择了使用自己的selector,因为:QW.Selector能提供更多的功能(例如filter等),也在理论上更严谨、并且代码量也很小、性能也足够达标
………………
点击这里,查看原文

Posted in : 杂七杂八by : JKMay 24, 20110 CommentsTag : QW.Selector

Selector解密之四:自选器转化

在selector里,自选器经常被用来判断一某节点是否符合自选器,并且会被频繁调用,所以,我们需要高效的自选器判断函数,我们临时命名叫matcher吧。
以“[value=hello]”为例,来看一下matcher的两种方案。
方案1:解析input[value=hello],并立即判断
方案2:解析input[value=hello]成一个函数,以后每次matcher时就调用函数判断。
方案1的好处是即时解析即时用,不必缓存解析结果;方案2的好处是match多次时,只解析selector一次,将解析出的function多次运行。
自选器判断会经常用到,我们采用方案2的话,可以将这个解析功能独立出来,让代码清晰很多,并且也能保证效率,所以,QW.Selector提供了一个把自选器转化成过滤函数的方法:QW.Selector.selector2Filter。
…………
点击这里,查看原文

Posted in : 杂七杂八by : JKMay 24, 20110 CommentsTag : QW.Selector

Selector解密之三:matchSelector

w3c的selector-api2标准已经提供了matchSelector的相关条文:
http://dev.w3.org/2006/webapi/selectors-api2/#matchtesting
Firefox也有个对应的方法:
https://developer.mozilla.org/en/DOM/Node.mozMatchesSelector,
不过,它相对于标准的matchSelector,明显少了一个refElement的参数。
QWrap也有一个与标准几乎一致的方法Selector.filter。
/**
* 用一个css selector来过滤一个数组.
* @method filter
* @static
* @param {Array|Collection} els: 元素数组
* @param {string} sSelector: 过滤selector,这个selector里的第一个关系符不可以是“+”“~”。
* @param {Element} pEl: 父节点。默认是document
* @returns {Array} : 返回满足过滤条件的元素组成的数组。
*/
Selector.filter = function(els, sSelector, pEl) {
//...
}

与标准相比,不同点有:
1。标准方法叫matchSelector,这个方法叫filter,用法不同。
2。sSelector是相对于参考元素的,而不是document,所以,也不必先写:scope伪类。
3。sSelector的起始关系符需要是亲子关系或后代关系,而不允许是兄弟关系。即,不可以是“+”“~”
…………
点击这里,查看原文

Posted in : 杂七杂八by : JKMay 24, 20110 CommentsTag : QW.Selector

Selector解密之二:从左向右,还是从右向左

QWrap Selector解密之二:从左向右,还是从右向左
关于Selector实现,问得最多的问题是:是从左往右,还是从右往左。
先看一下它们有什么不同,以Selector.query('div span',document.body)为例。看下表:

 从左往右从右往左
策略简介先query得到divs,
再通过divs来query得到spans
先query得到spans,再通过是否有父节点是div来过滤
问题思路简单,但除重与排序麻烦过滤麻烦,但不用考虑除重与排序
解决方案如果整个selector里只有后代关系符与亲子关系符,
可以在通过divs来query spans之前,
对divs进行一次过滤(如果前一个包含后一个,则过滤掉后一个),
来避免得到spans后还需要排序。
寻路径过滤时可以使用一些临时缓存策略来提速

…………
点击这里,查看原文

Posted in : 杂七杂八by : JKMay 21, 20110 CommentsTag : QW.Selector

Selector解密之一:认识selector写法

QWrap使用了一个独立的QW.Selector,而不是借用sizzle。
相对于sizzle,QW.Selector摈弃了isXml参数(无情抛弃)与selector群组除重排序(实用意义有限而效率影响太大);提供query方法之外,还提供了filter等与selector有关的其它一些方法,(详见:QW Selector简介);比sizzle更严谨的对待需要回溯的selector(详见:jquery delegate美中不足);体积小于sizzle的70%;性能也相当。两年来虽说没啥大变化,现在看来也不见得比当今的sizzle逊色,所以QWrap在开源时,也决定继续使用它。
业界关心Selector实现的同学很少,自己实现过Selector的人数就更不用说,可还是有同学建议我写一些关于selector实现的文章。
尽管也不会有几个读者有兴趣,但是,从思维沉淀出文章,对自己本人来说,也是一件挺有意义的事,所以,还是费点心思写一写吧。

先来认识一下这个选择器甲:“textarea,#myId>input.date[type=text]:enabled”
其中的“,”是并联关系符,
它把选择器甲拆成选择器甲A“textarea”甲B“#myId>input.date[type=text]:enabled”两个选择器。
并联的意思是:如是一个元素符合甲A或甲B,那么这个元素满足甲。

含有并联关系符“,”的选择器,叫选择器群组。它也是广义的选择器。
而选择器甲A与甲B,是独立选择器
…………
点击这里,查看原文

Posted in : 杂七杂八by : JKMay 21, 20110 CommentsTag : QW.Selector