重構(gòu)Javascript代碼示例(重構(gòu)前后對(duì)比)
更新時(shí)間：2013年01月23日 09:58:11 作者：
回顧頭來看看那些Javascript腳本，有寫得不太理想，過于復(fù)雜。現(xiàn)抽取出來，重構(gòu)它們,想學(xué)習(xí)javascript重構(gòu)的朋友可以參考下啊，網(wǎng)本文可以幫助你的
今天有做了幾個(gè)asp.net結(jié)合Javascript的教程文章?，F(xiàn)回顧頭來看看那些Javascript腳本，有寫得不太理想，過于復(fù)雜?，F(xiàn)抽取出來，重構(gòu)它們。
之前一：
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 = "";
}
}
經(jīng)過重構(gòu)之后的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;
}
}
}
重構(gòu)之后的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;
}
}
之前一：
復(fù)制代碼 代碼如下:
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 = "";
}
}
經(jīng)過重構(gòu)之后的Javascript腳本:
復(fù)制代碼 代碼如下:
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;":"";
}
之前二：
復(fù)制代碼 代碼如下:
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;
}
}
}
重構(gòu)之后的Javascript腳本：
復(fù)制代碼 代碼如下:
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;
}
}
相關(guān)文章
JavaScript實(shí)現(xiàn)單圖片上傳并預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)單圖片上傳并預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
本文為大家介紹了使用js彈出新頁面同時(shí)避免被瀏覽器、ad攔截等，具體的實(shí)現(xiàn)方法如下，大家不妨參考參考2014-04-04
極致之美——百行代碼實(shí)現(xiàn)全新智能語言...2007-03-03
由于前端開發(fā)的火熱和一些IT巨頭公司 對(duì) web前端開發(fā)人員的需求旺盛，讓越來越多的人轉(zhuǎn)入前端。今天就為大家分享了一份Web前端開發(fā)書單，希望大家喜歡2017-10-10
javascript實(shí)現(xiàn)類似java中g(shù)etClass()得到對(duì)象類名的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)類似java中g(shù)etClass()得到對(duì)象類名的方法,實(shí)例分析了javascript實(shí)現(xiàn)java中g(shù)etClass方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
javascript實(shí)現(xiàn)五星評(píng)價(jià)代碼（源碼下載）
大家在淘寶購(gòu)物之后，都會(huì)對(duì)賣家的服務(wù)進(jìn)行評(píng)論，那么五星評(píng)價(jià)代碼是怎么實(shí)現(xiàn)的呢？下面小編給大家介紹基于Javascript實(shí)現(xiàn)五星評(píng)價(jià)代碼，有需要的朋友可以參考下2015-08-08
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)js上傳文件功能，代碼簡(jiǎn)單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)手寫簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript實(shí)現(xiàn)點(diǎn)擊切換功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
Bootstrap源碼學(xué)習(xí)筆記之bootstrap進(jìn)度條
本文通過源碼給大家解析bootstrap進(jìn)度條樣式，分為條紋進(jìn)度條，動(dòng)態(tài)條紋進(jìn)度條，層疊進(jìn)度條和帶Label的進(jìn)度條，下面通過代碼給大家簡(jiǎn)單介紹下，感興趣的朋友一起看看吧2016-12-12