這幾天在產品的某個模塊上上添加新功能，該模塊之前是由其他同事維護。也就是說，需要在同事原有代碼的基礎上進行修改。過程中遇到了一些坑，主要是由一些不合理的代碼實踐導致的。
這里拋開大的設計話題，僅挑出其中一些自己認為不是很合理的代碼細節。原因很簡單：當我們在審視別人代碼的時候，總會看到這樣那樣的不合理之處，而等到自己擼起袖子上陣時，其實也很難保證自己不會犯同樣的錯誤。可能是一時偷懶，也可能是趕需求導致的考慮步驟等。
本文代碼示例：點擊下載
糟糕實踐一：依賴節點之間的順序
我們來看下面代碼，大家應該對這樣的代碼非常熟悉了，這也是初學者比較容易犯的一個錯誤：節點的查詢依賴於節點當前所處的位置。下面
getElementsByTagName('span')[0] 這樣的寫法存在很大的隱患，很簡單，主要節點的順序一發生變化，就出事了。
<h2>不要依賴節點順序</h2> <div id="1111"> <span></span>， <span>愛好：動漫</span> </div> <script type="text/javascript"> var $ = function(id) { return document.getElementById(id); } $('1111').getElementsByTagName('span')[0].innerHTML = '昵稱：程序猿小卡'; </script>
比如節點的順序變成，那就會發生一些意料之外的事情了，第一個span節點之間的“簡介：”就被無情地覆蓋了。
<h2>不要依賴節點順序</h2> <div id="222"> <span>簡介：</span> <span></span>， <span>愛好：動漫</span> </div>
解決方案
千萬不要用 element.getElementsByTagName(tagName)[index] 這樣的方式可以來獲取節點，除非你有非這樣做不可的理由。
取而代之可以用類似 element.getElementById(id) 來獲取，或者采用下文提到的 element.querySelector(selector) 這樣的方式~
糟糕實踐二：依賴標簽的排版
上面我們已經提到說節點查詢的時候不要依賴於節點的順序，原因是節點的順序是有可能改變的。那么，如果節點順序沒有“發生變化”，那就能夠確保平安無事了嗎？答案是未必。
且看下面的代碼，也是很常見的代碼，獲得id為“333”的元素的第一個子節點，並將該子節點的color設置為 #ccc。
<h2>順序沒變，但腳本錯誤了</h2> <div id="333"><span>昵稱：程序猿小卡</span><span>愛好：動漫</span></div>
<script type="text/javascript"> $('333').childNodes[0].style.color = '#ccc'; </script>
順序不變也會出事？可能有的同學會有這樣的疑惑。好吧，本人稍微有一點排版上的強迫症，看上上面類似的標簽排班時，總是忍不住想要去小小調整下，好讓標簽看上去更清晰些，於是我小小調整了下排版，變成下面這個樣子。
<h2>順序沒變，但腳本錯誤了</h2> <div id="444"> <span>昵稱：程序猿小卡</span> <span>愛好：動漫</span> </div> <script type="text/javascript"> $('444').childNodes[0].style.color = '#ccc'; </script>
子節點順序並沒有發生改變，只是排版變了，按理來說不會有什么影響吧。好，讓我們打開chrome看下，控制台下輸出這樣的信息：
Uncaught TypeError: Cannot set property 'color' of undefined
什么原因呢？眼尖的同學可能已經看出來了，childNodes屬性可以獲得一個節點的所有子節點，而這些子節點里面包含了文本節點，甚至是標簽末尾的換行、空格。不難想到，下面的標簽同樣會導致同樣的bug，而這里的標簽跟最初的標簽，唯一的區別僅在於：第一個span標簽前面多了個空格。
這個bug隱蔽指數相當高，很可能放在那里幾年都沒有人觸發。畢竟，有誰會想到，換個行，加個空格都會導致出bug呢，而且在舊版本IE里面，childNodes是將文本節點排除在外的，也就是說，即使你加了換行、排版，在舊版本IE里測試也是完全ok的，巨坑。
<h2>順序沒變，但腳本錯誤了</h2> <div id="555"> <span>昵稱：程序猿小卡</span><span>愛好：動漫</span> </div> <script type="text/javascript"> $('555').childNodes[0].style.color = '#ccc'; </script>
解決方案
參見糟糕實踐一的解決方案
糟糕實踐三：依賴特定的節點類型
項目中依賴的基礎庫是jQuery，jq提供了非常強大的選擇器，很常見的就是可以通過節點類型進行選擇，比如下面代碼。如果你那么寫的話，接手你代碼的兄弟估計會恨死你。
<h2>依賴節點類型</h2> <div id="666"> <ul></ul> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $('#666 ul').html('<li>昵稱：程序猿小卡</li><li>愛好：漫畫</li>'); </script>
問題很明顯，$('#666 ul')選中了id為666的節點下所有節點類型為UL的子節點、孫節點、曾孫節點。。。我就掉這個坑里了，但是需要在上面加多個下拉列表，於是毫不猶豫地采用UL來模擬，大致如下。運行的結果絕對讓你抓狂。
<h2>依賴節點類型</h2> <div id="777"> <ul></ul> <ul> <li>選項一</li> <li>選項二</li> <li>選項三</li> </ul> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $('#777 ul').html('<li>昵稱：程序猿小卡</li><li>愛好：漫畫</li>'); </script>
解決方案
參見糟糕實踐一的解決方案。
糟糕實踐四：不合理利用元素選擇器聲明樣式
跟上面的例子其實很類似，還是用上面的標簽來說明問題。同事的願望很朴素，就是希望將ul節點下的文本都設置為紅色而已。
<style type="text/css"> ul{ color: red; } </style> <h2>依賴節點類型</h2> <div id="666"> <ul></ul> </div>
然后，我往里面查了另一個ul元素來模擬下拉列表，悲劇了，原先聲明的樣式傷及無辜。。
<h2>依賴節點類型</h2> <div id="777"> <ul></ul> <ul> <li>選項一</li> <li>選項二</li> <li>選項三</li> </ul> </div>
解決方案
盡可能地避免通過元素選擇器來聲明樣式（reset css的除外），如果非用不可，那么盡可能地將殺傷范圍限制得足夠小，如在某個特定的id、class內部用元素選擇器，就像下面這樣這樣。
注意：盡管這樣做看上去安全了些，但還是有不小的隱患，千萬小心
.restrict_style ul{ color: red; } // 通過外層容器，限制選擇器的
糟糕實踐五：節點查詢依賴於樣式類名
在一個頁面中，id是唯一的，給太多的節點加上id，很容易造成節點id的沖突。常用的推薦解決方案是，給最外層的容器節點加上id，而對於子節點，則加上相應的class，以此達到方便查詢、避免沖突的目的。下面這樣的代碼相信大家不陌生，包括不少開源組件都是這么個思路。
<h2>節點查詢依賴於類名</h2> <div id="888"> <span class="nick">昵稱：程序猿小卡</span> <span class="hobby">愛好：動漫</span> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $('#888 .nick').css('color', 'green'); $('#888 .hobby').css('color', 'orange'); </script>
上面的代碼看上去沒什么問題，那究竟為什么說它糟糕呢？因為：1、不利於樣式重構 2、修改容易導致bug
假設某個晴朗的早晨，產品同學找到你說，這里這里的樣式需要改版，你稍微一評估，自信滿滿地說：沒問題，很簡單。於是你就開工了，既然是改版，肯定是大動刀了。過了一會，你的眼球突然被<span class="nick"></span>這個標簽吸引了：好好的炎黃子孫class名干嘛起得這樣洋里洋氣的，太裝了吧（很不恰當的例子哈，只是為了說明因某些原因需要修改類名）。於是果斷將“nick”改成了“nicheng”，多通俗易懂啊。
於是，悲劇了，在本文的例子里，把“nick”改成“nicheng”，只是會導致樣式稍微有點不正常，但嚴重的時候腳本錯誤都有可能
<h2>節點查詢依賴於類名</h2> <div id="999"> <span class="nicheng">昵稱：程序猿小卡</span> <span class="aihao">愛好：動漫</span> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $('#999 .nick').css('color', 'green'); // 節點取不到了 $('#999 .hobby').css('color', 'orange'); $('#999 .nick')[0].innerHTML = '程序猿小卡'; /// 出錯了，因為$('#999 .nick')[0]為undefined </script>
解決思路
大家都推崇的開發方式（外層id，內層class），是不是就不要用了呢？當然不是，只不過可以稍微調整下：
1、外層容器用id
2、子節點用class，但class前需要加上“js-”等特殊前綴，標識該樣式為js代碼里需要用到的。對這樣的class不要隨便動它，如果需要修改，請先搜索下整個工程目錄，確保你的修改不會導致bug。
簡單修改下上面的例子，好了，nick、hobby，隨你修改了~
<h2>節點查詢不依賴於樣式類名</h2> <div id="1010"> <span class="js-nick nick">昵稱：程序猿小卡</span> <span class="js-hobby aihao">愛好：動漫</span> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $('#999 .js-nick').css('color', 'green'); // 節點取不到了 $('#999 .js-hobby').css('color', 'orange'); $('#999 .js-nick')[0].innerHTML = '程序猿小卡'; /// 出錯了，因為$('#999 .nick')[0]為undefined </script>
更多糟糕實踐
待補充