一个小demo
来源：互联网 发布：软件层次结构图 编辑：程序博客网 时间：2024/05/22 03:08
一个小demo,想封装成一个可复用的类似插件,或者是推翻重写,其实就是想看看高质量代码
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:yourChose125 }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看看高质量代码怎么写,好提高自己,还请各位大神多多教导,谢谢
* 类型判断
* 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;
}
},
谢谢,谢谢,麻烦你了,已收藏你提供的代码,
你这个具有业务相关的逻辑，可能并不适合单独封装。
- 首先，你的初版代码我拿来一用，感觉bug不少（双击‘全选’，然后‘添加’.....），本来还知道你想实现什么，点到后面我都不知道你到底要干嘛了...跟我有的一拼了。
- 优化代码前先把思路理清了，你代码看得逻辑没什么问题，但数据啊、画面状态啊，这边那边都在改，互相牵扯，不容易拓展，过段时间回来改bug得酝酿半天。
- 你的封装思路还是可以的，我暂且在你的大架子上改一版，思路应该明确一些，一个函数该干什么就干什么，函数功能间尽量别重复，你之前代码就有点太“直观”，眼下该干什么就干什么，好点的思路是“记住你该干些什么，然后把该干的事儿分类一起干了”
- 这里面有一点mvc的影子，你可以去慢慢理解下mvc的思想，我最经也在学习
<!--event{ select:fun1, add:fun2, remove:fun3,}mvc:modelcontrollerview--><!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>
- 一个api小demo
- 一个下载小demo
- 一个小demo
- 一个小demo
- 一个小demo
- WCF的一个小Demo
- xml的一个小Demo
- appium跑一个小demo
- DotNetMQ的一个小demo
- 【MyBatis-02】一个小Demo
- 简单的一个小Demo
- 一个工具类小demo
- javascript读写cookie的一个小demo
- 关于分页的一个小demo
- 关于分页的一个小demo
- GMP的 一个Demo小程序
- 一个文件夹加密的小程序【demo】
- CXF发布webservice的一个小demo
- Java 保留2位小数点（2种方式）
- atomikos 在Windows Tomcat下使用遇到的坑
- wireshark权限不够
- 项目开发笔记
- javascript放在head和body的区别（w3c建议放在head标签中）
- 一个小demo
- Android开发之--标签选择
- AndroidStudio Frameworks detected: Android framework is detected in the project Configure
- webstorm 中使用zencoding
- 紫书章六例题15 给任务排序 UVA 10305（拓扑排序）
- RecyclerView/ScrollView中条目弹出PopupMenu导致RecyclerView自动滚动的问题
- windows10常用快捷键
- my choice
- FWT 模板
我是写后端的，谈不上高质量，平时做项目一些工具类，重复调用的插件方法，放在一个js文件里，格式规范，便于阅读维护就差不多了，如果是封装插件，想想那些可变参数做为入参，把执行方法拆分几步，相互调用..