重构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 相关文章推荐
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP中函数内引用全局变量的方法
2008/10/20 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
浅谈vuex中store的命名空间
2019/11/08 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
python连接池实现示例程序
2013/11/26 Python
python实现的简单猜数字游戏
2015/04/04 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
python datetime中strptime用法详解
2019/08/29 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
三年级音乐教学反思
2014/01/28 职场文书
集中整治工作方案
2014/05/01 职场文书
物业保安岗位职责
2014/07/02 职场文书
2015大学生实训报告
2014/11/05 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python