重构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 相关文章推荐
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
javascript深入理解js闭包
Jul 03 Javascript
JQuery live函数
Dec 24 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
JS运算符简单用法示例
Jan 19 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安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Python单元和文档测试实例详解
2019/04/11 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
环境科学专业研究生求职信
2013/10/02 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
2014年招商工作总结
2014/11/22 职场文书
灵山大佛导游词
2015/02/04 职场文书
城南旧事电影观后感
2015/06/16 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python