리팩토링 자바스크립트 코드 예시(리팩토링 전후 비교)_javascript 스킬

오늘 저는 JavaScript와 결합된 asp.net에 대한 여러 튜토리얼 기사를 만들었습니다. 이제 그 Javascript 스크립트를 다시 살펴보겠습니다. 그 중 일부는 이상적이지 않고 너무 복잡합니다. 이제 그것들을 추출하고 재구성해보세요.
이전:

코드 복사 코드는 다음과 같습니다.

function SelectedAll(cb) {
cb.checked = cb.checked ? false :
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( "입력");
if (input[0].type == "checkbox" && input[0].checked) {
input[0].checked =
gv.rows[i; ].style.BackgroundColor = "";
}
else {
input[0].checked =
gv.rows[i].style.BackgroundColor = "#66ff33;"
}
}
}
function SelectedSingle(cb) {
var row = cb.parentNode.parentNode;
if (cb.checked) {
row.style. backgroundColor = "#66ff33 ;"
}
else {
row.style.backColor = "";
}
}

자바스크립트 재구성 후 스크립트:

코드 복사 코드는 다음과 같습니다.

function SelectedAll (cb) {
var gv = document.getElementById('<%=GridViewCouplets.ClientID %>')
var rc = gv.rows.length
for (var i = 1; i < 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 = "#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; 🎜>}
}