项目优化篇

• if里面的多重判断

槽点

你是否遇到过这种情况if判断里面一开始只有1个或者两个条件但是后来随着需求的增加或者调整，条件判断越来越多，可读性和维护性就会变得特别差，看下面

      let pictureType = 'jpg' //加入这个变量是动态获取的
      if (pictureType == 'png' || pictureType == 'img' || pictureType == 'jpg') {
           console.log('is picture')
       }else{
          console.log('is not picture')
        }

优化

       let pictureType = 'jpg' //加入这个变量是动态获取的
       const picutreTypeArr = ['png', 'img','jpg']
       if(picutreTypeArr.includes(pictureType)){
          console.log('is picture')
       }else {
           console.log('is not picture')
        }

优化后虽然感觉代码多了一行但是可读性和扩展性提高了很多，顿时逼格高了一点

• 尽量少的嵌套（先抛出错误）

槽点
我之前写判断的时候总是先判断如果是xx然后dosomeThing,不是后怎么样

  //判断是否有人
   if(peopel){
      //是不是女的
       if(isGril){
          //是不是美女
          if(isBeautifulGril){
              console.log('是个美女')
          }
        }
    }else{
        console.log('no people')
    }

优化

  //判断是否有人
  if(!people){
     console.log('no people')
     return
   }
   //是不是女的
   if(isGril){
        //是不是美女
         if(isBeautifulGril){
             console.log('是个美女')
          }
     }

这样就少了一层嵌套

es6解构赋值

槽点
我比较常使用的ui组件是element,用过其中table和分页器的都知道，我们可以把@currentPage的事件和页面初始的时候的方法写成一个，但是页面初始的时候因为没有点击分页器的val是没有值的，我们写成如下这样

    getTableList(val){
                let page = val ? val : 1
                const tableParam = {
                    start : (page - 1) * 10,
                    limit: 10
                }
                //请求表格
                
            }

优化

    getTableList(val = 1){
                const tableParam = {
                    start : (val - 1) * 10,
                    limit: 10
                }
                //请求表格
                
            }

在我们写参数的过程中如果给定一个默认值，代码的可读性会大大增加

善用对象的key-value

槽点

    moreIf(color){
                if(color === 'red'){
                    return ['apple','Pitaya']
                } else if (color === 'yellow'){
                    return ['bannana','pear']
                } else if(color === 'green'){
                    return ['Jujube']
                }
          
            },

优化

    moreIf(color){
                const colorFriult = {
                    red: ['apple','Pitaya'],
                    yellow: ['bannana','pear'],
                    green: ['Jujube']
                }
                return colorFriult[color] || []
            },

以后碰到在往上加