Javascriptのリファクタリングコード例（リファクタリング前後の比較）_JavaScriptスキル

今日は、asp.net と Javascript を組み合わせたいくつかのチュートリアル記事を作成しました。ここで、これらの Javascript スクリプトを振り返ってみましょう。中には理想的ではなく、複雑すぎるものもあります。次に、それらを抽出して再構築します。
前のもの:

コードをコピーします コードは次のとおりです:

function SelectedAll(cb) {
cb.checked = cb.checked ? false : true;
var gv = document.getElementById('');
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; ].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 = "";
}
}

再構築後 スクリプト:

コードをコピー コードは次のとおりです:

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 == "チェックボックス")
{
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? "";
}

前の 2 つ
:

コードをコピー コードは次のとおりです。

function Check_Uncheck_All(cb) {

var cbl = document.getElementById("<%=CheckBoxListMusicType.ClientID%>"); input = cbl.getElementsByTagName("input ");
if (cb.checked) {
for (var i = 0; i input[i].checked = true;
}
}
else {
for (var i = 0; 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[i].checked = cb.checked; 🎜>}
}