重构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去掉字符串里的所有空格
Feb 08 Javascript
加载jQuery后$冲突的解决办法
Jul 09 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
JS打印组合功能
Aug 04 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
layui动态表头的实现代码
Aug 22 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 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
如何取得中文输入的真实长度?
2006/06/24 Javascript
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
JS获取父节点方法
2009/08/20 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
javascript动态创建对象的属性详解
2018/11/07 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
python中range()与xrange()用法分析
2016/09/21 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
python命令 -u参数用法解析
2019/10/24 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
python with (as)语句实例详解
2020/02/04 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
基于python实现操作redis及消息队列
2020/08/27 Python
python中re模块知识点总结
2021/01/17 Python
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
高中生活自我鉴定
2014/01/18 职场文书
文明寝室申报材料
2014/05/12 职场文书
初婚未育证明样本
2015/06/18 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
python使用torch随机初始化参数
2022/03/22 Python