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

附：

QWrap官网

在github上的项目地址

Youa版文档