QWrap简介之组件编写

共 1244 字 约 4 分钟 13 年前 5 评论

❗ 本文最后更新于 4917 天前，文中所描述的信息可能已发生改变，请谨慎使用。

提醒：QWrap 框架已经停止维护多年，QWrap.com 域名已经失效，请不要点击。

QWrap是一个BSD协议下的开源JS框架，前身是百度有啊WED团队内部使用的BBlib。关于她的设计理念、核心架构，JK和月影两位同学的博客上有很多文章。这里我简单介绍下实际项目中，如何用QWrap开发组件。

动手之前，建议先看下这几十篇QWrap介绍，对QWrap有个全面的了解。然后，通过git获取JK分支的QWrap，或者从这里下载最新主干的zip包。QWrap官方版暂时还没放组件，我们先选择有组件的JK版，两者核心库是一致的。做完这些准备工作后，进入正题~

我们来做一个价格筛选器组件。需求是：给定最小值和最大值，通过拖动两个滑块让用户直观地选择价格区间。效果图如下：

先不急着写，想下怎么实现。首先，拖动元素，要考虑很多因素，靠谱的办法还是先看库里有写好的没，DRY原则。实际上，wagang目录下有一个drag组件，封装了常见的dragdrop行为，可以直接使用。另外，UI组件最重要的是合理且可扩展的html结构，这个就仁者见仁了。这里给一种结构（点这里预览）：

<div id="dualSilder1" class="price_graph" style="width: 212px;">
    <span class="arr1"><span class="arr"></span></span>
    <span class="arr2"><span class="arr"></span></span>
</div>

两个.arr对应两个滑块，arr1和arr2分别是左右灰色区域。拖动滑块，改变parent宽度，刚好符合drag组件提供的SimpleResize行为。剩下的事情就好办了，开始动手吧~

进入QWrap代码的resource/js目录。core、dom两个目录是核心库，一般不直接引用；项目中通过apps/apps_wagang下的合并文件引入核心库；wagang是JK版组件所在目录。我们新建一个my放自己的组件，组件暂且叫DualSlider，目录层级大概是这样：

core/dom/apps/apps_wagang...
wagang
 └ panel...
my
 └ dualsilder
       ├ dualsilder.js
       ├ _test (单元测试目录)
       └ _example (示例目录)

我们选择apps_wagang/qwrap_wagang.js作为核心库文件，完成组件代码。具体实现逻辑比较长，点这里查看，代码主体结构如下：

(function() {
    var mix = ObjectH.mix,
        createEvents = CustEvent.createEvents;

    function DualSlider(opts) {
        mix(this, opts, 1);
        this._init();
    };

    //组件提供的自定义事件
    DualSlider.EVENTS = ['drag', 'dragend'];

    mix(DualSlider.prototype, {
        container : null,    //容器
        width : 100,    //拖动距离，单位px
        startValue : 0, 
        endValue : 100,
        //初始化参数
        _init : function() {
            ...
            createEvents(this, DualSlider.EVENTS);
            this._render();
        },
        //绑定拖动事件
        _render : function() {
            ...
        },
        //返回当前值
        getValues : function() {
            ...
        }
    });

    QW.provide('DualSlider', DualSlider);

    var DualSilderH = {
        dualSilde : function(el, opt) {
            opt.container = el;
            new DualSlider(opt);
        }
    };

    QW.NodeW.pluginHelper(DualSilderH, 'operator');
})();

代码开始的静态方法拷贝，有利于JS压缩和组件solo。组件里全都使用静态方法还是Retouch后的方法，要看组件开发者的取舍了——静态利于solo；retouch功能强大、书写简便——本例是用Retouch后的。接下来是构造函数和自定义事件声明，一旦通过CustEvent.createEvents创建了自定义事件，就可以通过on、fire注册和触发相应的事件。

中间部分没什么特别的，通过mix把数组里的方法和属性加进组件prototype。接下来的provide，把组件绑定到特定的命名空间。具体绑到哪儿，是在app对应的retouch文件指定的，例如之前Youa是将所有组件绑到window下，用起来比较方便；也可以在retouch里给组件加任意层命名空间，避免与其它组件冲突，很自由。

接下来创建了DualSilderH，它是一个满足Helper规范的对象。DualSilderH有一个dualSlide方法，第一个参数是el，我们把它加进NodeW，使得W出来的对象拥有这个方法，最后的operator表示dualSlide调用完，返回W本身，也就是传说中的链式调用，如：

W('#dualSilder2').dualSilde({
        width : 200,
        startValue : 0,
        endValue : 100
    }).css('opacity', '.6');

这样我们的组件基本算完工了，点这里看Demo。可以看到，这个组件依赖于Drag，如果页面上忘记引入Drag，它也就不能工作。有什么办法可以避免这种情况呢？这时候，轮到模块加载器出场了。

打开apps_wagang下的modules_config.js，增加两个模块：

Drag: {
    url: '//wagang/drag/drag.js'
},
DualSlider: {
    url: '//my/dualslider/dualslider.js',
    require : 'Drag'
},

修改测试页面，仅引入核心库和modules_config.js，这样使用组件：

QW.use('DualSlider', function() {
    var s1 = new DualSlider({
            container : '#dualSilder1',
            width : 200,
            startValue : 0,
            endValue : 100
        });
});

use会找到模块依赖，在所有依赖文件加载完执行回调函数，这样就没问题了。

到这里，基于QWrap开发组件整个流程基本走完了。剩下的合并压缩，可以统一交给工具来做，之后再做介绍。整个过程看似比较复杂，其实理解了QWrap的Helper+Wrap+Retouch+Apps机制后，就理解了这样做的目的，也可以从中体会到代码应用上灵活自如的好处。

最后，如果需要给组件增加setValues方法，改变数值时需要动画，又该怎么实现呢？这里有Demo，大家可以先自己尝试下再看。

附：

本文链接：https://imququ.com/post/qwrap-component.html，参与评论 »

--EOF--

发表于 2011-07-06 02:46:12，并被添加「JavaScript、QWrap」标签。查看本文 Markdown 版本 »

本站使用「署名 4.0 国际」创作共享协议，相关说明 »

Comments

Waline 评论加载中...