重构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+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
jquery实现pager控件示例
Apr 09 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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
redis 队列操作的例子(php)
2012/04/12 PHP
php调用shell的方法
2014/11/05 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
jquery 列表双向选择器之改进版
2013/08/09 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
用JS实现选项卡
2020/03/23 Javascript
总结Python中逻辑运算符的使用
2015/05/13 Python
Python实现LRU算法的2种方法
2015/06/24 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
党员自我评价分享
2013/12/13 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
go xorm框架的使用
2021/05/22 Golang
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL