QWrap Selector的几个应用场景

除了如jquery的$(selector)之外,Selector在js中有很多使用场景。
以QWrap的Youa版应用(js/apps/core_dom_youa.js)为例,主要用法有以下。

W(selector)  相当于jquery用户使用的$
如:
W('input.aaa').css('color','red').val('');
W('#myid > div'). css('color','red');

W.one(selector) 得到某个满足条件的元素的W包装
如:
W.one('input.aaa').css('color','red').val('');

W.prototype.query(selector)
W.prototype.one(selector)
如:
W('#id').show().query('>*').show().query('>*').css('color','red');
 //show #id ; 再show其儿子 ; 再为其孙子设color
W('#id').show().query('~div').hide()
 //show #id ; 再hide其所有的div弟弟
W('#id').show().one('>div').show().one('>a').css('color','red');
 //show #id ; 再show其第一个div儿子 ; 再为这个儿子的第一个a儿子设color

W.prototype.关系系列
previousSibling(selector)
nextSibling(selector)
ancestorNode(selector)
firstChild(selector)
lastChild(selector)
用法如:
W('#id'). previousSibling ('div,aaa').hide()
 //show #id ; 再hide其最小的div.aaa兄长
W('#id'). ancestorNode ('div.aaa').hide()
 //show #id ; 再hide其最近的div.aaa祖先
W('#id'). lastChild ('div.aaa').hide()
 //show #id ; 再hide其最小的div.aaa儿子

W.prototype.代理系列
delegate(selector,eventName,handle)
undelegate(selector,eventName,handle)
用法如:
W('#id'). delegate ('>div','click',function(){})
 //在#id上添加事件委托,对其div儿子有效。
W('#id'). delegate ('a','click',handle1)
 //在#id上添加事件委托,对其a子孙节点有效。
W('#id'). undelegate ('a','click', handle1)
 //在#id上解除事件委托,对其a子孙节点有效。

Selector的用处远不只以上,还有很多的挖掘空间。无法一一列出,当然,还有很多我所没想到的……

补充说明:以上用法只是QWrap的有啊版用法,并不一定是JQuery也支持的,请勿混淆。
另外,值得一提的是,QWrap的Jss,也是借用selector的概念,将js数据与html元素建立联系。

附:本文原撰于cnblogs:QWrap Selector的几个应用场景

Posted in : 开发相关by : JKJanuary 29, 20112 CommentsTag : QWrap, Selector

$、W、g之争

$
先行者如prototype用来代替getElementById,后来者如jquery用来代指jquery,还有很多模板用来代指模板参数,等等……
总之,假设一个单词,对那个系统很重要很常用,那么,他们就想把这个单词简写成$。
第一个成功的系统,就是美国这个大系统,用它来指代钱。

正如aoao同学所说,“代码里有很多$,会让写码的人很有成就感”,$是个很有诱惑力的符号,QWrap也很想使用。可是,考虑到$已经被先行者大量的挖掘与发挥、并且还会被后来者无限的挖掘与发挥,我们还是忍痛放弃了。
于是,我们转而推荐以下两个缩写:W、g


W
QWrap系统的提出Wrap概念(对一个core核进行包装,外套一层wrap,从而达到core无污染、包装任意扩展)。而使用率最高的,就是NodeW,即对元素的包装。其实细想一下,jquery它也是一个NodeW,还有YUI3的Node与NodeList,也是NodeW。
QWrap中的NodeW,是NodeW与NodeListW的一个合体。
在有啊版应用中,用W代指NodeW。

 

g
就是getElement。
典型语法g(arg0)。
它的目的,就是根据参数arg0(或id,或html,或NodeW),来获取节点。----这里是原生的元素节点,而不是经过包装的节点。

由于历史原因(那时我们经不起$的诱惑),我们实际中的某项目,还是使用$代表getElement。
这个问题也很好解决,因为,浅化命名空间、添加别名等,本身就是项目retouch所做的事。
例如:js/apps/core_dom_youa.js,它里面就包含了一个youa_retouch.js的文件。

 

没有浅化命名空间的应用(core_pure + dom_pure + dom_retouch),除了产生一个window.QW外,没有任何副作用。
按推荐的浅化命名空间的应用(core_pure + core_retouch + dom_pure + dom_retouch + youa_retouch),缩写只有W、g,而没有$。它也与其它的各框架天然兼容、和平共处。

Posted in : 开发相关by : JKJanuary 29, 20110 CommentsTag : none

开站鸣谢

感谢祖国,QWrap终于在年前开通了。

感谢阿肆同学提供服务器空间。

感谢天,感谢地,感谢这歌舞升平的世界………………

感谢甲,感谢乙,感谢我们自己,大家真的辛苦了………………

感谢A,感谢B,感谢或冷对、或路过、或关注、或期待、或贡献的朋友…………

…………

要说的感谢太多,期望QWrap能回报更多的贡献…………

Posted in : 开发相关by : JKJanuary 28, 20115 CommentsTag : none