怎么寫好組件

wow_worktile 發(fā)布于2019-08-21 14:06 / 2765人閱讀

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

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

組件需求

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

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

需求分析

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

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

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

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

數(shù)據(jù)層

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è)務(wù)需求，但是要具有這個(gè)意識(shí)。

表現(xiàn)層

說白了表現(xiàn)層也就是template層或者view層，就是用戶所看到的，一般會(huì)用一個(gè)比較成熟的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項(xiàng)目尤其重要。

邏輯層

這層主要做調(diào)用template方法將數(shù)據(jù)渲染到頁面上；將頁面上的一些事件結(jié)果，映射到數(shù)據(jù)層。其實(shí)現(xiàn)在流行的MVVM模式，就是在邏輯層這里做了更多的事情，只是開發(fā)者們不用去關(guān)心細(xì)節(jié)處理，更專注業(yè)務(wù)的開發(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);
        }
    });
    
    // 單個(gè)
    $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");
},

完整案例

總結(jié)

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

一開始說到組件會(huì)有‘缺點(diǎn)’？尤其是業(yè)務(wù)組件？

分析

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

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

最終解決

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

實(shí)在是覺得更改邏輯較大，那就重新寫個(gè)吧，因?yàn)橐粋€(gè)一個(gè)去驗(yàn)證之前的模塊的成本還是很大的。

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