前端代码组织优化--小demo(进阶你的思路)

1.事出必有因

  最近在看老项目的代码,一个富客户端的js代码,几千行的代码,全是function(){} var...的垂直布局,真的是要感动的哭了。

  一开始都是这样,想实现什么功能,不管三七二十一,function走起,最终堆起无数个变量和函数来完成一个画面的js。我也是,但过段时间自己去改代码bug或者加功能的时候,我的天,这是我写的吗,什么时候写的,怎么理不清思路了,而且,修改一个地方其他地方也得改,改完了还容易出新bug,偶尔都会忘了是自己写的,心里默念:这个傻X...恩,还好是默念。

  慢慢的代码看多了点,了解了些js的模块封装的一些方式,面向对象的相关思想(单一职责、高内聚低耦合....再说就有点装了>.<),越来越觉得易读、易改的代码应该需要更好的组织形式,正好最近碰到了一个网友相关的问题,看了他想优化的代码,真有看到自己一开始写的代码的感觉:各处填补想完美解决问题,可最后还是会有出乎意料的bug,于是用了他的代码做了次实践。

2.一睹为快

  如下图,功能比较简易:

  选择之后添加,展示区便陈列:

前端代码组织优化--小demo(进阶你的思路)

  展示区点击‘X’的时候去除当前内容,选择区相应也取消对应的勾选:

前端代码组织优化--小demo(进阶你的思路)

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模型:

前端代码组织优化--小demo(进阶你的思路)

就是看不懂,是不,哈哈。

上一篇:ping不同网站总结


下一篇:NSIS:迅雷5.8.6.600*定制版脚本及下载