10分钟,从jquery走向qwrap!

做为一个前端攻城师,或许你已经患上了jQuery依赖症,如果不用jQuery,还会有更好的选择么?有木有?

亲,有噢!且并非远在大洋彼岸,而是仅在咫尺!

由百度有啊前端团队出品,由月影(现任盛大web前端teamleader),JK(现就职于奇虎360),好奇(现就职于百度),QUQU(现创业中),敏亮(现就职于开心网)等前端攻城师联手打造并精心雕琢的QWrap就是这样一个javascript开源框架,该前端框架不仅重构了jQuery的核心亮点功能(高效便捷的css选择器,dom对象的链式装配,业界流行的Dom-Ready,以及兼容多浏览器的dom事件机制,高效的事件代理,并通过javascript的函数式编程方案,为在web前端领域写码的亲们提供了清晰简洁的调用接口。)

那么,我们一起来体验一番这个甫一亮相,便让国内前端大牛们纷纷围观的javascript框架吧。

原文网址:
http://lichaosoft.net/?p=17

Posted in : 杂七杂八by : CCAugust 20, 20110 CommentsTag : javascript, QWrap

[JK]由Hax建议引发的对QWrap的省思

QWrap网站出现第一篇《开站鸣谢》的贴子,是在2011-01-28,再过几天恰好半年。上周Hax同学发表一篇《关于国内前端和JS技术发展乱想》的博客,很慷慨的给中国前端、顺带给QWrap大量建议,也让我再次对QWrap深深省思。
………………
点击查看详情

Posted in : 杂七杂八by : JKAugust 6, 20110 CommentsTag : none

[转Hax文章] 关于国内前端及JS技术发展的乱想

Hax新博文:关于国内前端及JS技术发展的乱想。长篇之作,有很多独到观点,其中后半部分对QWrap提出了诸多意见。。。

Posted in : 杂七杂八by : JKJuly 21, 20110 CommentsTag : none

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

2011-05-18日更新

js/dom/node.h.js ----好奇
修复getXY在IE8下的bug。
添加removeStyle方法。
js/dom/selector.js ----JK
修复元素被遗漏的bug
添加伪类支持:focus、:input、:indeterminate
修复原生querySelectorAll是相对于:root而不是相对于:scope的问题。
让filter(els,selector,pEl)的selector参数中支持“,”关系符

js/core/object.h.js ----JK
添加encodeURLJson方法
js/core/string.h.js ----JK
添加queryUrl方法
js/core/custevnet.js ----JK
将custevent.h.js与custevent_retouch.js合成一个custevent.js。

js/apps_wagang 添加本应用文件夹。代表wagang项目应用,对应的组件配置成wagang目录下的组件。

js/wagang
Ajax组件规范化. 参见:http://dev.qwrap.com/resource/js/wagang/ajax/_examples/Ajax-Demo.html

Posted in : 杂七杂八by : JKMay 18, 20110 CommentsTag : none

Jquery之美中不足--之delegate的缺憾

jquery的delegate有好几个缺憾。----或许是因为sizzle少提供了以refEl为参考、一个按selector来筛选els的filter(els,selector,refEl)的功能,jq需要自己去实现类似的功能。
其一:selector是基于:root的,而不是:scope的。所以,在写代码时,需要带上scrope的定位部分。----注::root指document根节点,:scope指代理节点
例如,代理div1的儿子,需要这样写:
$('#div1').delegate('#div1>*','click',fun});
而不是这样写:
$('#div1').delegate('>*','click',fun});

其二:多个祖先满足条件时,只触发了target的closest的那一个祖先,而不是都触发。----想不通jquery为什么要采用这个策略

其三:与sizzle一样,可能是没有回溯,在某些情况下有bug。
例如,当span有多个祖先是div时,这个代理会失效:$('body').delegate('body>div span','click',fun;});

QWrap不存在这些问题,窃喜一下。。。
…………
点击这里,查看原文

Posted in : 杂七杂八by : JKMay 12, 20110 CommentsTag : none