1.事出必有因
最近在看老项目的代码，一个富客户端的js代码，几千行的代码，全是function（）{} var...的垂直布局，真的是要感动的哭了。
一开始都是这样，想实现什么功能，不管三七二十一，function走起，最终堆起无数个变量和函数来完成一个画面的js。我也是，但过段时间自己去改代码bug或者加功能的时候，我的天，这是我写的吗，什么时候写的，怎么理不清思路了,而且，修改一个地方其他地方也得改，改完了还容易出新bug，偶尔都会忘了是自己写的，心里默念：这个傻X...恩，还好是默念。
慢慢的代码看多了点，了解了些js的模块封装的一些方式，面向对象的相关思想（单一职责、高内聚低耦合....再说就有点装了>.<），越来越觉得易读、易改的代码应该需要更好的组织形式，正好最近碰到了一个网友相关的问题，看了他想优化的代码，真有看到自己一开始写的代码的感觉：各处填补想完美解决问题，可最后还是会有出乎意料的bug，于是用了他的代码做了次实践。
2.一睹为快
如下图，功能比较简易：
选择之后添加，展示区便陈列：
展示区点击‘X’的时候去除当前内容，选择区相应也取消对应的勾选：
3.初出茅庐
先上原版代码看看：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>多选框问题</title>
</head> <body>
<!--<input type="text" data-bind-content="name" />
<span data-bind-content='name'></span>--> <h4>选择区</h4>
<div> <ul id="ul1">
<li>全选<input type="checkbox" name="checkall" /></li>
<li><input type="checkbox" name="checkthis" /><span>1</span></li>
<li><input type="checkbox" name="checkthis" /><span>2</span></li>
<li><input type="checkbox" name="checkthis" /><span>3</span></li>
<li><input type="checkbox" name="checkthis" /><span>4</span></li>
<li><input type="checkbox" name="checkthis" /><span>5</span></li>
</ul>
</div> <button id="add">添加</button>
<h4>展示区</h4>
<ul id="ul2"></ul>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//封装
var checkBox = (function () {
var globalV = [];
var yourChose = function (tableId, addClickId, showId) {
console.log($('#' + tableId + ' input[name=checkall]'));
//全选
$('#' + tableId + ' input[name=checkall]').click(function () {
//如果选择全选, 所有的选择框都选中,去除全选,所有的选择框去除选中
if ($(this).prop('checked')) {
$('#' + tableId + ' input[name=checkthis]').prop('checked', true);
//全选的时候,将所有选框的数据取出来传给全局变量globalV
$('#' + tableId + ' input[name=checkthis]').each(function (i, ele) {
var choseDate = {};
choseDate.isChecked = true;
choseDate.id = $(ele).parent().children('span').html();
globalV.push(choseDate);
});
} else {
$('#' + tableId + ' input[name=checkthis]').prop('checked', false);
}
console.log(globalV);
})
//对各个选择框绑定事件
$('#' + tableId).on('change', 'input[name=checkthis]', function () {
var arr = [];//存储每个选择框的状态
var choseDate = {};//存储被选中的选择框的数据
//<li><input type="checkbox" name="check-this" /><span>3</span></li>获取span里面的值
var this_value = $(this).parent().children('span').html();
//遍历每个选择框取选择的状态
$('#' + tableId + ' input[name=checkthis]').each(function (i, ele) {
arr.push($(ele).prop('checked'));
});
//如果有未选中的状态,去除全选框的选中状态,否则保留添加全选框的的选中状态
if (arr.indexOf(false) == -1) {
$('#' + tableId + ' input[name=checkall]').prop('checked', true);
} else {
$('#' + tableId + ' input[name=checkall]').prop('checked', false);
}
//对应每个选择框的change事件,如果这个选择框选中,则存储这个选择框的数据,否则遍历存储数据的变量,移除这个取消选中的的选择框的数据
if ($(this).is(':checked')) {
choseDate.isChecked = true;
choseDate.id = this_value;
globalV.push(choseDate);
} else {
for (var i = 0; i < globalV.length; i++) {
if (this_value == globalV[i].id) {
globalV.splice(i, 1);
}
}
}
console.log(globalV);
});
//点击添加按钮的事件
$('#'+addClickId).click(function (e) {
e.preventDefault();
$('#'+showId).empty();//清空展示区里面的内容
console.log(globalV);
//如果没有选中任何选择框,则弹出提示
if (globalV.length == 0) {
alert('请先选择!');
} else {
//如果选中了一些选择框,则全局变量数据不为空,开始遍历全局变量
for (var j = 0; j < globalV.length; j++) {
//按照全局变量globalV,给展示区创建元素;(包含了删除按钮)
var liElement = '<li>\
<span>'+ globalV[j].id + '</span>\
<p style="display:inline-block;width:20px;height:20px;background-color:red;border-radius:50%;text-align:center">X</p>\
</li>';
$('#'+showId).append(liElement);
}
//给删除按钮添加点击事件
$('#'+showId).on('click', 'p', function () {
//var findAndChangeState=$(this).parent('li').children('span').html();
//找到这个删除按钮对应的父级标签li下面的span标签的内容;注意:这个是简化;就放在了标签里面,实际情况可能是个属性,获取的这个值对应一个选择框
//由这个值来查找对应的选择框,从而改变选择框的状态;
//这里是点击了删除按钮,那么与他对应的选择框的选中状态也会被去除
var findAndChangeState = $(this).parent('li').children('span').html();
//遍历选择框找到与删除按钮对应的选择框,将其状态改为未选中,同时将全选的选择框也改为未选中
$('#' + tableId + ' input[name=checkthis]').each(function (i, ele) {
if ($(this).parent().children('span').html() == findAndChangeState) {
$(this).parent().children('input').prop('checked', false);
$('#' + tableId + ' input[name=checkall]').prop('checked', false);
}
});
//改完之后这个删除按钮对应的父级标签
$(this).parent('li').remove();
})
}
})
};
return {
globalV:globalV,
yourChose:yourChose
}
})()
checkBox.yourChose('ul1', 'add', 'ul2')
</script> </html>
原版
代码拷下来，看着比我刚开始写的前台代码要好不少：注释到位、封装避免全局环境污染、事件功能明确。
放浏览器跑一遍，多点两下...bug就出来了，细看以下代码就知道，bug的出现与他定义的globalV有关，而这个值可以看到是两处在改动，而且是每次事件都会更新。一个数据多个地方多次更改，想知道怎么出问题了，肯定是要花点时间排查的。
bug就不提了，代码是以一种非常流程化的思路在行文，该干什么了就码代码去干什么，我们都在这么干。可当时自己爽了，以后就不爽了，别人也不爽...特别是当代码量开始增大的时候。
4.渐入佳境
<!--
event{
select:fun1,
add:fun2,
remove:fun3,
} mvc:
model
controller
view
-->
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>多选框问题</title>
</head> <body>
<!--<input type="text" data-bind-content="name" />
<span data-bind-content='name'></span>--> <h4>选择区</h4>
<div> <ul id="ul1">
<li>全选<input type="checkbox" name="checkall" /></li>
<li><input type="checkbox" name="checkthis" /><span>1</span></li>
<li><input type="checkbox" name="checkthis" /><span>2</span></li>
<li><input type="checkbox" name="checkthis" /><span>3</span></li>
<li><input type="checkbox" name="checkthis" /><span>4</span></li>
<li><input type="checkbox" name="checkthis" /><span>5</span></li>
</ul>
</div> <button id="add">添加</button>
<h4>展示区</h4>
<ul id="ul2"></ul>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//封装
var checkBox = (function () { var globalV = [];
var yourChose = function (tableId, addClickId, showId) {
//负责更新数据
var updateData = function () {
globalV = [];
$('#' + tableId + ' input[name=checkthis]').each(function () {
if ($(this).is(':checked')) {
var choseDate = {};
var this_value = $(this).parent().children('span').html();
choseDate.isChecked = true;
choseDate.id = this_value;
globalV.push(choseDate);
}
});
} //负责更新画面
//checkBox状态
function fun1() {
if ($(this).attr("name") == "checkthis") {
var arr = [];//存储每个选择框的状态
var choseDate = {};//存储被选中的选择框的数据
//<li><input type="checkbox" name="check-this" /><span>3</span></li>获取span里面的值
var this_value = $(this).parent().children('span').html();
//遍历每个选择框取选择的状态
$('#' + tableId + ' input[name=checkthis]').each(function (i, ele) {
arr.push($(ele).prop('checked'));
});
//如果有未选中的状态,去除全选框的选中状态,否则保留添加全选框的的选中状态
if (arr.indexOf(false) == -1) {
$('#' + tableId + ' input[name=checkall]').prop('checked', true);
} else {
$('#' + tableId + ' input[name=checkall]').prop('checked', false);
}
} else {
//如果选择全选, 所有的选择框都选中,去除全选,所有的选择框去除选中
if ($(this).prop('checked')) {
$('#' + tableId + ' input[name=checkthis]').prop('checked', true);
} else {
$('#' + tableId + ' input[name=checkthis]').prop('checked', false);
}
}
}
//展示区状态（新增）
function fun2() {
$('#' + showId).empty();//清空展示区里面的内容
updateData();
//如果没有选中任何选择框,则弹出提示
if (globalV.length == 0) {
alert('请先选择!');
} else {
//如果选中了一些选择框,则全局变量数据不为空,开始遍历全局变量
for (var j = 0; j < globalV.length; j++) {
//按照全局变量globalV,给展示区创建元素;(包含了删除按钮)
var liElement = '<li>\
<span>'+ globalV[j].id + '</span>\
<p style="display:inline-block;width:20px;height:20px;background-color:red;border-radius:50%;text-align:center">X</p>\
</li>';
$('#' + showId).append(liElement);
}
//给删除按钮添加点击事件
bindEvent('#' + showId + ' p', "click", event.removeLi);
}
}
//展示区状态（删除）
function fun3() {
//var findAndChangeState=$(this).parent('li').children('span').html();
//找到这个删除按钮对应的父级标签li下面的span标签的内容;注意:这个是简化;就放在了标签里面,实际情况可能是个属性,获取的这个值对应一个选择框
//由这个值来查找对应的选择框,从而改变选择框的状态;
//这里是点击了删除按钮,那么与他对应的选择框的选中状态也会被去除
var findAndChangeState = $(this).parent('li').children('span').html();
//遍历选择框找到与删除按钮对应的选择框,将其状态改为未选中,同时将全选的选择框也改为未选中
$('#' + tableId + ' input[name=checkthis]').each(function (i, ele) {
if ($(this).parent().children('span').html() == findAndChangeState) {
$(this).parent().children('input').prop('checked', false);
$('#' + tableId + ' input[name=checkall]').prop('checked', false);
}
});
//改完之后这个删除按钮对应的父级标签
$(this).parent('li').remove();
} //负责注册事件
var event = {
select: fun1,
add: fun2,
removeLi: fun3
};
var bindEvent = function (selector, type, fun) {
$(selector).bind(type, fun);
};
//对各个选择框绑定事件
bindEvent('#' + tableId + ' input[type=checkbox]', "click", event.select);
//点击添加按钮的事件
bindEvent('#' + addClickId, "click", event.add);
}; return {
globalV: globalV,
yourChose: yourChose
}
})()
checkBox.yourChose('ul1', 'add', 'ul2');
</script> </html>
组织后的版本
更改后的版本里的代码其实都是原来的代码，但组织后的效果是：事件统一绑定（bindEvent），画面统一更新（fun1、fun2、fun3），数据统一设定（updateData）。
区分的很清楚，哪儿出错找哪儿，几乎不会交叉。而且比较容易拓展，像事件可以继续bindEvent绑定，画面更新的函数可以相应与fun1、fun2、fun3并列添加，数据的额外处理可以添加到updateData里。
这仅仅是代码组织上的优化，其实代码本身也有很多可以改进的地方，像全选的判定、选择区联动删除等都有更好的思路和代码实现。
5.梦中初醒
渐渐发现，其实这里面已经有mvc的影子了，各司其职，分工明确，事件绑定那部分就算是一个弱controller，绑定事件,分发事件响应函数；更新画面状态部分相当于view了，更新画面；updateData更新数据部分更新的就是modle；
6.醍醐灌顶
这个组织基本够用了，但它并不是真正的MVC，也不是最优组织，需要你，一语道破天机，希望有人能醍醐灌顶....
顺便看看万金油的MVC模型：
就是看不懂，是不，哈哈。