六則糟糕代碼的優(yōu)化方案分享

??

案例一

變量、屬性和函數(shù)名應(yīng)該使用小駝峰式命名法，并且名稱是可描述的. 應(yīng)該避免使用單字符變量和不通用的縮寫。

export class PageComponent implements OnChanges {
  @Input() pageObj
  @Input() currentPage ? = 0 

  goPage
  cg: any = false

  goToPage() {
    if (!this.goPage) {
      return
    }
    this.currentPage = +this.goPage
    this.pageChange.emit(this.goPage)
  }
}

案例二

盡量使用 es6 語法簡化代碼邏輯

let startDay = 0 
let endDay = 1  
switch (query.birth) {
    case  0~1 :  //當(dāng)天過生日
      startDay = 0
      endDay = 1
      break
    case  1~8 :  //1~8天過生日
      startDay = 1
      endDay = 8
      break
    case  8~16 :  //8~16天過生日
      startDay = 8
      endDay = 16
      break
    case  16~31 :  //16~31天過生日
      startDay = 16
      endDay = 31
      break
    case  31~999 :  //31天以后天過生日
      startDay = 31
      endDay = 999
      break
}

let [startDay, endDay] = query.birth.split( ~ ).map(it => +it)

案例三

使用 /** ... */ 作為多行注釋。包含描述、指定所有參數(shù)和返回值的類型和值。

/** 
* 函數(shù)說明 
* @關(guān)鍵字 
*/

使用 // 作為單行注釋。在評論對象上面另起一行使用單行注釋。在注釋前插入空行。

/**處理右上角btn操作**/
handleWithBtn(btn) {
  switch (btn) {
    case  export : { // 批量認(rèn)證
      Debug.log( 導(dǎo)出 )
      break
    }
  }
}

案例四

邏輯互斥的 if 語句一定要配合 else 或 return 使用，把概率高的寫在前面。

if (productClass ===  Card  && action === BUYCARD) {
  seneca.sendSms(smsData, params)
}
if (productClass ===  Card  && action === TURNCARD) {
  seneca.patchStatus(productId)
}
if (productClass ===  Card  && action === REPLACE) {
  seneca.changeStatus( crm ,  Card )
}
if (productClass ===  Lesson ) {
  seneca.changeStatus( course ,  Lesson )
}
...

案例五

保持函數(shù)簡短，一個(gè)好的函數(shù)適合展現(xiàn)在一個(gè)幻燈片(slide)上，這樣如果在一個(gè)比較大房間中，也便于最后一排的人閱讀。每一個(gè)函數(shù)的代碼應(yīng)該限制在 15 行左右，另外為了避免 if 語句過度嵌套, 應(yīng)該提前將函數(shù)值返回.

getUrlParam(sUrl, sKey) {
  const param = sUrl.split( # )[0].split( ? )[1]
  if (param) {
    if (sKey) {       // 指定參數(shù)名稱
      const strs = param.split( & )
      const arrs = new Array()  // 如果存在多個(gè)同名參數(shù)，則返回?cái)?shù)組
      for (let i = 0, len = strs.length; i < len; i++) {
        const tmp = strs[i].split( = )
        if (tmp[0] === sKey) {
          arrs.push(tmp[1])
        }
      }
      if (arrs.length === 1) {// 返回該參數(shù)的值或者空字符串
        return arrs[0]
      } else if (arrs.length === 0) {
        return 
      } else {
        return arrs
      }
    } else {// 不指定參數(shù)名稱，返回全部的參數(shù)對象 或者 {}
      if (param === undefined || param === ) {
        return {}
      } else {
        const strs = param.split( & )
        const arrObj = new Object()
        for (let i = 0, len = strs.length; i < len; i++) {
          const tmp = strs[i].split( = )
          if (!(tmp[0] in arrObj)) {
            arrObj[tmp[0]] = []
          }
          arrObj[tmp[0]].push(tmp[1])
        }
        return arrObj
      }
    }
  } else {
    return 
  }
}

function filterParams(obj) {
  const keys = Object.keys(obj)
  keys.forEach(key => {
    const value = obj[key]
    if (isObject(value)) filterParams(value)
    if (isEmpty(value)) delete obj[key]
  })
  return obj
}

function isEmpty(input) {
  return [, undefined, null].includes(input)
}

function isObject(input) {
  return input !== null && (!Array.isArray(input)) && typeof input ===  object 
}

案例六

配置要寫在配置文件里面統(tǒng)一管理，常量也要定義在單獨(dú)的文件里面，常量名全部大寫。

let client = new TopClient({
   appkey :  12345678 ,
   appsecret :  asdfasdfasdfasdfasdfasdf ,
   REST_URL :  http://gw.api.taobao.com/router/rest 
})
 let sign = handler.sign(data,  qwerqwerqwerqwerqwer )
 ...

?