前端學(xué)習總結的20個(gè)技巧

1. 寫(xiě)js效果時(shí)一定要注意先分析好效果的行為，盡量用最簡(jiǎn)單通用性的代碼。分析步驟可以是先把要實(shí)現的功能一步一步的寫(xiě)在紙上（即自然語(yǔ)言），再根據自然語(yǔ)言翻譯成機器語(yǔ)言，用jquery寫(xiě)的代碼一定要注意代碼的可移植性、通用性。

2. 組織css，推薦使用base、common、page三層，base可以分為兩大部分：css reset和通用原子類(lèi)。（疑問(wèn)：如果使用css reset后，那么之前的要求的標簽語(yǔ)義化是否就沒(méi)有意義了呢？因為所有語(yǔ)義化的標簽默認樣式都被reset了）,不用*{ margin:0; padding:0;}的原因是因為“*”表示所有標簽，其中包含大量生僻標簽和為向前兼容而留下來(lái)的淘汰標簽。

3. 把多個(gè)按鈕放在一張圖定位時(shí)，醉好兩個(gè)按鈕之間隔一個(gè)像素，要不然有些版本的chrome可能解析不準確。

4.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } 注意如果用了浮動(dòng)，一定要清除浮動(dòng)，深刻理解浮動(dòng)的作用很重要。 在層里調整文字的垂直位置可以用1.lineheight2.padding。 注意模塊化布局，增加代碼的重用性，盡量只給最里層的內容層設高度，一般如果高度不確定的都設置成自適應，這樣有助于內容拉伸，也便于修改模塊的高度。 大框架，盡量簡(jiǎn)單的分，比如左右結構醉好就設置成左右，沒(méi)必要搞成左中右。 盡量不要在html代碼里插入img，把他設置在結構里，然后用css插入圖片。

5. jquery編程習慣可以參考：1.把所有用$（）選中的元素保存在前綴為$的js變量里2.每個(gè)函數結束都要用return false 結束掉函數。

6. 布局前，先構思好整個(gè)頁(yè)面的結構，一個(gè)好的結構要便于維護，加載更快，布局時(shí)也更容易。布局時(shí)，穩扎穩打，一步步弄好后（既沒(méi)有用hack，也沒(méi)有兼容性問(wèn)題了），再布局下一個(gè)板塊。 布局一個(gè)帶js效果的頁(yè)面，要先把效果圖上的頁(yè)面效果，完整布局好后，再考慮加動(dòng)作的事情。并且一定要分析好頁(yè)面的結構，以最少的標簽，以及標簽要與所放內容對應來(lái)布局。

7. jquery代碼一般要用$(document).ready(function(){}確保頁(yè)面dom準備好了再進(jìn)行js操作。 頁(yè)面按鈕點(diǎn)擊時(shí)邊框變紅，點(diǎn)擊完后邊框變藍可以用outline:none;解決。 有動(dòng)畫(huà)的層醉好設置overflow：hidden以免層里面的內容在外層寬高改變時(shí)撐出層外。

8. 寫(xiě)js效果時(shí)一定要注意先分析好效果的行為，盡量用最簡(jiǎn)單通用性的代碼。分析步驟可以是1.先把要實(shí)現的功能一步一步的寫(xiě)在紙上（即自然語(yǔ)言）2.再根據自然語(yǔ)言翻譯成機器語(yǔ)言，用jquery寫(xiě)的代碼一定要注意代碼的可移植性、通用性。

9. a標簽的四種狀態(tài)的排序問(wèn)題，可以用love hate 原則，即l（link）ov（visited）e h（hover）a（active）te，順序寫(xiě)錯可能出現點(diǎn)擊后hover樣式失效。

10. 一般情況下，建議盡量使用class，少用id。

11. css編碼風(fēng)格：多行式和一行式。 多行式：可讀性強，但使行數過(guò)多，編輯需要來(lái)回拖動(dòng)滾動(dòng)條，影響開(kāi)發(fā)速度，增大css文件大小。 一行式：可讀性稍差，有效減小css文件行數，有利于提高開(kāi)發(fā)速度，同時(shí)減小css文件大小。 一行式逐漸成為主流。

12. css sprite：即把多個(gè)甚至所有的圖標都放在一張圖里，然后用背景定位來(lái)控制圖標的顯示。 使用難點(diǎn)：圖片如何排列能夠緊湊，同時(shí)**不會(huì )影響擴展性。 優(yōu)點(diǎn)：減少http請求數，減小服務(wù)器壓力。 缺點(diǎn)：影響開(kāi)發(fā)速度，大大降低了可維護性。 是否使用取決于網(wǎng)站流量，對于流量不大的網(wǎng)站來(lái)說(shuō)，css sprite帶來(lái)的好處并不明顯，而付出的代價(jià)是巨大的，不劃算。

13. 定義有：hover偽類(lèi)的樣式時(shí)，多定義一個(gè)它的hover類(lèi)，這樣有助于js調用生成current的效果，如定義btn{xxx}，btn：hover，btn_hover{xxx}。

14. 低權重原則避免濫用子選擇器(即類(lèi)似#test span這樣的選擇符)。 css的選擇符是有權重的，當不同選擇符的樣式設置有沖突時(shí)，會(huì )采用權重高的選擇符設置的樣式。 規則：html標簽的權重是1，class的權重是10，id的權重是100.如“div em”的權重是1+1=2，“strong.demo”的權重是10+1=11，“#test.red”的權重是100+10=110. 如果css選擇符權重相同，那么樣式會(huì )遵循就近原則，哪個(gè)選擇符醉后定義，就采用哪個(gè)選擇符的樣式，與掛class名的先后順序無(wú)關(guān)。 為了**樣式容易被覆蓋，提供可維護性，css選擇符需**權重盡可能低。

15. 如果不確定模塊的上下margin特別穩定，醉好不要將它寫(xiě)到模塊的類(lèi)里，而是使用類(lèi)的組合，單獨為上下margin掛用于邊距的原子類(lèi)（例如mt10、mt20）。模塊醉好不要混用margintop和marginbottom，統一使用margintop或marginbottom。

16. 拆分模塊技巧：1.模塊與模塊之間盡量不要包含相同的部分，如果有相同部分，應將它們提取出來(lái)，拆分成一個(gè)獨立的模塊。2.模塊應在**數量盡可能少的原則下，做到盡可能簡(jiǎn)單，以提高重用性。

17. 觸發(fā)hasLayout一般情況用zoom：1就行了，但當用dhtml的時(shí)候，可能失效，這時(shí)用position：relative就行了。

18. 布局最基本的元素：塊級元素（常見(jiàn)：div,p,form,ul,ol,li）和行內元素（span,strong,em）等。 塊級元素：獨占一行，默認情況下，其寬度自動(dòng)填滿(mǎn)父元素寬度（即使設置了寬帶也會(huì )獨占一行）。 行內元素：不會(huì )獨占一行，相鄰的行內元素會(huì )排列在同一行里，直到一行排不下，才會(huì )換行，其寬度隨元素的內容而變化（沒(méi)有上下邊距，只有左右邊距）。 可以用display：inline/block，切換。

19. ie6、7不支持display：inline-block，但行內元素可以用此屬性觸發(fā)hasLayout（是ie瀏覽器為解析盒模型而設計的一個(gè)專(zhuān)有屬性，它的設計初衷是用于塊級元素的，如果觸發(fā)行內元素的hasLayout，就會(huì )讓行內元素擁有一些塊級元素的特性），從而模擬出inline-block的效果，然后再用*vertical-align控制文字的垂直對齊。但這樣做用hack，所以不推薦。

20. 排列地板磚一樣的布局的元素時(shí)，盡量用給每個(gè)元素用相同的類(lèi)來(lái)實(shí)現，如果最左邊的元素間距和右邊的有區別可以給所有元素套一個(gè)父層，然后設置其右邊距為負就行了。