近日在工作中因為忽視題目致使某個客戶的體系直接崩盤，極大的影響了用戶運用產物的體驗。在經由修正以後，不能不思索下在一樣平常開闢中的一些壞習氣以及怎樣躲避這些一樣平常題目了。

在一樣平常開闢中，我們每每會有許多不好的習氣，寫出一些非常不硬朗的代碼，致使因為數據和前提的多樣性，順序未能作出很好的預判。同時因為我們未能對毛病舉行好的處置懲罰，致使順序直接卡死。雖然這些題目多是非常“初級”的毛病，但也是異經常見的毛病，所以有必要拿出來說一說。

1.為鍵值婚配設定默認值

針對以下這類鍵值婚配，我們每每並不能對一切的能夠舉行羅列，發起對其設置通用的默認值，也防備了在營業邏輯中舉行反覆的處置懲罰。防備為婚配到準確的值而報錯。

const map = (obj, defaultValue) => {
  return new Proxy(obj, {
    get (target, key) {
      // 你能夠在這裏舉行其他處置懲罰
      return Reflect.get(target, key, receiver) || defaultValue
    }
  })
}
const typeValueMap = map({
  a: {
    color: 'red',
    desc: '赤色'
  },
  b: {
    color: 'blue',
    desc: '藍色'
  }
}, {
  color: 'ccc',
  desc: '灰色'
})

const result = typeValueMap[type]

2.當css-modules不能準確婚配時，不直接throw

css-modules會針對未能婚配的樣式名，直接拋出題目，使全部模塊崩掉。在臨盆環境中，個人以為這類做法能夠過於激進了，固然官方也供應了handleNotFoundStyleName參數，用於設置未婚配時，是直接throw, warn照樣疏忽。在此我們能夠舉行一致的處置懲罰：

import cssmodules from 'react-css-modules'

export default (style, allowMutiple = false) => cssmodules(style, {
  allowMultiple,
  handleNotFoundStyleName: 'log'
})

3.對未知的事宜舉行try/catch

順序的實行歷程當中，我們每每沒法保證傳入的數據是我們想要的，因而我們須要對一些不能保證的歷程舉行try/catch，防備順序卡死。這也是很基本的一個內容了，然則堅持優越的代碼作風照樣很主要的！

let ret
try {
  ret = JSON.parse(json)
} catch (error) {
  // 毛病處置懲罰，毛病上報
}

4.運用ErrorBoundary對毛病舉行友愛提醒，保證其他模塊的可用性

相似try/catch，在react 16中也供應了對組件內部非常舉行捕捉的機制。我們能夠應用這個機制，對毛病舉行友愛的提醒，防備全部順序卡死，保證其他模塊是可用的，同時能夠舉行毛病上報等操縱。

export default class ErrorBoundary extends Component {
  state = {
    error: false
  }

  componentDidCatch(error, info) {
    const { onError = report, children, ...others } = this.props
    this.setState({
      error: {
        error,
        info,
        prop: others
      }
    })
    onError(error, info, others)
  }

  render() {
    const { error } = this.state

    if (error) {
      return <ErrorBlock error={error} />
    }
    return this.props.children
  }
}

5.實時舉行毛病回傳，監控平台的穩固性

經由過程合營相似sentry如許的平台毛病上報與網絡，能夠很輕易的拿到用戶的毛病信息，毛病時的props等數據，輕易定位題目，拿到主要的反應信息。

6.總結

總的來說，許多情況下毛病的降生照樣因為我們代碼的“不硬朗”致使的，所以在運用其他計劃舉行躲避的同時，怎樣提拔代碼質量，保證代碼穩固運轉，是我們須要不停尋求與提拔的。