QWrap简介之组件编写

发表于 5年以前 | 总阅读数：1899 次

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

动手之前，建议先看下这几十篇QWrap介绍，对QWrap有个全面的了解。然后，通过git获取JK分支的QWrap，或者从这里下载最新主干的zip包。QWra p官方版暂时还没放组件，我们先选择有组件的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.crea teEvents创建了自定义事件，就可以通过on、fire注册和触发相应的事件。

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

接下来创建了DualSilderH，它是一个满足Helper规范的对象。DualSilderH有一个dualSlide方法，第一个参数是el，我们把它加进N odeW，使得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的Helpe r+Wrap+Retouch+Apps机制后，就理解了这样做的目的，也可以从中体会到代码应用上灵活自如的好处。

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

附：