一段实现选择框javascript代码的重构

最新推荐文章于 2025-09-10 11:21:42 发布

最新推荐文章于 2025-09-10 11:21:42 发布 · 75 阅读

文章标签：

#JavaScript #ViewUI

本文介绍了一个用于网页中两个选择框之间交互操作的JavaScript函数的重构过程。通过优化代码逻辑，提高了代码的简洁性和效率，实现了从源选择框向目标选择框移动选项的功能，并考虑了目标选择框的最大长度限制。

实现两个选择框的代码,之前由于对js不熟,写的代码不够精练

重构之前(下面这段代码是我从别的代码重构过来的,那个代码代码简直就是垃圾,就不贴了):

    /*
srcSelect: source select,
destSelect: destination select,
destMaxLength: max length of destination select
*/
function changeRelative(srcSelect, destSelect, destMaxLength){
    for (var i=0; i<srcSelect.length; i++){

      if(destMaxLength!=null && destSelect.length >= destMaxLength){
        return;
      }

      var selectedOption = srcSelect.options[i];
      if (selectedOption.selected == true){

        destSelect.add(new Option(selectedOption.text, selectedOption.value));

        srcSelect.remove(i);

        //set selected item
        if(i==srcSelect.length){//select first
          srcSelect.selectedIndex=0;
        }else{//select next
          srcSelect.selectedIndex=i;
        }

        break;
      }
    }
}

重构之后

   /*
srcSelect: source select,
destSelect: destination select,
destMaxLength: max length of destination select
*/
function changeRelative(srcSelect, destSelect, destMaxLength){
    if(destMaxLength!=null && destSelect.length >= destMaxLength){
      return;
    }

    var srcSelectedIndex = srcSelect.selectedIndex;
    if(srcSelectedIndex != -1){
      var srcSelectedOption = srcSelect.options[srcSelectedIndex];
      destSelect.add(new Option(srcSelectedOption.text, srcSelectedOption.value));

      srcSelect.remove(srcSelectedIndex);

      //set next selected item
      if(srcSelectedIndex == srcSelect.length){//select first option
        srcSelect.selectedIndex=0;
      }else{//select next option
        srcSelect.selectedIndex=srcSelectedIndex;
      }
    }
}