重构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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
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函数method_exists()与is_callable()的区别
2013/06/21 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
vue filters的使用详解
2018/06/11 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
Djang中静态文件配置方法
2015/07/30 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python基础练习之几个简单的游戏
2017/11/10 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
python如何基于redis实现ip代理池
2020/01/17 Python
Python3实现飞机大战游戏
2020/04/24 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
最新销售员个人自荐信
2013/09/21 职场文书
理工科学生的自我评价
2013/12/15 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
八年级历史教学反思
2016/02/19 职场文书