重构Javascript代码示例(重构前后对比)

  今天有做了几个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;

  }

  }