微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

怎么写好组件

2017-05-12 21:04 前端大全

(点击上方公众号,可快速关注)


作者:伯乐在线/前端-小强

http://web.jobbole.com/87164/

如有好文章投稿,请点击 → 这里了解详情


我们为什么要写组件呢?这里不细分组件、插件、控件,追究其原因无非让代码,能够复用,追求更快的开发效率。其实还有个重要的原因,项目大了之后,难以维护。这个时候就会把项目中重复的部分抽取出来,形成一个组件。但是组件也会有些’缺点’,这个最后讲。


组件需求


要实现如图的一个条件选择器



有的时候,项目时间紧张,就会直接切图,通过jquery的dom选择器实现这个’简单的功能’。


需求分析


为了更好的维护,以及更好的复用此组件,就要做些抽象。


  • 数据层:用来决定按钮个数以及按钮是否选择

  • 表现层:按钮使用现有的ui组件

  • 逻辑层:按钮事件等逻辑处理


数据层


datanull,

choseT0,

choseF0,

getDataStatisticsfunction() {

    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 {

        choseTchoseT,

        choseFchoseF,

        lenlen

    };

},

dataChangeAllfunction(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;

    }

},

dataChangeSinglefunction(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;

}


数据层主要对原始数据做些CURD的一些操作,具体的操作看具体的业务需求,但是要具有这个意识。


表现层


说白了表现层也就是template层或者view层,就是用户所看到的,一般会用一个比较成熟的ui库,比如bootstrap。


getHtmlfunction(list, statistic) {

    var html =

        ['<div class="sales-dialog">',

           '<div>',

               '<div class="tag-box-chose J_view_checkNav">',

                   this.getChoseNav(statistic),

               '</div>',

               '<div class="mt_10 J_view_checkItems">',

                    this.getChoseItem(list),

               '</div>',

           '</div>',

        '</div>'].join('');

    return html;

},

getChoseNavfunction(statistic) {

    var checkAll = '';

    var checkNone = '';

    var len = statistic.len;

    if(statistic.choseT == len) {

        checkAll = 'checked';

    }

    if(statistic.choseF == len) {

        checkNone = 'checked';

    }

    return [

        '<label class="tag '+checkAll+'">',

            '<input type="radio" name="radio-grade input-fat" class="J_view_checkAll" '+checkAll+' />',

            '<span class="tag-tit">全选</span>',

        '</label>',

        '<label class="tag '+checkNone+'">',

            '<input type="radio" name="radio-grade" class="J_view_checkNone" '+checkNone+'/>',

            '<span class="tag-tit">全不选</span>',

        '</label>'

    ].join('');

},

getChoseItemfunction(list) {

    var inputs = '';

    var doInputFunc = function(i, detail) {

        return [

            '<div style="display:inline-block;width:150px;">',

                '<label data-toggle="checkbox" class="checkbox-pretty inline '+detail.checked+'">',

                    '<input type="checkbox" value="'+i+'" class="J_view_checkItem " '+detail.checked+'><span>'+detail.name+'</span>',

                '</label>',

            '</div>',

        ].join('');

    };

 

    for (var i = 0; i < list.length; i++) {

        inputs += doInputFunc(i, list[i]);

    }

    return inputs;

},

domActionfunction($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就是根据数据渲染成html,在spa项目尤其重要。




逻辑层


这层主要做 调用template方法将数据渲染到页面上;将页面上的一些事件结果,映射到数据层。其实现在流行的MVVM模式,就是在逻辑层这里做了更多的事情,只是开发者们不用去关心细节处理,更专注业务的开发。


eventBindfunction($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());

    });

},

eventUnbindfunction($el) {

    $el.off('change');

    $el.off('click');

},


完整案例


总结


这样子写能更好的抽象出公共部分,在其它模块就只要传入数据就可以了,不用重复拷贝代码了。


一开始说到组件会有‘缺点’?尤其是业务组件?


分析


项目版本迭代是一个很正常的事情,第一版的时候,比如这个数据选择项这个组件,在每个模块都有这样的需求。但是在下一个版本的时候,产品经理在其中一个模块更改了业务需求,这就导致这个模块的数据选择项,跟其它模块的数据选择项不一样了,但是又有80%甚至90%的相似度,这个时候就非常困扰,到底是重新写个,还是再对原来的组件,增加个兼容配置项?


重新写会有很多重复的代码。新增配置项,又必须保证之前所有的模块都要正确,得必须都验证过去。有人就会觉得直接去验证好了啊,但是项目大了之后,一个一个去验证不是解决问题的办法。


最终解决


在写组件的时候,业务逻辑部分,现预留配置项,以便后面业务发生改变,通过配置项来重置。尤其是觉得产品经理会更改频繁的部分。


实在是觉得更改逻辑较大,那就重新写个吧,因为一个一个去验证之前的模块的成本还是很大的。



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 2017年前端开发工具趋势 前端开发转型产品经理,靠谱吗? 从输入url到页面展示到底发生了什么 30岁文科女,凭什么4个月从零基础到跨国公司前端? BOOM:一款有趣的Javascript动画效果
猜您喜欢 用Java爬取知乎60万用户信息之后的简单分析 不该被隐藏的光芒:上世纪NASA三位被忽视的女性工程师 几个分布式基础算法 雪夜围炉话安全(五) NVDIMM在闪存存储中的应用探讨