重构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 应用技巧集合[推荐]
Aug 30 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 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
MVC模式的PHP实现
2006/10/09 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
浅析vue-router原理
2018/10/19 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
JS实现小米轮播图
2020/09/21 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
Python+Opencv识别两张相似图片
2020/03/23 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python命令行click参数用法解析
2019/12/19 Python
tensorflow常用函数API介绍
2020/04/19 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
中医专业职业生涯规划书范文
2014/01/04 职场文书
见习期自我鉴定
2014/01/31 职场文书
大学生个人学习总结
2015/02/15 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
分享Python获取本机IP地址的几种方法
2022/03/17 Python