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实例的用法相似。


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


  • 相关阅读:
    将Nginx添加到windows服务中
    springboot使用redis管理session
    GIT常用命令
    阻止360、谷歌浏览器表单自动填充
    谈谈对Spring IOC的理解
    同一个Nginx服务器同一端口配置多个代理服务
    LeetCode 653. Two Sum IV
    109. Convert Sorted List to Binary Search Tree(根据有序链表构造平衡的二叉查找树)
    108. Convert Sorted Array to Binary Search Tree(从有序数组中构造平衡的BST)
    LeetCode 236. Lowest Common Ancestor of a Binary Tree(二叉树求两点LCA)
  • 原文地址:https://www.cnblogs.com/jkisjk/p/qwrap_wrap.html
Copyright © 2011-2022 走看看