zoukankan      html  css  js  c++  java
  • javascript开发经验总结【一】:多重条件判断

    javascript是一门精巧的语言,可大可小,可伸可缩,如意金箍棒一般,运用恰当,可敌千夫。比如一个场景,有的人要写上百行代码,但是有的人寥寥几笔即可实现,思路就在弹指间。要想学好一门语言,就要掌握其要义,归纳其精髓,方可如鱼得水,运筹帷幄。

    js在开发大型组件库的时候经常会碰到很多的逻辑分支情况。比如博客园的编辑框编写:

    if(target === "font"){
      someFunction(){...}
    }
    else if(target === "code"){
      someFunction(){...}  
    }
    else if(target === "table"){
      someFunction(){...}
    }
    else if(target === "images"){
      someFunction(){...}
    }
    else if(target === "link"){
      someFunction(){...}  
    }
    else if(target === "file"){
      someFunction(){...}  
    }

    为了逻辑清晰当然也可以这样写:

    switch(target){
        case : "font" :
               someFunction(){...} 
        break; 
        case : "code" :
               someFunction(){...} 
        break;
        case : "table" :
               someFunction(){...} 
        break; 
        case : "images" :
               someFunction(){...} 
        break; 
        case : "link" :
               someFunction(){...} 
        break;
      case : "file" :
               someFunction(){...} 
        break;
    }

    当然这样的一层逻辑很容易书写和维护,但是,如果碰到下面还有多重分支的情况改如何处理呢,大部分人都是继续if else或者switch case。于是代码就变的越来越长,越来越难维护。就像下面的代码一样:

    switch(target){
        case : "font" :
               someFunction(){...} 
        break; 
        case : "code" :
              switch(code){
                     case : "java" :
                           someFunction(){...} 
                     break;
                     case : "c" :
                           someFunction(){...} 
                     break;
                     case : "c++" :
                           someFunction(){...} 
                     break;
              }
             
        break;
        case : "table" :
               someFunction(){...} 
        break; 
        case : "images" :
               someFunction(){...} 
        break; 
        case : "link" :
               someFunction(){...} 
        break;
      case : "file" :
               someFunction(){...} 
        break;
    }    

    js是一门面向对象的语言,我们能不能用面向对象的思想来解决这个问题呢?请看下面的源码:

    editor = {
         "font" : function(){...}
         "code" : function(){...}
         "table" : function(){...}
         "images" : function(){...}
         "file" : function(){...}
    }
    
    editor[target]();    

    这样是不是清晰明了了很多?而且效率也肯定提升了,因为是对象直接寻址。

    大致思路如下:

    先创建一个对象,把所有的判断分支都放到这个对象里,然后再调用。

    那么是么时候需要用这个方法,什么时候不需要用呢?

    先说需要用的:

    一、在判断分支很多的情况下建议使用。条理清晰。

    二、在分支里的逻辑很复杂的情况下,可以起到逻辑拆分的作用。

    再说不需要用的情况:

    一、简单的逻辑判断。

    二、分支比较少的情况。

  • 相关阅读:
    9.12 其他样式;JS
    9.11 样式表
    9.9 样式表
    PHP延迟几秒后执行,PHP延迟执行,PHP停顿几毫秒后执行 usleep() 和 sleep()
    PHP 去除url参数中出现+、空格、=、%、&、#等字符的解决办法, PHP去除影响url路径的字符
    java第一堂课-常用的电脑快捷键操作和重要的dos命令
    常用第三方接口,支付宝支付,微信支付,软著,IOS开发者账号
    苹果开发者账号申请流程完整版 https://www.jianshu.com/p/655380201685
    thinkphp 去重查询
    将数据导【入】【excel表】格式 前端页面
  • 原文地址:https://www.cnblogs.com/xpbb/p/2683329.html
Copyright © 2011-2022 走看看