`
wangjian5748
  • 浏览: 209578 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

一段实现选择框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;
      }
    }
  }



分享到:
评论

相关推荐

    Dreamweaver基础教程—使用Dreamweaver开发JavaScript脚本.

    例如,假设有一个HTML文档,其中包含一段JavaScript代码: ```html ; charset=utf-8"/&gt; 分离结构和逻辑 &lt;script type="text/javascript" language="javascript"&gt; function hello() { alert("Hello, World!")...

    基于jquery的3d效果实现代码

    ### 基于jQuery的3D效果实现代码详解 #### 一、概述 ...通过以上分析可以看出,这段代码提供了一个基于jQuery的简单3D效果实现方案。开发者可以根据具体需求对其进行扩展和优化,以适应更复杂的场景。

    JS中国各大城市搜索框代码.zip

    在本资源"JS中国各大城市搜索框代码.zip"中,我们获取到的是一段JavaScript代码,用于实现一个功能丰富的搜索框,用户可以输入汉字或拼音来查找中国各大城市。这个功能在网页应用中非常常见,特别是在需要提供地域...

    JavaScript插件化开发教程(六)

    JavaScript 插件化开发是一种将应用程序分割成可复用、可维护的代码块的开发模式。在本文中,我们将继续探讨 JavaScript 插件化开发的进阶知识,并对之前教程中提出的概念和代码进行改进。 ### 面向对象编程(OOP)...

    一个模仿写的网页代码,供参考

    在前端开发领域,模仿现有的网页布局和功能是学习和提升技能的一个重要步骤。"一个模仿写的网页代码,供参考"这个标题暗示了...通过分析和重构这段代码,开发者可以深入理解网页开发的各个环节,提升自己的技术水平。

    重构

    8. **持续集成**:结合版本控制系统如Git,实现代码的持续集成和重构,确保每次更改都能顺利合并到主分支,且不影响项目运行。 在学习和实践中,我们需要认识到,重构不是一次性的工作,而是一个持续的过程。随着...

    Java Script代码分析技术探究.zip

    定期进行代码审查,识别并修复不良代码实践,同时适时重构代码以保持代码库的整洁和可维护性。 综上所述,JavaScript代码分析技术涵盖了语言基础、运行机制、性能优化、错误处理等多个方面。熟练掌握这些技术,...

    codecodecode

    在实际开发中,代码文件通常有特定的扩展名,如.py(Python)、.java(Java)、.cpp(C++)、.js(JavaScript)等,这些文件共同构成了一个项目或应用。 综上所述,虽然给定的信息较为模糊,但我们可以将讨论点聚焦...

    深入了解JavaScript代码覆盖

    总的来说,JavaScript代码覆盖是一个强大的工具,它可以帮助开发者实现更全面的测试、更有效的调试和更高效的性能优化。结合V8的原生支持和Inspector API,开发者可以深入到代码的细粒度层面,从而更好地理解和改进...

    web前端期末大作业:美食网站设计与实现——HTML+CSS+JavaScript休闲美食餐饮公司网站静态模板(6个页面)

    - **示例功能实现**:例如,可以通过添加一段简单的JavaScript代码来实现一个基本的轮播图功能,代码可能包括设置定时器来自动切换图片,以及通过点击按钮手动控制图片的切换。 ### 知识点四:网页编辑工具的选择 ...

    JavaScript_用于Nodejs的快速和低开销的web框架.zip

    同时,Fastify也适合那些寻求优化现有Node.js应用性能的开发者,它可以帮助他们重构代码,提高整个系统的响应速度。总的来说,Fastify是一个值得深入研究的Node.js Web框架,对于任何想要在JavaScript后端开发领域...

    JAVA上百实例源码以及开源项目源代码

    Java zip压缩包查看程序源码 1个目标文件 摘要:Java源码,文件操作,压缩包查看 Java zip压缩包查看程序,应用弹出文件选择框,选择ZIP格式的压缩文件,可以像Winrar软件一样查看压缩文件内部的文件及文件夹,源码...

    javascript的经典面试题汇总

    - **解析**:实际上,JScript是Microsoft的JavaScript实现的名称,而不是JavaScript的简称。 - **选项B**: `javascript是网景公司开发的一种Java脚本语言,其目的是为了简化Java的开发难度` - **解析**:...

    这是基于网易Poemlo的TypeScript实现版本

    使用TypeScript重写Poemlo平台,意味着原有的JavaScript代码可能已经过时或者需要优化,开发者选择了更现代、更强大的工具来改进项目。 【标签】: "JavaScript开发-其它杂项" JavaScript开发是互联网应用的基础,...

    在Vue 中使用Typescript的示例代码

    在重构代码时,TypeScript的类型系统使得重命名变量或函数更加安全,因为它会自动更新所有引用该符号的地方。此外,静态类型有助于确保重构过程中不引入新的错误。 4. **可读性和可维护性** TypeScript的类型注解...

    SIMGUI c++ python代码查重免安装版

    SIM算法是一种用于检测代码相似性的技术,它通过比较源代码的结构和语法来识别重复或相似的代码段。在SIMGUI中,SIM算法被封装并集成到GUI应用中,用户无需了解SIM的底层实现,只需通过简单的界面交互就能完成代码...

    单元测试 源代码

    1. **选择测试框架**:在大多数编程语言中都有多种单元测试框架可供选择,例如Java的JUnit,Python的unittest,JavaScript的Jest或Mocha等。选择一个适合项目需求的框架至关重要。 2. **编写测试用例**:每个测试...

    javascript 的面试题

    JScript是Microsoft的JavaScript实现。 - B. `javascript是网景公司开发的一种Java脚本语言` 错误。JavaScript与Java是完全不同的语言。 - C. `FireFox和IE存在大量兼容性问题的主要原因在于他们对javascript的...

    JavaScript编程精解

    5. **函数**: 函数是一段可重用的代码块,可以接受参数并返回值。 - **定义函数**: `function functionName(parameters) { ... }` - **调用函数**: `functionName(arguments)` 6. **数组**: 数组是存储多个值的...

    Internet上网页的源代码pb9

    4. **研究交互**:查找JavaScript代码,了解事件处理和动态功能的实现。 5. **优化和重构**:根据需求,改进代码结构,提高性能和可维护性。 总之,理解网页的源代码对于任何Web开发者来说都是基本功,无论你是初学...

Global site tag (gtag.js) - Google Analytics