重构Javascript代码示例(重构前后对比)


Posted in Javascript onJanuary 23, 2013

今天有做了几个asp.net结合Javascript的教程文章。现回顾头来看看那些Javascript脚本,有写得不太理想,过于复杂。现抽取出来,重构它们。
之前一

function SelectedAll(cb) { 
cb.checked = cb.checked ? false : true; 
var gv = document.getElementById('<%=GridViewCouplets.ClientID %>'); 
var rc = gv.rows.length; 
for (var i = 1; i < rc; i++) { 
var input = gv.rows[i].cells[0].getElementsByTagName("input"); 
if (input[0].type == "checkbox" && input[0].checked) { 
input[0].checked = false; 
gv.rows[i].style.backgroundColor = ""; 
} 
else { 
input[0].checked = true; 
gv.rows[i].style.backgroundColor = "#66ff33;"; 
} 
} 
} 
function SelectedSingle(cb) { 
var row = cb.parentNode.parentNode; 
if (cb.checked) { 
row.style.backgroundColor = "#66ff33;"; 
} 
else { 
row.style.backgroundColor = ""; 
} 
}

经过重构之后的Javascript脚本:
function SelectedAll(cb) { 
var gv = document.getElementById('<%=GridViewCouplets.ClientID %>'); 
var rc = gv.rows.length; 
for (var i = 1; i < rc; i++) { 
var input = gv.rows[i].cells[0].getElementsByTagName("input"); 
if (input[0].type == "checkbox") 
{ 
input[0].checked = cb.checked; 
gv.rows[i].style.backgroundColor = input[0].checked ? "#66ff33;" :""; 
} 
} 
} 
function SelectedSingle(cb) { 
var row = cb.parentNode.parentNode; 
row.style.backgroundColor = cb.checked? "#66ff33;":""; 
}

之前二
function Check_Uncheck_All(cb) { 
var cbl = document.getElementById("<%=CheckBoxListMusicType.ClientID%>"); 
var input = cbl.getElementsByTagName("input"); 
if (cb.checked) { 
for (var i = 0; i < input.length; i++) { 
input[i].checked = true; 
} 
} 
else { 
for (var i = 0; i < input.length; i++) { 
input[i].checked = false; 
} 
} 
}

重构之后的Javascript脚本
function Check_Uncheck_All(cb) { 
var cbl = document.getElementById("<%=CheckBoxListMusicType.ClientID%>"); 
var input = cbl.getElementsByTagName("input"); 
for (var i = 0; i < input.length; i++) { 
input[i].checked = cb.checked; 
} 
}
Javascript 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
使用vue实现通过变量动态拼接url
Jul 22 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 #Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 #Javascript
js jquery验证银行卡号信息正则学习
Jan 21 #Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 #Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 #Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 #Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 #Javascript
You might like
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Python遍历pandas数据方法总结
2018/02/09 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
Python之时间和日期使用小结
2019/02/14 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
Python中22个万用公式的小结
2021/07/21 Python