QWrap简介之组件编写

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,大家可以先自己尝试下再看。

附:

本文链接:参与评论 »

--EOF--

提醒:本文最后更新于 1982 天前,文中所描述的信息可能已发生改变,请谨慎使用。

Comments