重构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 SHA-1:Secure Hash Algorithm
Dec 20 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
jquery自适应布局的简单实例
May 28 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 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
php5.2.0内存管理改进
2007/01/22 PHP
php 定界符格式引起的错误
2011/05/24 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
nginx 设置多个站跨域
2021/03/09 Servers
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
koa-router源码学习小结
2018/09/07 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
详解小白之KMP算法及python实现
2019/04/04 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
python读写csv文件的方法
2019/08/13 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
python实现经典排序算法的示例代码
2021/02/07 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
护理专业应届毕业生推荐信
2013/11/15 职场文书
高级销售求职信
2014/02/21 职场文书
出生公证书样本
2014/04/04 职场文书
师范生见习报告范文
2014/11/03 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA
Golang入门之计时器
2022/05/04 Golang