[置顶] -- 新手必读 ReadMe

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

“js库”与“js框架”

市面上流行有诸多js库或框架,“库”与“框架”有些什么区别呢?
就我粗略的理解,如下:
库:lib,方法库,或组件库。核心库是给二次开发同学用的,它严谨、符合标准、独立健壮、无污染。
框架:framework,主要是给用户使用,当然也给二次开发者用,它易使用、易扩展、可持续发展、可控。

有些框架,依赖它开发的东西,只能在它的树荫下生存,而无法独立。这样的框架,就不能当库来用。如jquery。
有些库,几乎没有框架的特性,所以易用性很差,如YUI2,所以,它的用户群也只能局限于二次开发者,或水平比较高的开发者。
....点击查看更多内容

Posted in : 开发相关by : JKFebruary 19, 20110 CommentsTag : none

浅说QWrap的核心机制 ----by 月影

月影写过一篇浅说QWrap的核心机制的文章,发布于51js,详情参见:
浅说QWrap的核心机制

Posted in : 开发相关by : JKFebruary 18, 20110 CommentsTag : none

QWrap骨骼----by LC

LC同学写过一篇QWrap骨骼的文章,具体内容参见:
QWrap骨骼

Posted in : 开发相关by : JKFebruary 18, 20110 CommentsTag : none

把selector字符串转化成过滤函数

QWrap的selector中,把selector转化成过滤函数,实现方式是:
把selector字符串,改装成function的字符串,然后new Function(s)出来。
去除伪类部分的代码,简化成如下....点击查看更多详情

Posted in : 开发相关by : JKFebruary 17, 20110 CommentsTag : none

Jquery之美中不足

在QWrap群里讨论时,有同学问“jquery/yui等已做到极致,我们有没必要再重复造一个叫QWrap的轮子?”
是的,jquery成功挖掘selector、链式用法、gsetter用法、很多精简命名,等等,让前端变得轻松简单,为Web开发作出巨大贡献。
不过,它也有一些不尽人意的地方。
代码坨、只专注于dom、sizzle问题,等等……查看更多内容

Posted in : 开发相关by : JKFebruary 16, 20110 CommentsTag : none

组件相关:放几个beta版的山寨组件试试水

动画。(作者:JerryQu、JK)
* 系列动画效果示例 (包括:位置动画、颜色动画、滚动条动画、动画算子等)

拖动。(作者:JK)
* 简单拖动 (包括:位置拖动、大小调整、内容框选)
* 模块拖动 (拖动模块调整位置)

浮层。(作者:JK)
* 浮动层 (包括:Dialog、Popup、静态alert/confirm/prompt等)

可输入下拉框。(作者:JK)
* 可输入下拉框 (包括:combobox风格/suggest风格等)

具体参见以下地址:
qwrap之----wagang组件序列

Posted in : 开发相关by : JKFebruary 15, 20110 CommentsTag : none

QWrap的浏览器检测

有时需要根据不同的浏览器,做不同的事。
这就需要我们对浏览器以及版本作检测。
QWrap的Browser主要代码如下。


var QW={};
/**
* @class Browser js的运行环境,浏览器以及版本信息。(Browser仅基于userAgent进行嗅探,存在不严谨的缺陷。)
* @singleton
* @namespace QW
*/
QW.Browser
=function(){
var na = window.navigator,
ua
= na.userAgent.toLowerCase(),
browserTester
= /(msie|webkit|gecko|presto|opera|safari|firefox|chrome|maxthon)[ \/]([\d.]+)/ig,
Browser
= {platform: na.platform};
ua.replace(browserTester,
function(a,b,c){
var bLower=b.toLowerCase();
Browser[bLower]
=c;
});
if(Browser.opera) {//Opera9.8后版本号位置变化
ua.replace(/opera.*version\/([\d.]+)/, function(a,b){Browser.opera=b;});
}
if(Browser.msie){
Browser.ie
= Browser.msie;
var v = parseInt(Browser.msie);
Browser.ie6
= v==6;
Browser.ie7
= v==7;
Browser.ie8
= v==8;
Browser.ie9
= v==9;
}
return Browser;
}();
if(QW.Browser.ie){try{document.execCommand("BackgroundImageCache",false,true);}catch(e){}}

检测结果如下:




本文相关的更多内容,请参考http://www.cnblogs.com/jkisjk/archive/2011/02/12/QWrap_Browser.html

Posted in : 开发相关by : JKFebruary 12, 20110 CommentsTag : none

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