重构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 (用setTimeout而非setInterval)
Dec 28 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
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
星际中的相关伤害
2020/03/04 星际争霸
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
Python实现拼接多张图片的方法
2014/12/01 Python
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
Sanic框架流式传输操作示例
2018/07/18 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
MySQL面试题
2014/01/12 面试题
生产管理的三大手法
2013/11/11 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server