糾正前端開發(fā)中容易出錯知識點

2015-04-21 09:28:29

扎實的基礎(chǔ)有時候需要縱覽群書，但針對編碼領(lǐng)域，單靠紙上談兵遠遠不夠。思考，實踐，再思考，再實踐。累積到一定代碼量，思路自然豁然開朗。重復(fù)的時間沉淀，將締造更加強健高效的代碼。

　部分整理自網(wǎng)絡(luò)，個人水平有限，望見諒。

html

1）將input設(shè)為只讀，使用readonly而非diabled

　　disbled和readonly類似，會將輸入框設(shè)置為不可輸入狀態(tài)，但是在html中，如果一個元素被設(shè)置為disabled，它的值就不會被發(fā)送到server端。因此，將元素設(shè)為只讀時，只能使用readonly。

　　disabled和readonly在顯示效果上也是有區(qū)別的。前者不能獲得焦點，后者可以獲得焦點。默認的顯示樣式也是有區(qū)別的。

　　一個只讀數(shù)據(jù)不能輸入的話它是由什么規(guī)則生成的？如果能由其他數(shù)據(jù)根據(jù)某個規(guī)則生成，那么該數(shù)據(jù)就不是必要的，也不需要提交到服務(wù)端。因為其值通過其他數(shù)據(jù)可以直接生成出來。如果其值是由其他數(shù)據(jù)生成，并且和其他數(shù)據(jù)有嚴格的邏輯關(guān)聯(lián)，該數(shù)據(jù)提交到服務(wù)端直接保存不經(jīng)驗證的話是不安全的。因為請求是可以偽造，直接保存可能會保存經(jīng)過篡改的混亂數(shù)據(jù)。

　　當然，如果驗證的話也是和其他關(guān)聯(lián)數(shù)據(jù)做比較，其實也沒必要過多在意disabled和readonly的區(qū)別。

2）濫用元素

　　例如，濫用ul和ol，在應(yīng)該使用ol的時候使用ul；對于段落，不會用p而使用br和div；不會用h1/h2/h3等表示段落，而使用strong和div；不會用label、fieldset 和legend；不會用或亂用b、i、s、u之類在html5中重新定義過的標簽。

　　濫用ul和ol：

3）應(yīng)該避免每個元素上不止一個class

　　class是一個選擇器，可以理解為一個標識，用來標識特定的標簽。每個頁面上都一定會有重復(fù)的樣式，沒必要重寫那部分樣式，因此經(jīng)常會使用class。但是并不代表每個元素都要有多個class。

4）定義 img元素的 alt 屬性

　　如果無法顯示圖像，瀏覽器將顯示替代文本，同時也會方便機器朗讀，提高可訪問性。
5） label元素的 for 屬性；

　　label的for屬性。它為label指定了一個目標，一般是一個form表單內(nèi)元素的ID，這樣就可以把這個label與該ID元素關(guān)聯(lián)起來，當點擊label時，就可以讓該ID也獲得焦點！

　 label 標簽錯誤的加到了性別上，而男、女選項根本沒有加 label 標簽，就別提正確的使用 for 屬性了。這是很可悲的，甚至很多人根本認為這就不是一個問題。Web 的初衷是什么？讓所有人無障礙的使用網(wǎng)頁。這不是技術(shù)問題，不是時間問題，是認知的問題。

6）注意checkbox默認打勾屬性

就說一個：html checkbox
checked屬性（也就是默認是否打勾的屬性）的寫法：<input type="checkbox" checked="checked">

表明默認打勾的，
不過：

<input type="checkbox" checked="true" /> <input type="checkbox" checked="yes" /> <input type="checkbox" checked="no" /> <input type="checkbox" checked="" />

甚至：

<input type="checkbox" checked>

都全是表示默認打勾的。

因此，當checked出現(xiàn)在checkbox，都表示默認打勾。

7）從來doctype都是由編輯器自己生產(chǎn)的，這沒關(guān)系，可是你也得分清楚你需要的是那種XHTML。

Doctype聲明位于文檔中的最前面的位置，處于標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。該標簽可聲明三種DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。

當瀏覽器廠商開始創(chuàng)建與標準兼容的瀏覽器時，他們希望確保向后兼容性。為了實現(xiàn)這一點，他們創(chuàng)建了兩種呈現(xiàn)模式：標準模式和混雜模式（quirks mode）。在標準模式中，瀏覽器根據(jù)規(guī)范呈現(xiàn)頁面；在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示。混雜模式通常模擬老式瀏覽器（比如Microsoft IE 4和Netscape Navigator 4）的行為以防止老站點無法工作。

<!DOCTYPE>聲明位于文檔中的最前面的位置，處于<html>標簽之前。此標簽可告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范。

#p#

javascript

1）請為parseInt設(shè)置第二個參數(shù)。

　　 parseInt() 函數(shù)可解析一個字符串，并返回一個整數(shù)。第一個參數(shù)表示要被解析的字符串；第二個參數(shù)表示要解析的數(shù)字的基數(shù)，如果省略該參數(shù)或其值為0，則數(shù)字將以10為基礎(chǔ)解析，如果不設(shè)置，將會根據(jù)第一個參數(shù)的首字母或首兩個字母決定基礎(chǔ)：

　　省略第二個參數(shù)，如果第一個參數(shù)以 “0x” 或 “0X” 開頭，將以 16 為基數(shù)；

　　省略第二個參數(shù)，如果第一個參數(shù)以0為開頭，將以8為基數(shù)。

因此，如果不設(shè)置parseInt()的第二個參數(shù)，當?shù)谝粋€參數(shù)為“08”或“09”時，將會出現(xiàn)意想不到的結(jié)果。

2）過濾innerHTML將的值。

　　element.innerHTML = text，當text的中包含大小于好和&符號，將會打亂element里面的布局(XSS攻擊)

　　更好的取代方法是，element.textContent，將text的內(nèi)容完全以文本顯示，而不解釋成html代碼。

3）拼接字符串作為為腳本解析時，考慮數(shù)字字面量被解析為字符串。

　　setTimeout("a="+a+"; alert(a);",1000)，拿變量toString當Literal，結(jié)果數(shù)值和字符串相加，最終結(jié)果顯示為NaN,影響下一步的代碼運行。 var c = 100 + $("input.2b")[0].value; 沒用parseInt或者Number，結(jié)果變成字符串相加。

4）alert("<?=a>")，跟后端語言配合時，要考慮字符串里的\和"等特殊字符。

5）new Date("2014-11-11 00:00:00")，使用不符合標準的日期字符串，結(jié)果將難以想象。

6）盡量少使用for in來遍歷數(shù)組。

　　正如我們所知道：for in一般用于對象遍歷，而數(shù)組遍歷通常使用for，然而的數(shù)組可以使用for in循環(huán)遍歷，因為array是object的子類。但是遍歷對象，除了數(shù)組本身的屬性被遍歷出來外，但是一旦在遍歷之前，數(shù)組已經(jīng)被修改 prototype。for in也將會把添加到原型鏈prototype上的屬性。

7）加載時執(zhí)行l(wèi)ocation.href = url請使用replace。

在onload里location.href = url; 做無條件跳轉(zhuǎn)邏輯的時候不用replace，會導(dǎo)致瀏覽器后退退不回去。

8）嚴謹正則表達式

　　var param = location.href.match(/a=([^\&\?]+)/)[1]; 濫用正則，使用不嚴謹?shù)恼齽t匹配url參數(shù)，結(jié)果會把 baba xaxa sba匹配進去。

9）避免使用.attr()修改input的屬性值。

　　$("input.2b").attr("value",2333333) 拿attribute當property用。但是一旦有腳本手動輸入將會使得value中的值為手動設(shè)置后的值，而不是input本身的值。

10）進行浮點數(shù)計算之后，調(diào)用toFiexd。

a=0.1, b=0.2，element.innerText = a+b;，浮點數(shù)顯示前不調(diào)toFixed，將會出現(xiàn)意想不到的結(jié)果。

11）方法或者代碼塊執(zhí)行之后，應(yīng)加分號。

(function(){
    //do something
})()
(function(){
    //do something
})()

兩個立即調(diào)用函數(shù)之間沒有寫分號，兩個立即調(diào)用函數(shù)會被粘連起來，出現(xiàn)異常。

#p#

css

1）float:left/right 或者 position: absolute 后不需要寫上 display:block。三者關(guān)系：

2）不分場景的使用 overflow:hidden 來閉合浮動

　　華麗麗的demo

3）讓 Chrome 支持小于12px 的文字，在 html 設(shè)置 -webkit-text-size-adjust:none。

　　-webkit-text-size-adjust放在body上會導(dǎo)致頁面縮放失效

　　用-webkit-text-size-adjust不要定義成可繼承的或全局的

4）px 并不是一個絕對單位（px 是相對單位），line-height最好不要使用 px。
　line-height設(shè)置為1.5時，會將line-height:1.5繼承到子元素；

　　而line-height設(shè)置為150%，子元素只會繼承由父元素font-size和line-height相乘計算的值。

　　比如parent元素設(shè)置屬性：font- size:14px;line-height:1.5,child設(shè)置font-size:26px;那么parent：line-height = 14px * 1.5 = 21px，child：line-height = 26px * 1.5 = 39px。parent元素設(shè)置屬性：font-size:14px;line-height:150%,child設(shè)置font-size:26px; 那么parent：line-height = 14px * 150% = 21px，child：line-height = 父元素的line-height = 21px。

5）搞清 PNG 的分類， PNG24 支持透明， PNG8 也支持 α 透明。

　　便攜式網(wǎng)絡(luò)圖形（Portable Network Graphics）是一種無損位圖圖像文件格式。可以逐次逼近顯示：先描繪出圖片輪廓，然后在逐步顯示圖像的細節(jié)。

　　透明性：①布爾透明(索引透明) 只能為不透明或全透明。 ②Alpha 透明支持全透明和半透明。

PNG格式有8位、24位、32位三種形式，其中8位PNG支持兩種不同的透明形式（索引透明和alpha透明），24位PNG不支持透明，32位 PNG 在24位基礎(chǔ)上增加了8位透明通道，因此可展現(xiàn)256級透明程度。

非IE6的瀏覽器都能正常顯示包含透明信息的PNG圖片，而IE6在濾鏡的幫助下能夠正常展示PNG8+索引透明以及32位的透明PNG圖像，但是對 PNG8+alpha透明的圖像支持不夠好。

使用濾鏡解決IE6透明問題：IE6 PNG 半透明: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”img. png”, sizingMethod=”scale”);

6）混淆圖像格式

圖像顏色數(shù)量較少,且基本為純色或者平滑漸變色時使用PNG更優(yōu)(矢量)
PNG 就是為了取代GIF而生的，除了動畫圖片等特殊場景使用，一般推薦使用PNG
對于圖像顏色豐富或者層次較深的圖片采用 JPG更優(yōu),例如:人物,風景等寫實類拍攝照片
對于網(wǎng)頁中的背景, 按鈕等盡量采用PNG存儲, 以保證更好的視覺品質(zhì);廣告,商品等則可以使用JPG來存儲(此時文件更小,更快的加載)

7）給block-level元素應(yīng)用vertical-align，結(jié)果發(fā)現(xiàn)根本不生效。

　　默認的block-level元素有<address><blockquote><div><dl><fieldset><form><h1><h3><ol><p><table><ul>

　　而這些元素，因為包含在block-level，因此可以認作block-level<dd><dt><li><th><tfoot><tr><td>

　　所有瀏覽器都支持vertical-align 屬性設(shè)置元素的垂直對齊方式。但是對于一個沒有設(shè)定高度，高度由元素內(nèi)部決定的元素來說，設(shè)置verical-align無效。

　　實現(xiàn)非固定高度元素的垂直居中，可以參考http://www.cnblogs.com/0603ljx/p/4440449.html第三條

8）避免給行內(nèi)非替代元素設(shè)置高度。

　　CSS標準決定，無法給行內(nèi)非替代元素設(shè)定高度寬度，和margin，padding。

　　這也同時說明引入reset.css是否有必要，設(shè)置所有元素*{margin:0;padding:0}，會為行內(nèi)非替換元素設(shè)置一些無效的屬性，加重瀏覽器首次加載的負擔。

9）避免給input/button元素設(shè)定百分比line-height。

　　line-height 屬性設(shè)置行間的距離（行高）。

　　給input/button定義line- height，試圖實現(xiàn)垂直居中，但是會改變button本身元素高度加上button默認自帶的overflow:hidden，導(dǎo)致button的高度無法完全支撐內(nèi)部文本的顯示，也就是一旦百分比設(shè)置小于100%，button的文本無法完全顯示。

10）非定位元素無法設(shè)定z-index堆疊級別。
對于position為static（默認值）的元素，是無法設(shè)置z-index。

11）避免給自閉合標簽加了成對閉合，給成對閉合標簽加了自閉合。

　　自閉合元素：

　　<area/>帶有可點擊區(qū)域的圖像映射

　　<base/>標簽為頁面上的所有鏈接默認地址或默認目標

　　外聯(lián)js腳本文件：<script type="text/javascript" src="example.js"></script>

　　如果是在XHTML中可以使用<script type="text/javascript" src="example.js"/>，不能在HTML文檔中使用這種語法，不符合HTML規(guī)范，尤其得不到IE的正確解析

12）注意@import規(guī)則集的順序。

　　不是技術(shù)問題，而是時間問題，編寫代碼時要細心，避免后設(shè)置的元素屬性覆蓋前面設(shè)置的屬性。

13）不能完全把main, section, article, aside等當成div使用

　　看似相似，并不是真的相似，main, section, article, aside這些標簽是為了布局而生的，自然有它們更精確的語義定位，或者說他們更將強調(diào)HTML的語義。

DIV 這個標簽一直是我們見得最多、用得最多的標簽。它本身無任何語義，用作布局以及樣式化標簽。

section與div相似，但它有更進一步的語義。section用作一段有專題性的內(nèi)容，一般在它里面會帶有標題。 section典型的應(yīng)用場景應(yīng)該是文章的章節(jié)、標簽對話框中的標簽頁、或者論文中有編號的部分。

article是一個特殊的section標簽，它比section具有更明確的語義, 它代表一個獨立的、完整的相關(guān)內(nèi)容塊。 div、section、article，語義是從無到有，逐漸增強的。div無任何語義，僅僅用作樣式化或者腳本化的標簽，對于一段主題性的內(nèi)容，則就適用section，而假如這段內(nèi)容可以脫離上下文，作為完整的獨立存在的一段內(nèi)容，則就適用 article。原則上來說，能使用article的時候，也是可以使用section的，但是實際上，假如使用article更合適，那么就不要使用section。

這么做過的童鞋共勉，沒做過的童鞋贊美一下。總之實際工作中誤用亂用的例子實在太多，就不一一列舉，希望引起大家關(guān)注并改善類似情況。

責任編輯：王雪燕來源：博客園

前端開發(fā)易出錯知識點