zoukankan      html  css  js  c++  java
  • 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只是一种模型概念,没必要让大家都来继承它。所以这段代码仅作示意,被注释掉了。

    我们写一个简单的示例:
    <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实例的用法相似。


    下一篇将分别介绍一下他们。


  • 相关阅读:
    c中的数组与字符串
    c中的函数
    C中的流程控制
    c中的基本运算
    scanf函数
    c中的数据类型、常量、变量
    c中的关键字、标识符、注释
    ios必须知道的事情
    安卓开发之获取SD卡空间数据
    安卓日志猫的使用
  • 原文地址:https://www.cnblogs.com/jkisjk/p/qwrap_wrap.html
Copyright © 2011-2022 走看看