編寫可維護的前端代碼

最近在看JavaScript高級程序設計，看到可維護代碼的編寫，作一下筆記與總結，方便之後查看。

1.代碼約定

1.1可讀性

• 代碼的格式化 使用若干個空格來進行縮進，由於製表符在不一樣編輯器種的顯示效果不一樣
• 註釋
  函數和方法 註明參數，返回值，前提假設....
  大段代碼
  複雜的算法 說明算法邏輯，方便別人查看，也方便本身查閱
  Hack 說明瀏覽器的差別，防止別人修改時沒考慮到誤刪...

1.2 變量和函數命名

• 不要使用沒有意義或容易引發歧義的名字，如：foo，doSomething...
• 變量名儘可能用名詞，如： car，person....
• 函數名用動詞開始，如：getName(); 返回值爲boolean用 is 開頭
• 變量和函數使用能夠說清楚方法做用和變量含義的名稱，不要擔憂長度，後期能夠壓縮

1.3 變量類型透明

類型透明也就是在變量定義的時候能夠知道變量的類型

主要有如下三種方式：

• 初始化變量

  var found = false; // boolean
  var count = -1; // number

  缺點：不能使用在函數聲明中的函數參數（如今經過ES6中的函數參數初始化解決）

• 使用匈牙利標記法 o表示對象，s表示字符串...

  var bFound; // boolean
  var iCount; // int

  缺點：代碼難以閱讀

• 使用類型註釋 類型註釋放到變量名右邊，初始化前面

  var found /*:Boolean*/ = false;
  var count /*:int*/ = -1;

  缺點：不能使用js多行註釋

• 使用typeScript（終極）

2.鬆散耦合

2.1 解耦HTML/JavaScript

JavaScript中使用HTML

• 不要使用js插入HTML，能夠經過在頁面中隱藏元素，當頁面渲染後，經過js顯示該元素，而不是生成
• 經過Ajax請求獲取HTML

HTML中使用JavaScript

• 將js文件寫成獨立文件，script標籤引入

2.2 解耦CSS/JavaScript

• 經過動態修改樣式類，而不是修改特定樣式

  // 不建議寫法
  element.style.color = 'red';
  element.style.backgroundColor = 'blue';
  
  // 建議寫法
  // css
  .dit{
      color: red;
      background-color: blue;
  }
  
  // js
  element.className = 'edit';

2.3 解耦應用邏輯/事件處理程序

有如下幾條原則：

• 勿將event對象傳給其餘方法，只傳函數中須要的數據
• 任何能夠在應用層面動做都應該能夠在不執行任何事件處理程序的狀況下進行

• 任何事件處理程序都應該處理事件，而後將處理轉交給應用邏輯

  // 不建議寫法
  function handleKeyPress(event){
      if(event.keyCode === 13){
          var target = event.target;
          var value = 5 * parseInt(target.value);
          if(value > 10){
              document.getElementById('id').style.display = 'block';
          }
      }
  }
  
  // 建議寫法
  // 好處：若是我點擊鼠標也執行相同邏輯，那麼直接調用validateValue就能夠了
  // 應用邏輯
  function validateValue(value){
      value = 5 * parseInt(value);
      
      if(value > 10){
          document.getElementById('id').style.display = 'block';
      }
  }
  
  // 事件處理程序
  function handleKeyPress(event){
      if(event.keyCode === 13){
          var target = event.target;
          validateValue(target.value);
      }
  }

3.其餘

3.1 尊重對象全部權

簡單點說就是否是你本身的建立或者維護的某個對象，他的對象和方法，不能修改

具體說：

• 不要爲實例或原型添加屬性或方法
• 不要從新定義已存在的方法

3.2 避免全局變量

最多建立一個全局變量，其餘對象或函數保存在其中，其中有個概念叫作命名空間

命名空間就是指用來放置頁面功能的對象

// 命名空間
let YAHOO = {};

YAHOO.util.Dom 
YAHOO.util.Event
....

3.3 避免與null進行比較

判斷一個是否爲null 若是直接比較是使用過分的，而且因爲比較不充分可能致使錯誤，
因此在判斷一個值的類型的時候要與指望的類型進行比較，而非不被指望的那些

// value 指望一個Array
if(value !== null){
    // do something....
}

// 建議
if(value instanceof Array){
    // do something....
}

下面列舉一下判斷數據類型的方法

• 判斷基本類型，使用typeof
• 判斷引用類型，可使用instanceof
• 判斷是否爲函數，也可使用typeof
• 判斷是否爲undefined,使用typeof,不要直接===判斷，若是函數沒有聲明，那麼會報錯
• 全部類型均可以使用Object.prototype.toString.call

let ts = Object.prototype.toString;

ts.call([]) === '[Object Array]'; // true
ts.call(123) === '[Object Number]'; // true
ts.call({}) === '[Object Object]'; // true
....

3.4 使用常量

使用常量能夠避免魔術字符串，也能夠幫助構建國際化

建議使用常量的幾種狀況：

• 重複值 --- 任何多處使用到的值
• 用戶界面字符串 --- 方便國際化
• URLs --- 推薦用一個公共地方專門存放全部的URL
• 任意可能變動的值 --- 若是是之後可能變動的值，都應該提取出來做爲一個常量