怎么写好组件

2016-07-18 00:09:00

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

组件需求

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

超级产品经理 ',
'全选',
'',
'',
'',
'全不选',
''
].join('');
},
getChoseItem: function(list) {
var inputs = '';
var doInputFunc = function(i, detail) {
return [
'',
'',
''+detail.name+'',
'',
'',
].join('');
};

for (var i = 0; i

众所周知，template就是根据数据渲染成html，在spa项目尤其重要。

逻辑层

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

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');
},
完整案例

总结

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

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

分析

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

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