重构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 相关文章推荐
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
javascript实现一款好看的秒表计时器
Sep 05 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
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
orm获取关联表里的属性值
2016/04/17 PHP
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
Vue组件基础用法详解
2020/02/05 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
Python调用C/C++的方法解析
2020/08/05 Python
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
大型活动策划方案
2014/01/12 职场文书
《四季》教学反思
2014/04/08 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
感动中国何玥观后感
2015/06/02 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL