一个小demo,想封装成一个可复用的类似插件,或者是推翻重写,其实就是想看看高质量代码
0
悬赏园豆：20
[已解决问题]
解决于 2017-04-19 22:07
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>多选框问题</title> 7 </head> 8 9 <body> 10 <!--<input type="text" data-bind-content="name" /> 11 <span data-bind-content='name'></span>--> 12 13 <h4>选择区</h4> 14 <div> 15 16 <ul id="ul1"> 17 <li>全选<input type="checkbox" name="checkall" /></li> 18 <li><input type="checkbox" name="checkthis" /><span>1</span></li> 19 <li><input type="checkbox" name="checkthis" /><span>2</span></li> 20 <li><input type="checkbox" name="checkthis" /><span>3</span></li> 21 <li><input type="checkbox" name="checkthis" /><span>4</span></li> 22 <li><input type="checkbox" name="checkthis" /><span>5</span></li> 23 </ul> 24 </div> 25 26 <button id="add">添加</button> 27 <h4>展示区</h4> 28 <ul id="ul2"></ul> 29 </body> 30 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 31 <script type="text/javascript"> 32 //封装 33 var checkBox = (function () { 34 var globalV = []; 35 var yourChose = function (tableId, addClickId, showId) { 36 console.log($('#' + tableId + ' input[name=checkall]')); 37 //全选 38 $('#' + tableId + ' input[name=checkall]').click(function () { 39 //如果选择全选, 所有的选择框都选中,去除全选,所有的选择框去除选中 40 if ($(this).prop('checked')) { 41 $('#' + tableId + ' input[name=checkthis]').prop('checked', true); 42 //全选的时候,将所有选框的数据取出来传给全局变量globalV 43 $('#' + tableId + ' input[name=checkthis]').each(function (i, ele) { 44 var choseDate = {}; 45 choseDate.isChecked = true; 46 choseDate.id = $(ele).parent().children('span').html(); 47 globalV.push(choseDate); 48 }); 49 } else { 50 $('#' + tableId + ' input[name=checkthis]').prop('checked', false); 51 } 52 console.log(globalV); 53 }) 54 //对各个选择框绑定事件 55 $('#' + tableId).on('change', 'input[name=checkthis]', function () { 56 var arr = [];//存储每个选择框的状态 57 var choseDate = {};//存储被选中的选择框的数据 58 //<li><input type="checkbox" name="check-this" /><span>3</span></li>获取span里面的值 59 var this_value = $(this).parent().children('span').html(); 60 //遍历每个选择框取选择的状态 61 $('#' + tableId + ' input[name=checkthis]').each(function (i, ele) { 62 arr.push($(ele).prop('checked')); 63 }); 64 //如果有未选中的状态,去除全选框的选中状态,否则保留添加全选框的的选中状态 65 if (arr.indexOf(false) == -1) { 66 $('#' + tableId + ' input[name=checkall]').prop('checked', true); 67 } else { 68 $('#' + tableId + ' input[name=checkall]').prop('checked', false); 69 } 70 //对应每个选择框的change事件,如果这个选择框选中,则存储这个选择框的数据,否则遍历存储数据的变量,移除这个取消选中的的选择框的数据 71 if ($(this).is(':checked')) { 72 choseDate.isChecked = true; 73 choseDate.id = this_value; 74 globalV.push(choseDate); 75 } else { 76 for (var i = 0; i < globalV.length; i++) { 77 if (this_value == globalV[i].id) { 78 globalV.splice(i, 1); 79 } 80 } 81 } 82 console.log(globalV); 83 }); 84 //点击添加按钮的事件 85 $('#'+addClickId).click(function (e) { 86 e.preventDefault(); 87 $('#'+showId).empty();//清空展示区里面的内容 88 console.log(globalV); 89 //如果没有选中任何选择框,则弹出提示 90 if (globalV.length == 0) { 91 alert('请先选择!'); 92 } else { 93 //如果选中了一些选择框,则全局变量数据不为空,开始遍历全局变量 94 for (var j = 0; j < globalV.length; j++) { 95 //按照全局变量globalV,给展示区创建元素;(包含了删除按钮) 96 var liElement = '<li>\ 97 <span>'+ globalV[j].id + '</span>\ 98 <p style="display:inline-block;width:20px;height:20px;background-color:red;border-radius:50%;text-align:center">X</p>\ 99 </li>'; 100 $('#'+showId).append(liElement); 101 } 102 //给删除按钮添加点击事件 103 $('#'+showId).on('click', 'p', function () { 104 //var findAndChangeState=$(this).parent('li').children('span').html(); 105 //找到这个删除按钮对应的父级标签li下面的span标签的内容;注意:这个是简化;就放在了标签里面,实际情况可能是个属性,获取的这个值对应一个选择框 106 //由这个值来查找对应的选择框,从而改变选择框的状态; 107 //这里是点击了删除按钮,那么与他对应的选择框的选中状态也会被去除 108 var findAndChangeState = $(this).parent('li').children('span').html(); 109 //遍历选择框找到与删除按钮对应的选择框,将其状态改为未选中,同时将全选的选择框也改为未选中 110 $('#' + tableId + ' input[name=checkthis]').each(function (i, ele) { 111 if ($(this).parent().children('span').html() == findAndChangeState) { 112 $(this).parent().children('input').prop('checked', false); 113 $('#' + tableId + ' input[name=checkall]').prop('checked', false); 114 } 115 }); 116 //改完之后这个删除按钮对应的父级标签 117 $(this).parent('li').remove(); 118 }) 119 } 120 }) 121 }; 122 return { 123 globalV:globalV, 124 yourChose:yourChose 125 } 126 })() 127 checkBox.yourChose('ul1', 'add', 'ul2') 128 </script> 129 130 </html>
下面这个是我最开始的写的,其实也没变多少.....
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>多选框问题</title> 7 </head> 8 9 <body> 10 <!--<input type="text" data-bind-content="name" /> 11 <span data-bind-content='name'></span>--> 12 13 <h4>选择区</h4> 14 全选<input type="checkbox" name="check-all" /> 15 <ul id="ul1"> 16 <li><input type="checkbox" name="check-this" /><span>1</span></li> 17 <li><input type="checkbox" name="check-this" /><span>2</span></li> 18 <li><input type="checkbox" name="check-this" /><span>3</span></li> 19 <li><input type="checkbox" name="check-this" /><span>4</span></li> 20 <li><input type="checkbox" name="check-this" /><span>5</span></li> 21 </ul> 22 <button class="add">添加</button> 23 <h4>展示区</h4> 24 <ul id="ul2"></ul> 25 </body> 26 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 27 <script type="text/javascript"> 28 //全局变量,存储传递数据 29 var globalV = []; 30 //全选事件 31 $('input[name=check-all]').click(function () { 32 globalV = []; 33 //如果选择全选, 所有的选择框都选中,去除全选,所有的选择框去除选中 34 35 if ($(this).prop('checked')) { 36 $('input[name=check-this]').prop('checked', true); 37 //全选的时候,将所有选框的数据取出来传给全局变量globalV 38 $('#ul1 li').each(function (i, ele) { 39 var choseDate = {}; 40 choseDate.isChecked = true; 41 choseDate.id = $(ele).children('span').html(); 42 globalV.push(choseDate); 43 }); 44 } else { 45 $('input[name=check-this]').prop('checked', false); 46 } 47 console.log(globalV); 48 }) 49 //对各个选择框绑定事件 50 $('#ul1').on('change', 'input[name=check-this]', function () { 51 var arr = [];//存储每个选择框的状态 52 var choseDate = {};//存储被选中的选择框的数据 53 //<li><input type="checkbox" name="check-this" /><span>3</span></li>获取span里面的值 54 var this_value = $(this).parent('li').children('span').html(); 55 //遍历每个选择框取选择的状态 56 $('input[name=check-this]').each(function (i, ele) { 57 arr.push($(ele).prop('checked')); 58 }); 59 //如果有未选中的状态,去除全选框的选中状态,否则保留添加全选框的的选中状态 60 if (arr.indexOf(false) == -1) { 61 $('input[name=check-all]').prop('checked', true); 62 } else { 63 $('input[name=check-all]').prop('checked', false); 64 } 65 //对应每个选择框的change事件,如果这个选择框选中,则存储这个选择框的数据,否则遍历存储数据的变量,移除这个取消选中的的选择框的数据 66 if ($(this).is(':checked')) { 67 choseDate.isChecked = true; 68 choseDate.id = this_value; 69 globalV.push(choseDate); 70 } else { 71 for (var i = 0; i < globalV.length; i++) { 72 if (this_value == globalV[i].id) { 73 globalV.splice(i, 1); 74 } 75 } 76 } 77 console.log(globalV); 78 }) 79 //点击添加按钮的事件 80 $('button.add').click(function (e) { 81 e.preventDefault(); 82 $('#ul2').empty();//清空展示区里面的内容 83 console.log(globalV); 84 //如果没有选中任何选择框,则弹出提示 85 if (globalV.length == 0) { 86 alert('请先选择!'); 87 } else { 88 //如果选中了一些选择框,则全局变量数据不为空,开始遍历全局变量 89 for (var j = 0; j < globalV.length; j++) { 90 //按照全局变量globalV,给展示区创建元素;(包含了删除按钮) 91 var liElement = '<li>\ 92 <span>'+ globalV[j].id + '</span>\ 93 <p style="display:inline-block;width:20px;height:20px;background-color:red;border-radius:50%;text-align:center">X</p>\ 94 </li>'; 95 $('#ul2').append(liElement); 96 } 97 //给删除按钮添加点击事件 98 $('#ul2').on('click', 'p', function () { 99 //var findAndChangeState=$(this).parent('li').children('span').html(); 100 //找到这个删除按钮对应的父级标签li下面的span标签的内容;注意:这个是简化;就放在了标签里面,实际情况可能是个属性,获取的这个值对应一个选择框 101 //由这个值来查找对应的选择框,从而改变选择框的状态; 102 //这里是点击了删除按钮,那么与他对应的选择框的选中状态也会被去除 103 var findAndChangeState = $(this).parent('li').children('span').html(); 104 //遍历选择框找到与删除按钮对应的选择框,将其状态改为未选中,同时将全选的选择框也改为未选中 105 $('#ul1 li').each(function (i, ele) { 106 if ($(this).children('span').html() == findAndChangeState) { 107 $(this).children('input').prop('checked', false); 108 $('input[name=check-all]').prop('checked', false); 109 } 110 }); 111 //改完之后这个删除按钮对应的父级标签 112 $(this).parent('li').remove(); 113 }) 114 } 115 }) 116 </script> 117 118 </html>
目的就是想就这个demo看看高质量代码怎么写,好提高自己,还请各位大神多多教导,谢谢
最佳答案
0
- 首先，你的初版代码我拿来一用，感觉bug不少（双击‘全选’，然后‘添加’.....），本来还知道你想实现什么，点到后面我都不知道你到底要干嘛了...跟我有的一拼了。
- 优化代码前先把思路理清了，你代码看得逻辑没什么问题，但数据啊、画面状态啊，这边那边都在改，互相牵扯，不容易拓展，过段时间回来改bug得酝酿半天。
- 你的封装思路还是可以的，我暂且在你的大架子上改一版，思路应该明确一些，一个函数该干什么就干什么，函数功能间尽量别重复，你之前代码就有点太“直观”，眼下该干什么就干什么，好点的思路是“记住你该干些什么，然后把该干的事儿分类一起干了”
- 这里面有一点mvc的影子，你可以去慢慢理解下mvc的思想，我最经也在学习
<!-- 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>
收获园豆：20
真是非常非常感谢,学到很多,谢谢谢谢
@流年之外天空蓝: 基本都是你自己的代码，重新组织了下，并不是高质量的，只能勉强算是易理解的。
@codingHeart: 我按照你的思路把项目的重新写了,算是过关了,,谢谢谢谢
其他回答(3)
0
/**
* 类型判断
* public method :
* tn.type.isArray()
* tn.type.isBoolean()
* tn.type.isFunction()
* tn.type.isNull()
* tn.type.isNumber()
* tn.type.isObject()
* tn.type.isString()
* tn.type.isUndefined()
* tn.type.isDefined()
* tn.type.isNumeric()
* tn.type.isDate()
*/
type: {
isArray: function() {
for (var b = 0, c, a = arguments.length; b < a; b++) {
c = arguments[b];
if (Array.isArray && !Array.isArray(c) || !(module.tn.type.isObject(c) && c.constructor && (c.constructor.toString().indexOf("Array") > -1 || c instanceof Array))) {
return false;
}
}
return true;
},
isBoolean: function() {
for (var b = 0, c, a = arguments.length; b < a; b++) {
c = arguments[b];
if (!(typeof c === "boolean" || module.tn.type.isObject(c) && c.constructor && (c.constructor.toString().indexOf("Boolean") > -1 || c instanceof Boolean))) {
return false;
}
}
return true;
},
isFunction: function() {
for (var b = 0, a = arguments.length; b < a; b++) {
if (typeof arguments[b] !== "function") {
return false;
}
}
return true;
},
isNull: function() {
for (var b = 0, c, a = arguments.length; b < a; b++) {
c = arguments[b];
if (c === null || module.tn.type.isUndefined(c)) {
return true;
}
}
return false;
},
isNumber: function() {
for (var b = 0, c, a = arguments.length; b < a; b++) {
c = arguments[b];
if (!(typeof c === "number" || module.tn.type.isObject(c) && c.constructor && (c.constructor.toString().indexOf("Number") > -1 || c instanceof Number)) || isNaN(c)) {
return false;
}
}
return true;
},
isObject: function() {
for (var b = 0, c, a = arguments.length; b < a; b++) {
c = arguments[b];
if (typeof c !== "object" || c === null) {
return false;
}
}
return true;
},
isString: function() {
for (var b = 0, c, a = arguments.length; b < a; b++) {
c = arguments[b];
if (!(typeof c === "string" || module.tn.type.isObject(c) && c.constructor && (c.constructor.toString().indexOf("String") > -1 || c instanceof String))) {
return false;
}
}
return true;
},
isUndefined: function() {
for (var b = 0, a = arguments.length; b < a; b++) {
if (typeof arguments[b] === "undefined") {
return true;
}
}
return false;
},
isDefined: function() {
for (var a = 0; a < arguments.length; a++) {
if (module.tn.type.isUndefined(arguments[a])) {
return false;
}
}
return true;
},
isNumeric: function() {
for (var b = 0, c, a = arguments.length; b < a; b++) {
c = arguments[b];
if (!(!isNaN(c) && isFinite(c) && (c !== null) && !module.tn.type.isBoolean(c) && !module.tn.type.isArray(c))) {
return false;
}
}
return true;
},
isDate: function() {
for (var b = 0, a = arguments.length; b < a; b++) {
o = arguments[b];
if (!(module.tn.type.isObject(o) && o.constructor && (o.constructor.toString().indexOf("Date") > -1 || o instanceof Date))) {
return false;
}
}
return true;
}
},
我是写后端的，谈不上高质量，平时做项目一些工具类，重复调用的插件方法，放在一个js文件里，格式规范，便于阅读维护就差不多了，如果是封装插件，想想那些可变参数做为入参，把执行方法拆分几步，相互调用..
@[1]: 谢谢,谢谢,麻烦你了,已收藏你提供的代码,
0
你这个具有业务相关的逻辑，可能并不适合单独封装。
0
将功能封装起来
业务 部分公布出去可以编辑 就可以了
