Qwrap 思想碎片
上一篇博文我列出了Qwrap的三个算子:mul,rwrap,methodize,这里我们来说说Qwrap的一个核心设计思路,什么是Qwrap?就是百度有啊前端开发人员在月影的带领下经过长期开发总结的之么一套javascrpt设计方案.
里面提到不污染prototype,之所以强调不污染我感觉是因为之前百度有啊的人在写脚本时大量的在Array,Function的prototype上添加方法,然后就被搞前端开的鄙视了,然后他们通过methodize方法对函数进行变换,解决了这个问题(其它我感觉只是把prototype方法写到了一起了而已,在必要的时候进行批量retouch)
再者近几年jqeury以它的友好的用户接口,和它的低门槛,和完美跨浏览器,blah,blah......总之好处一大堆,其中最让人爽的就是它的链式操作,对元素的选择包装功能了,当然百度的人肯定也会觉得爽,所以他们就想法去实现,直接抄jquery,肯定是被鄙视的.话说月影等人的技术也不是盖的.再者折腾函数本来就是月影的强项,然后他们就提出了wrap概念,所谓wrap就是在一个对象或者属性进行包装,这里提到的对象或者属性被Qwrap称之为core,听着怪吓人的,因为一听到core我就想到系统内核.其实不然,这个核可以是任何东东,比如字符串,一个element对象,一个object,一个数组,一个函数............等等等等.比如以下例子:
[javascript]
function Wrap(core){
this.core = core;//所谓的core
}
var testCore = new Wrap(document.getElementById('divtest'));
[/javascript]
在以上函数Wrap中只有简单的一行,就是this.core被赋值为参数core,接着我们new一个Wrap对象出来赋值给testCore,这时我们就把testCore对象的core属性称之为testCore对象的core(核),这时你肯定会说,到底在讲些什么东西嘛,这有什么好说的,没什么好玩儿的啊.但事实就是这样简单,这里只是提出一个概念.接着他们在这个概念上发扬光大,代码变成下面这样.
[javascript]
function Wrap(core){
this.core = core;//所谓的core
}
Wrap.prototype.getHtml = function(){
return this.core.innerHTML;
}
Wrap.prototype.setHtml = function(value){
this.core.innerHTML=value;
}
var testCore = new Wrap(document.getElementById('divtest'));
[/javascript]
你还是觉得没什么了不起的.但概念你一定要知道,一旦确定了一个core,这个对象上主要的方法都应该是为操作core而服务的."Qwrap"中的wrap就是包的意思,前面那个Q,我想应该理解为core吧.但不确定百度的人到底如何想的...接下来,我们要实现链式操作,Qwrap提出来一个retouch机制,具体是通过methodize方法实现的,我们来看看methodize的源码
[javascript]
function methodize(func,chain){
return function(){
var ret = func.apply(null,[this].concat([].slice.call(arguments)));
return chain?this:ret;
}
};
[/javascript]
又是了了几行,我们来看看这个鸟函数能做什么事儿.还是先分析一下它吧.它有两个参数:func(函数),chain(布尔值),返回一个function,被返回的function内部定义一个变量ret,用来接收参数func通过apply执行后的返回值,初学者可能会对这句:[this].concat([].slice.call(arguments))比较费解,其实这句话就是强制把this(当前执行函数的对象)当做函数的第一个参数添加到参数表里去,这就可以做到在操作函数里不进行参数传递,就可以直接操作this对象或者this对象的core(其实如果没有参数core的时候你可以把this理解为core的),因为这句话强制为我们传进来了(不管你用不用,它就在那里).接下来一个三元运算:如果第三个参数chain是true,就返回this(当前执行函数的对象)用于链式操作,否则返回函数返回值(此时不能进行链式操作);来看一个例子吧.
[javascript]
var testa = {
methodA:methodize(function(){
console.log('i am the first func');
return 'first'
},true),
methodB:methodize(function(){
console.log('i am the second func');
return 'second';
},true)
};
//然后我们就可以这样用
testa.methodA().methodB();
//当然也可以这样用
testa.methodB().methodA();
[/javascript]
以上就是retouch实例,QWrap里把很多方法放到一个对象里,然后进行批量操作,做到代码与逻辑分开,使其为它的core服务,Arrary,Fucntion,Data,Objcet,STring,RegExp,Number,Boolean,的操作都是如此,有个叫李超的同学写过一篇日志,大家可以看看,地址在这里:http://lichaosoft.net/archives/1223
说到这里我们讲了wrap,methodize,还有一个mul算子,这个mul算子是做什么的呢?
它是为同时操作多个元素服务的,先看代码吧.
[javascript]
//使函数的第一个参数支持数组
//典型用途:对符合条件的多个element进行同时处理,Array,或者Object的map操作
function mul(func){
return function(){
if(arguments[0] instanceof Array){
var ret = []
for(var i=0,len = arguments[0].length;i<len;i++){
r= func.apply(null,[arguments[0][i]].concat([].slice.call(arguments,1)));
ret.push(r);
}
return ret;
}else{
return func.apply(null,arguments);
}
}
};
function testmul(x,y){
return x+y;
}
console.log( mul(testmul)([1,2,3,4],1) );
得到:[2,3,4,5];
[/javascript]
依葫芦划飘,如果我们想把两个div的背景色同时设置为red;代码如下
[javascript]
function setColor(el,color){
el.style.background = coloe;
};
//原函数只能设置一个元素,我们把它mul一下
mul(setColor)([el1,el2],'red');
//好了,就这样,实现了.是不是很简单.
[/javascript]
Qwrap就是在这些个思想碎片上构造起来的.话说一排排整齐的调用接口下面肯定是一个个龌龊的实现,Qwrap也逃脱不了这句话.
不小心惊动了Qwrap的作者月影,对我对Qwrap理解错误的地方月影悉心纠正,我把他对我对话征得他的同意后放到下面,希望各位同学不要被我误导.
10:31 AM akira.cn: hi~~ 我看了你最近写的关于qwrap的文章，里面的methodize说得其实不是很准确，第二个参数不是chain，链式不是通过methodize来完成的，而且methodize的第二个参数对retouch来说很重要
10:35 AM me: 恩,是的,的确是通过第二个参数...
10:36 AM 不小心惊动了月影大侠,呵呵.
akira.cn: 呵呵~ http://www.silverna.org/blog/?p=211 你看第一段例子代码就明白了，methodize的第二个参数是属性名，它的作用是把function给作为method，然后retouch到Wrap上
10:38 AM me: 是的,retouch到wrap上,但第二个参数,chain不是可以灵活的实现链式调用吗?
10:39 AM akira.cn: 链式调用不一定是返回this的，所以是放在rwrap上实现的
比如selector的链式调用，每次返回的是不同的元素集合，它们是不同的对象，不是同一个this
10:41 AM me: 哦,这可能是我对Qwrap的实现思想不清晰导致的.
10:42 AM 我只是感觉Qwrap好玩儿,还有您写的几个算子,就在那儿瞎鼓捣.
akira.cn: :)
10:43 AM me: 回来我再整理一下,我是从一个菜鸟的角度写的.呵呵.
10:44 AM akira.cn: http://www.silverna.org/blog/?p=199 methodize对Wrap其实很重要，不过也只是让methodize多往前走一步，让它不仅仅能对付“this”，而且要能够对付“Wrap”，而且和实际“Wrap”里面的属性是无关的，不管是core还是items或者随便其他什么属性
10:46 AM me: 要这么讲的话,Array其它也是一个Qwrap了
要这么讲的话,Array其实也是一个Qwrap了
10:48 AM akira.cn: 刚才我给你看的第一个例子里，List就是Array的Wrap，我将Array的原生方法给Wrap到List上面去
通过的是methodize(ah, "items")
10:49 AM 这样List就相当于包装了Array，我扩展方法到List的prototype上，就避免去操作Array的prototype而导致让Array的for..in失效
操作List和Array所有的不同就是必须要new List(arr)
10:50 AM 其他从Array上dump出来的方法都已经retouch到List的prototype上了，所以用它们和直接用Array的方法完全一样
10:51 AM me: 不得不说这套方法的确灵活多变.
10:54 AM akira.cn: 在QWrap里我们把ArrayH.forEach方法给retouch到Array上，让不支持原生forEach版本的浏览器也能用Array.forEach，然后再把它和数组上其他一些方法dump出来给retouch到NodeW上，所以我们就能让NodeW也有forEach等方法，比如可以直接W("div").forEach... 这个forEach是直接从数组上“偷”过来用的
10:56 AM me: 我的理解:有了 methodize 实现的retouch机制,QWrap里的方法已经无国界了.
可以到处游荡.
akira.cn: 某种程度上来说是的，不过我们用Helper机制约束了一下
10:57 AM me: 实现一套库.必须要对它的约束,无规矩不成方圆,
10:58 AM akira.cn: 把相同目的方法归类为一个Helper，然后一个一个Helper去retouch，而避免操作零散的一个个方法，那样操作比较乱，也不方便
me: 然后约束是要付出代价的,我感觉这么一约束,就失去了最大的灵活性.
代码也显的难懂了.
10:59 AM 但是为了更好的适应多数开发人员,约束不得不出现了.
akira.cn: 还好，其实也没有失去多少灵活性
11:00 AM 其实QWrap的代码还是很好懂的，其实只要理解了helper.h.js这一个文件，基本上整个核心就OK了
me: 当然,不可能每个开发人员都站在月影的高度去思考问题的.
11:01 AM akira.cn: 我们现在开放出来就是让感兴趣的同学去看代码，这些也不是我们自己说的，都是看代码的同学的体会
me: 前一段时间阿里系一个人问我,为什么Qwrap选择了jquery不一样的实现思路,我无语了...
11:02 AM akira.cn: 其实某种程度上反而是比jquery更好理解，因为jquery里，10个接口可能有10种内部不同的实现，毕竟说让人用起来方便，内部实现就回绕一点，这样读代码就累了
11:03 AM 而qwrap里，只要理解了Helper机制，其实这些变换都就算当做数学公式来背都没问题，在这些变换之上的代码就简单多了
11:04 AM me: 恩,我也有同感,那三个算子理解起来.还是花了我不少功夫的.最后豁然开朗时发现,玩儿的就是函数在玩函数.
玩参数,玩返回值
11:05 AM akira.cn: 是啊，最初设计的时候有6个算子，现在已经减少到3了，而且不会再增加
因为3个已经够了，这种东西还是越少越好
me: 恩,3个很给力.
