最近幫忙維護一些代碼，可能是編寫者的經驗尚淺的原因，閱讀起來比較辛苦，出現的問題主要是，代碼重復邏輯，命名不規范以及一些小問題。網上搜索了一些資料結合相關代碼說說如何提高代碼的維護性。
首先說說為什么要維護性高的代碼，原因很簡單，通常一個項目迭代開發的概率是相當高的，那么時不時要進行代碼重構，維護別人寫的代碼等等需要修改別人寫的代碼或者自己以前寫的代碼。如果代碼寫得亂七八糟，易讀性差，這樣會大大影響后者的開發效率。
首先看看一些栗子：
events:{
'click .Span1' :'Span1',
'click .check' :'Check',
'click #Cancel':'Cancel',
'click .cancel':'cancel',
'click .Span2' :'Span2',
'click .active':'cancelFocus'
}
這里無論是html頁面上的類，還是js函數的命名閱讀起來非常困難，至少一眼看起來是看不懂相對應的函數是干嘛的。
html，css的命名規范的要點
使用有意義的或通用的ID和class命名：ID和class的命名應反映該元素的功能或使用通用名稱，而不要用抽象的晦澀的命名。反映元素的使用目的是首選；使用通用名稱代表該元素不表特定意義，與其同級元素無異，通常是用于輔助命名；使用功能性或通用的名稱可以更適用于文檔或模版變化的情況。
- 不推薦: 無意義 #yee-1901 {}
- 不推薦: 與樣式相關 .button-green {}.clear {}
- 推薦: 特殊性 #gallery {}#login {}.video {}
- 推薦: 通用性 .aux {}.alt {}
常用命名（多記多查英文單詞）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等
ID和class命名越簡短越好，只要足夠表達涵義。這樣既有助于理解，也能提高代碼效率。
- 不推薦 #navigation {}.atr {}
- 推薦 #nav {}.author {}
命名時需要注意的點：
- 規則命名中，一律采用小寫加中劃線的方式，不允許使用大寫字母或 _
- 命名避免使用中文拼音，應該采用更簡明有語義的英文單詞進行組合
- 命名注意縮寫，但是不能盲目縮寫，具體請參見常用的CSS命名規則
- 不允許通過1、2、3等序號進行命名
- 避免class與id重名
- id用于標識模塊或頁面的某一個父容器區域，名稱必須唯一，不要隨意新建id
- class用于標識某一個類型的對象，命名必須言簡意賅。
- 盡可能提高代碼模塊的復用，樣式盡量用組合的方式
- 規則名稱中不應該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關的信息。應該用意義命名，而不是樣式顯示結果命名
各公司應該有各自的代碼編寫規范，以上只是列出了比較通用而實用的點出來，順便推薦幾篇博文，看完會對命名規范有新的理解。
http://www.phpxs.com/post/4249
然后，繼續看栗子：
代碼書寫規范也是非常重要的，哪里需要換行，哪里需要縮進大家應該都知道，只是懶得改是吧，借助各種編輯器sublime、notepad、webstrom等寫出來的代碼理論上是很整潔的。
當然，寫代碼過程中難免會遇到從其他地方copy代碼的情況，copy過來的代碼通常格式是不一樣的，建議調整一下格式使代碼保持美觀。
--
佛說，溫故而知新，要提高代碼的可維護性必須做到——精簡，重用，有序
下面列出一些筆主曾經寫過的幾個難以維護的代碼栗子給嘗嘗：
??1.
無謂的注釋完全可用具有具有表達力的代碼來詮釋，重構一下：
var BEFORE_TODAY = 1,
AFTER_TODAY = 2,
TODAY = 3,
OTHER_DATE = 4;
if(current.getTime()<=now_time.getTime()){
flag = BEFORE_TODAY;
break;
}else if(current.getTime()>now_time.getTime()){
flag = AFTER_TODAY;
}else if(current.getTime()==now_time.getTime()&&……){
flag = TODAY;
}else {
flag = OTHER_DATE;
}
如果后期維護更新需要新增判斷條件只需要增加修改常亮的值，更具靈活性。
??2 .避免重復
不能出現重復的表達式和和使用jquery查找同一個DOM元素，影響效率，使用變量代替,
var yestoday_progress = this.yestoday_progress/100*200;
var $task_pro = $('.task-pro');
if(this.pos.finalHeight >= yestoday_progress&&…){
...
$task_pro.css(...);
}
??3.
列舉一個曾經寫過一段非常難以維護且效率低的代碼：
for(var i=0;i<item.length;i++){
$('.item').eq(i).append("......");//省略號里是一堆html代碼
}
在一段for循環里使用append（）進行添加html代碼效率低不說，維護時要在一堆沒有格式化的代碼里進行修改添加是多么痛苦的一件事情。
遇到這種情況建議使用模版渲染的方式代替如此低效率的方法。
最后，要提高所寫代碼的質量，最好的方法就是多寫多實踐，多看好項目的源碼，積累經驗。推薦一本相關的電子書。
