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