可維護性的js代碼

什麼是可維護的代碼：

• 可理解性
• 直觀性
• 適應性
• 可擴展性
• 可調試性

可讀性：

• 函數和方法——每一個函數都要包含一個註釋，描述其目的做用

鬆散耦合度

• 解耦HTML/javascript
• 解耦css/javascript
• 解耦應用邏輯/事件處理程序

避免全局變量

• 建立命名空間

  //建立全局對象
  var xhome={};
  //爲xhome建立命名空間
  xhome.Projs = {};
  //講方法寫到項目中去
  xhome.Projs.EventUtil = {};
  xhome.Projs.CookieUtil ={};

• 避免與null比較

function sortArray(values){
   if(values != null){//能夠將條件語句改成values instanceof Array或者typeof values == "Array"
       values.sort(arry)
   }
}

使用常量

• 重複值——任何在多出用到的值都應該抽取出做爲一個常量
• url——常常會改變的字面量，因此要專門存放在一個地方，避免一個地方改變，而忘記修改其它地方
• 任意可能改變的值

做用域

•     避免使用全局查找

function setImgUrl(){
  var img =doncument.getElementByTagName("img");
  for(var i=0,len=img.length;i<len;i++){
      img[i].url = document.url;
  }
}

• 避免使用with
• 避免沒必要要的屬性查找

優化循環

• 簡化循環體
• 使用後測試循環

//減值循環
for(var i=0;i<values.length;i++){
  process(values[i]);
}
//改成
for(var i=values.length;i>=0;i--){
   process(vaules[i]);
}

//後測試循環
var len=values.length;
do｛
  //...
｝while(i<len)

性能比較

•  原生方法比較快
• switch方法語句快
• 位運算符較快
• 使用數組和對象字面量

DOM優化

•  dom操做在在循環體操做時，將dom在循環體外聲明爲變量
• 使用innerHTML
• 使用事件代理