前端代码组织优化--小demo（进阶你的思路）
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模型：
就是看不懂，是不，哈哈。
posted on 2017-04-13 16:38 codingHeart 阅读(3393) 评论(5) 编辑 收藏 举报
