摘要：我們?yōu)槭裁匆獙懡M件呢這里不細分組件插件控件，追究其原因無非讓代碼，能夠復用，追求更快的開發(fā)效率。最終解決在寫組件的時候，業(yè)務邏輯部分，現(xiàn)預留配置項，以便后面業(yè)務發(fā)生改變，通過配置項來重置。

我們?yōu)槭裁匆獙懡M件呢？這里不細分組件、插件、控件，追究其原因無非讓代碼，能夠復用，追求更快的開發(fā)效率。其實還有個重要的原因，項目大了之后，難以維護。這個時候就會把項目中重復的部分抽取出來，形成一個組件。但是組件也會有些"缺點"，這個最后講。

要實現(xiàn)如圖的一個條件選擇器

有的時候，項目時間緊張，就會直接切圖，通過jquery的dom選擇器實現(xiàn)這個"簡單的功能"。

為了更好的維護，以及更好的復用此組件，就要做些抽象。

數(shù)據(jù)層：用來決定按鈕個數(shù)以及按鈕是否選擇

表現(xiàn)層：按鈕使用現(xiàn)有的ui組件

邏輯層：按鈕事件等邏輯處理

data: null,
choseT: 0,
choseF: 0,
getDataStatistics: function() {
    var list = this.data;
    var choseT = 0;
    var choseF = 0;
    var len = list.length;
    for (var i = 0; i < list.length; i++) {
        if(list[i].checked == "checked") {
            choseT++;
        }else {
            choseF++;
        }
    }
    return {
        choseT: choseT,
        choseF: choseF,
        len: len
    };
},
dataChangeAll: function(checked) {
    var list = this.data;
    var len = list.length;
    checked = checked || "";
    if(checked == "checked") {
        this.choseT = len;
        this.choseF = 0;
    }else {
        this.choseT = 0;
        this.choseF = len;
    }

    for (var i = 0; i < len; i++) {
        list[i].checked = checked;
    }
},
dataChangeSingle: function(index, checked) {
    var list = this.data;
    var choseT = this.choseT;
    var choseF = this.choseF;
    if(checked == "checked") {
        choseT++;
        choseF--;
    }else {
        choseT--;
        choseF++;
    }
    this.choseT = choseT;
    this.choseF = choseF;
    list[index].checked = checked;
}

數(shù)據(jù)層主要對原始數(shù)據(jù)做些CURD的一些操作，具體的操作看具體的業(yè)務需求，但是要具有這個意識。

說白了表現(xiàn)層也就是template層或者view層，就是用戶所看到的，一般會用一個比較成熟的ui庫，比如bootstrap。

getHtml: function(list, statistic) {
    var html = 
        ["
",
           "
",
               "
",
                   this.getChoseNav(statistic),
               "
",
               "
",
                    this.getChoseItem(list),
               "
",
           "
",
        "
"].join("");
    return html;
},
getChoseNav: function(statistic) {
    var checkAll = "";
    var checkNone = "";
    var len = statistic.len;
    if(statistic.choseT == len) {
        checkAll = "checked";
    }
    if(statistic.choseF == len) {
        checkNone = "checked";
    }
    return [
        "",
            "",
            "全選",
        "",
        "",
            "",
            "全不選",
        ""
    ].join("");
},
getChoseItem: function(list) {
    var inputs = "";
    var doInputFunc = function(i, detail) {
        return [
            "
",
                "",
                    ""+detail.name+"",
                "",
            "
",
        ].join("");
    };

    for (var i = 0; i < list.length; i++) {
        inputs += doInputFunc(i, list[i]);
    }
    return inputs;
},
domAction: function($el, type, data) {
    var html = "";
    type = type || "all";
    if(type == "item") {
        html = this.getChoseItem(data);
        $el.find(".J_view_checkItems").html(html);
    }else if(type == "all") {
        html = this.getChoseNav(data);
        $el.find(".J_view_checkNav").html(html);
    }
}

眾所周知，template就是根據(jù)數(shù)據(jù)渲染成html，在spa項目尤其重要。

這層主要做 調(diào)用template方法將數(shù)據(jù)渲染到頁面上；將頁面上的一些事件結(jié)果，映射到數(shù)據(jù)層。其實現(xiàn)在流行的MVVM模式，就是在邏輯層這里做了更多的事情，只是開發(fā)者們不用去關(guān)心細節(jié)處理，更專注業(yè)務的開發(fā)。

eventBind: function($el) {
    var _this = this;
    var $target = "";
    
    // 全選
    $el.on("change", ".J_view_checkAll", function() {
        if(!$(this).parent().hasClass("checked")) {
            _this.module.dataChangeAll("checked");
            _this.view.domAction($el, "all", _this.module.getDataStatistics());
            _this.view.domAction($el, "item", _this.module.data);
        }
    });
    
    // 全不選
    $el.on("change", ".J_view_checkNone", function() {
        if(!$(this).parent().hasClass("checked")) {
            _this.module.dataChangeAll("");
            _this.view.domAction($el, "all", _this.module.getDataStatistics());
            _this.view.domAction($el, "item", _this.module.data);
        }
    });
    
    // 單個
    $el.on("click", ".J_view_checkItem", function() {
        $target = $(this);
        var index = $target.val();
        var checked = "";
        if($target.prop("checked")) {
            checked = "checked";
        }
        _this.module.dataChangeSingle(index, checked);
        _this.view.domAction($el, "all", _this.module.getDataStatistics());
    });
},
eventUnbind: function($el) {
    $el.off("change");
    $el.off("click");
},

完整案例

這樣子寫能更好的抽象出公共部分，在其它模塊就只要傳入數(shù)據(jù)就可以了，不用重復拷貝代碼了。

一開始說到組件會有‘缺點’？尤其是業(yè)務組件？

項目版本迭代是一個很正常的事情，第一版的時候，比如這個數(shù)據(jù)選擇項這個組件，在每個模塊都有這樣的需求。但是在下一個版本的時候，產(chǎn)品經(jīng)理在其中一個模塊更改了業(yè)務需求，這就導致這個模塊的數(shù)據(jù)選擇項，跟其它模塊的數(shù)據(jù)選擇項不一樣了，但是又有80%甚至90%的相似度，這個時候就非常困擾，到底是重新寫個，還是再對原來的組件，增加個兼容配置項？

重新寫會有很多重復的代碼。新增配置項，又必須保證之前所有的模塊都要正確，得必須都驗證過去。有人就會覺得直接去驗證好了啊，但是項目大了之后，一個一個去驗證不是解決問題的辦法。

在寫組件的時候，業(yè)務邏輯部分，現(xiàn)預留配置項，以便后面業(yè)務發(fā)生改變，通過配置項來重置。尤其是覺得產(chǎn)品經(jīng)理會更改頻繁的部分。

實在是覺得更改邏輯較大，那就重新寫個吧，因為一個一個去驗證之前的模塊的成本還是很大的。

原文地址 http://tostring.site/2016/07/16/%E6%80%8E%E4%B9%88%E5%86%99%E5%A5%BD%E7%BB%84%E4%BB%B6/