[置顶] -- 新手必读 ReadMe

新手必读啊! 新手必读啊! --------关于QWrap
Read Me, Read Me --------About QWrap

QWrap简介之组件编写

介绍了如何基于QWrap开发组件,如何让自己编写的组件支持链式调用和模块管理。

有demo有真相~

………………

点击这里,查看原文

Posted in : 开发相关by : Jerry QuJuly 7, 20110 CommentsTag : none

QWrap动画效果组件

整理了屈屈之前写的动画效果组件,单独放在 http://www.github.com/wedteam/qwrap-effect/

访问 http://wedteam.github.com/qwrap-effect/ 可以看例子

Posted in : 开发相关by : akira_cnJune 11, 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

[JK] QWrap简介之:结语

绕开代码的实现细节,从目标与思路入手,对QWrap的系列介绍就告一段落了。
面对已经相对成熟、拥有海量插件与用户群的JQuery,初生的QWrap显得有点幼稚单薄。不过,我仍然坚信Helper + Wrap + Retouch + Apps的设计,能够做到严谨与实用兼顾、代码清晰易维护升级、灵活产出等等别人框架所不能做到的,这会让QWrap的前途光明无限。
当然,前途不是别人送的,QWrap还应推出一系列组件,才能够让人们放心的使用,而不是只是core_retouched.js这种只充当jquery补充的配角式应用。在稍后的一段时间内,会推出系列的组件。这些组件中的绝大多数,都经过线上项目的严峻考验,能够即时投入实用。
组件的开发,会以团队为目录,QWrap团队是第一个组件开发团队,介时也欢迎其外界同学自建团队开发。QWrap的apps/core_dom_pure.js应用是专门针对组件开发者的,可以依赖它开发,而发布出无依赖的组件,或者发布出适配成依赖其它框架的组件。

雄关漫道,且待翻越。

点击这里,查看原文

Posted in : 杂七杂八by : JKApril 27, 20110 CommentsTag : none