提醒：本文最後更新於 2746 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

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--

提醒：本文最後更新於 2746 天前，文中所描述的資訊可能已發生改變，請謹慎使用。