重构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自定义的函数
Aug 05 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
javascript cookie的简单应用
Feb 24 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
基于Vue中的父子传值问题解决
Jul 27 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中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
高效使用Python字典的清单
2018/04/04 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
python实现电子产品商店
2019/02/26 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
中海讯通笔试题
2015/09/15 面试题
Ref与out有什么不同
2012/11/24 面试题
个人简历中的自我评价范例
2013/10/29 职场文书
七一表彰活动方案
2014/01/18 职场文书
食品流通安全承诺书
2014/05/22 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
frg-100简单操作(设置)说明
2022/04/05 无线电