重构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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
js canvas实现擦除动画
Jul 16 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
js 数组当前行添加数据方法详解
Jul 28 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 setcookie函数的参数说明及其用法
2014/04/20 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python卸载模块的方法汇总
2016/06/07 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
Python交互环境下实现输入代码
2018/06/22 Python
Python 学习教程之networkx
2019/04/15 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
小学新教师培训方案
2014/02/03 职场文书
对公司合理化的建议书
2014/03/12 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书