編程實踐

UI層的鬆耦合

1. 將CSS從JavaScript中抽離

   • 不容許在js中修改元素的樣式，最佳方法是控制className。
   • 有例外：好比說定位等問題，能夠修改而不使用className控制。

2. 將JavaScript從HTML中抽離

   • 不容許使用 on 屬性（好比onclick）來綁定一個事件處理程序。
   • js代碼應當寫在外部文件中而後引用。

3. 將HTML從JavaScript中抽離

   • 沒法避免，使用前端模板工具，推薦使用Handlebar。

事件處理

• 規則
  
  
  • 規則一：隔離應用邏輯，即把事件觸發須要執行的代碼提取出來。
  • 規則二：不要分發事件對象，應用邏輯不該當依賴於event對象來正確完成功能。最佳的辦法是在事件處理程序中使用event（包括獲取event裏的數據，阻止默認事件，阻止事件冒泡），而後將拿到的 數據在傳給應用邏輯。

避免空比較

• 檢測原始值

  • 若是你但願一個值是字符串、數字、布爾值或undefined。最佳選擇是使用typeof運算符。
  • typeof獨特在於即便未聲明的變量也不會報錯。未聲明的變量和值爲undefined的變量都返回undefined。
    
    
    • 字符串，typeof返回"string"。
    • 數字，typeof返回"number"。
    • 布爾值，typeof返回"boolean"。
    • undefined，typeof返回"undefined"。
  • 若要檢測null，直接使用 === 或 !== 。

• 檢測引用值

  • 最佳的選擇是使用instanceof運算符。
  • 但instanceof不能跨frame。
  • 函數和數組通常不用instanceof。

• 檢測函數

  • 檢測函數最好的方法是使用 typeof ，由於它能夠跨frame。
  • 但在IE8和更早版本中，使用typeof檢測用於獲取DOM節點的方法（例如，getElementById等方法)會返回object而不是function。所以檢測DOM的方法的最好的方法是 in運算符（若是須要兼容IE8及如下）。例如"querySelectorAll" in document。

• 檢測數組

  • 最優雅的檢測方法：

  jsfunction isArray(value){
      return Object.prototype.toString.call(value) === "[object Array]";
  }

• 檢測屬性

  • 檢測屬性最好的方法就是 in 運算符。
  • 若是隻想檢測實例對象的某個屬性是否存在，則使用hasOwnProperty()。在IE8

將配置數據從代碼中分離出來

• 什麼是配置數據

  • URL
  • 須要展示給用戶的字符串
  • 重複的值
  • 設置
  • 任何可能發生變動的值

• 抽離配置數據（重要）

• 保存配置數據——甚至能夠提取到單獨的文件中

拋出自定義數據

• 拋出錯誤就是本身留下告訴本身爲何失敗的緣由
• 拋出錯誤最佳的地方實在工具函數中，公共接口中。
  
  
  • 一旦修復了一個很難調試的錯誤，嘗試增長一兩個自定義錯誤。當再次發生錯誤時，這將有助於更容易地解決問題。
  • 若是正在 編寫代碼，思考一下：我但願「某些事情」不會發生，若是發生，個人代碼會一團糟糕。這時若是某些事情發生，就拋出一個錯誤。
  • 若是正在編寫的代碼別人也會使用，思考一下他們使用的方式，在特定的狀況下拋出錯誤。

不是你的對象不要動

不能修改的

• 原生對象
• DOM對象
• 瀏覽器對象(BOM)
• 類庫的對象(jquery)

不能修改的原則

• 不覆蓋方法
• 不新增方法
• 不刪除方法