這幾天在產品的某個模塊上上添加新功能，該模塊之前是由其他同事維護。也就是說，需要在同事原有代碼的基礎上進行修改。過程中遇到了一些坑，主要是由一些不合理的代碼實踐導致的。

這里拋開大的設計話題，僅挑出其中一些自己認為不是很合理的代碼細節。原因很簡單：當我們在審視別人代碼的時候，總會看到這樣那樣的不合理之處，而等到自己擼起袖子上陣時，其實也很難保證自己不會犯同樣的錯誤。可能是一時偷懶，也可能是趕需求導致的考慮步驟等。

本文代碼示例：點擊下載

糟糕實踐一：依賴節點之間的順序

我們來看下面代碼，大家應該對這樣的代碼非常熟悉了，這也是初學者比較容易犯的一個錯誤：節點的查詢依賴于節點當前所處的位置。下面?

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，以此達到方便查詢、避免沖突的目的。下面這樣的代碼相信大家不陌生，包括不少開源組件都是這么個思路。

按 Ctrl+C 復制代碼 按 Ctrl+C 復制代碼

上面的代碼看上去沒什么問題，那究竟為什么說它糟糕呢？因為：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>

轉載于:https://www.cnblogs.com/zhengsblog/p/8546927.html

總結

以上是生活随笔為你收集整理的应该避免的前端实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。