QWrap简介之：Wrap模式
前面已讲了不少Helper的内容了，下面再介绍一下“Helper + Wrap + Retouch + Apps主线”中的Wrap。
Wrap是什么？
Wrap就是在一个核(core)的外面包的一层皮。
可以为Wrap加很多针对它的core的方法。
这样理解：Wrap是一个剃须刀包装盒，core是被包装的剃须刀，现在包装盒子上有很多说明，并不是在说这个盒子，而是在说被包装的剃须刀。
-----有了这个盒子后，剃须刀还是原封不动的，但是剃须刀却有了“说明书”的功能。
对于习惯了prototype方式的js同学来说，可能有点绕。
通常，我们希望某个对象（例如dom里的Element元素）拥有某些功能，最直接的想法就是：给对象加方法，或者给对象原型加方法。
“给对象加方法”就必须要保证在调用方法前，方法已经加到对象上去了。----这个“必须要保证”会造成方法调用的不便。
“给原型加方法”就算没隐患，也在有的浏览器下面没法实现，例如IE下不能为Element的原型进行操作。
那我们该怎么做呢？
Wrap可以来解决这个问题：取出元素或元素数组后，我们就把它放在一个订制好的盒子里，然后，我们通过这个盒子来操作那个或那些元素。
元素或元素数组，就成了这个盒子的核，而这个盒子本来就有很多功能。要让元素拥有这个功能，只需要一个装箱（把core装进盒子）过程就可以了。
可能已经有的同学注意到，在js/core/core_base.js中，有一段被注释了的代码：
/*
* @class Wrap Wrap包装器。在对象的外面加一个外皮
* @namespace QW
* @param {any} core 被包装对象
* @return {Wrap}
*/
/*
QW.Wrap=function(core) {
this.core=core;
};
*/
这是一个Wrap的典型代码，Wrap只是一种模型概念，没必要让大家都来继承它。所以这段代码仅作示意，被注释掉了。
我们写一个简单的示例：
可以看到，我们并没有改变Element的原型，也没有为元素添加任何方法，可是，我们还是可以进行setHtml与setColor的操作。
只是在操作前，进行了一次装箱，即：new ElementWrap(element)。
而这个装箱的成本很低。装箱后的用法就像是Element本身就拥有该方法一样干净利落。
使用jquery的同学不知有没有想过：jquery为什么能用$(document.body).css('color','red').css('font-size','20px')来对body进行多种操作？
是的，jquery也是一个包装器，$(document.body)，就是一个装箱过程。
同样，YUI3里的new Node(element)与new NodeList(elements)也是装箱的过程。
返回的都是带核的包装，之后，直接操作的，也都是包装壳的方法，不过，那些方法的实质，几乎都是针对核的。
QWrap中，Wrap类通常以W结尾，对应的js以.w.js结尾。
QWrap里应用范围最广的两个包装器是：
下一篇将分别介绍一下他们。
Wrap是什么？
Wrap就是在一个核(core)的外面包的一层皮。
可以为Wrap加很多针对它的core的方法。
这样理解：Wrap是一个剃须刀包装盒，core是被包装的剃须刀，现在包装盒子上有很多说明，并不是在说这个盒子，而是在说被包装的剃须刀。
-----有了这个盒子后，剃须刀还是原封不动的，但是剃须刀却有了“说明书”的功能。
对于习惯了prototype方式的js同学来说，可能有点绕。
通常，我们希望某个对象（例如dom里的Element元素）拥有某些功能，最直接的想法就是：给对象加方法，或者给对象原型加方法。
“给对象加方法”就必须要保证在调用方法前，方法已经加到对象上去了。----这个“必须要保证”会造成方法调用的不便。
“给原型加方法”就算没隐患，也在有的浏览器下面没法实现，例如IE下不能为Element的原型进行操作。
那我们该怎么做呢？
Wrap可以来解决这个问题：取出元素或元素数组后，我们就把它放在一个订制好的盒子里，然后，我们通过这个盒子来操作那个或那些元素。
元素或元素数组，就成了这个盒子的核，而这个盒子本来就有很多功能。要让元素拥有这个功能，只需要一个装箱（把core装进盒子）过程就可以了。
可能已经有的同学注意到，在js/core/core_base.js中，有一段被注释了的代码：
/*
* @class Wrap Wrap包装器。在对象的外面加一个外皮
* @namespace QW
* @param {any} core 被包装对象
* @return {Wrap}
*/
/*
QW.Wrap=function(core) {
this.core=core;
};
*/
这是一个Wrap的典型代码，Wrap只是一种模型概念，没必要让大家都来继承它。所以这段代码仅作示意，被注释掉了。
我们写一个简单的示例：
<body>
<div id="test1" style="border:1px solid black;margin:5px;"></div>
<div id="test2" style="border:1px solid black;margin:5px;"></div>
<script>
function ElementWrap(core){
this.core=core;
};
ElementWrap.prototype.setHtml=function(html){
this.core.innerHTML=html;
return this;
};
ElementWrap.prototype.setColor=function(color){
this.core.style.color=color;
return this;
};
new ElementWrap(document.getElementById('test1')).setHtml('hello1').setColor('red');
new ElementWrap(document.getElementById('test2')).setHtml('hello2').setColor('blue');
</script>
</body>
可以看到，我们并没有改变Element的原型，也没有为元素添加任何方法，可是，我们还是可以进行setHtml与setColor的操作。
只是在操作前，进行了一次装箱，即：new ElementWrap(element)。
而这个装箱的成本很低。装箱后的用法就像是Element本身就拥有该方法一样干净利落。
使用jquery的同学不知有没有想过：jquery为什么能用$(document.body).css('color','red').css('font-size','20px')来对body进行多种操作？
是的，jquery也是一个包装器，$(document.body)，就是一个装箱过程。
同样，YUI3里的new Node(element)与new NodeList(elements)也是装箱的过程。
返回的都是带核的包装，之后，直接操作的，也都是包装壳的方法，不过，那些方法的实质，几乎都是针对核的。
QWrap中，Wrap类通常以W结尾，对应的js以.w.js结尾。
QWrap里应用范围最广的两个包装器是：
| NodeW | dom/node.w.js | 元素包装器。在Youa项目中缩写为W，与jquery的jquery对象类似 |
| EventW | dom/event.w.js | 事件包装器。其实例的用法与标准event实例的用法相似。 |
下一篇将分别介绍一下他们。
