前端工做了一段時間的經驗總結

一，編輯器的選擇，推薦webstorm，絕對的神器。不要用dw了，它最驕傲的所見即所得其實沒什麼用，由於根本就不許，代碼提示也不人性話，不方便。Webstorm的方便之處（目前用到的），

1.能夠分屏，左右同時編輯兩個文件，好比左邊編輯html，右邊編輯它的css/js。

2.代碼提示很人性話，分級結構也很清洗。

3.方便查找，如ctrl+點擊類名，就可自動定位到該css樣式。

4.支持自定義模版，這樣快速開始完成一些常常用到的代碼。

5.支持個性化主題，字體等。

6.強大的插件庫，本身去選吧。

7 .ctrl+/,註釋所選區域。

目前暫時就發現這些，本身去發現吧，這有個軟件學習地址：Webstorm入門指南

二，佈局。提到佈局最頭疼就是瀏覽器兼容性，如今才發現其實不少兼容性實際上是很容易避免的，只要作到你對本身的每一句代碼都知道它的意義和做用，還有避免用一些有兼容性的樣式屬性就好了，不少狀況均可以不用hack，同樣能實現多瀏覽器兼容。

1.       不要用hack，必定有更好的解決辦法。不少狀況都是由於代碼結構不夠好纔會出現兼容性問題。

2.       思考如何用最少的標籤及屬性實現頁面。

3.       理解結構，表現，行爲分離的意義。

4.       佈局前必定要先分析頁面結構，磨刀不誤砍柴工，分析怎麼用更好的辦法實現，理清思路後，再切圖寫代碼。

5.       深入理解類的概念，注重歸類元素，多總結，保持代碼風格（包括先後代碼的空格位置、多少，以及命名風格）嚴格一致而且儘可能簡潔。

6.       多用組合，少用繼承。

7.       命名空間：駝峯命名法用於區別不一樣單詞，劃線用於代表從屬關係。

8.       低權重原則------避免濫用子選擇器(即相似#test span這樣的選擇符)。

3、技巧。

1. 寫js效果時必定要注意先分析好效果的行爲，儘可能用最簡單通用性的代碼。分析步驟能夠是1.先把要實現的功能一步一步的寫在紙上（即天然語言）2.再根據天然語言翻譯成機器語言，用jquery寫的代碼必定要注意代碼的可移植性、通用性。

2. 組織css，推薦使用base、common、page三層，base能夠分爲兩大部分：css reset（覆蓋掉瀏覽器提供的默認樣式，能夠參考：developer.yahoo.com/yui/）和通用原子類。（疑問：若是使用css reset後，那麼以前的要求的標籤語義化是否就沒有意義了呢？由於全部語義化的標籤默認樣式都被reset了）,不用*{ margin:0; padding:0;}的緣由是由於「*」表示全部標籤，其中包含大量生僻標籤和爲向前兼容而留下來的淘汰標籤。

3. 把多個按鈕放在一張圖定位時，最好兩個按鈕之間隔一個像素，要否則有些版本的chrome可能解析不許確。

4. .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } 注意若是用了浮動，必定要清除浮動，深入理解浮動的做用很重要。 在層裏調整文字的垂直位置能夠用1.lineheight2.padding。 注意模塊化佈局，增長代碼的重用性，儘可能只給最裏層的內容層設高度，通常若是高度不肯定的都設置成自適應，這樣有助於內容拉伸，也便於修改模塊的高度。 大框架，儘可能簡單的分，好比左右結構最好就設置成左右，不必搞成左中右。 儘可能不要在html代碼裏插入img，把他設置在結構裏，而後用css插入圖片。

5. jquery編程習慣能夠參考：1.把全部用$（）選中的元素保存在前綴爲$的js變量裏2.每一個函數結束都要用return false 結束掉函數。

6. 佈局前，先構思好整個頁面的結構，一個好的結構要便於維護，加載更快，佈局時也更容易。佈局時，穩紮穩打，一步步弄好後（既沒有用hack，也沒有兼容性問題了），再佈局下一個板塊。 佈局一個帶js效果的頁面，要先把效果圖上的頁面效果，完整佈局好後，再考慮加動做的事情。而且必定要分析好頁面的結構，以最少的標籤，以及標籤要與所放內容對應來佈局。

7. jquery代碼通常要用$(document).ready(function(){}確保頁面dom準備好了再進行js操做。 頁面按鈕點擊時邊框變紅，點擊完後邊框變藍能夠用outline:none;解決。 有動畫的層最好設置overflow：hidden以避免層裏面的內容在外層寬高改變時撐出層外。

8. 寫js效果時必定要注意先分析好效果的行爲，儘可能用最簡單通用性的代碼。分析步驟能夠是1.先把要實現的功能一步一步的寫在紙上（即天然語言）2.再根據天然語言翻譯成機器語言，用jquery寫的代碼必定要注意代碼的可移植性、通用性。

9. a標籤的四種狀態的排序問題，能夠用love hate 原則，即l（link）ov（visited）e h（hover）a（active）te，順序寫錯可能出現點擊後hover樣式失效。

10. 通常狀況下，建議儘可能使用class，少用id。

11. css編碼風格：多行式和一行式。 多行式：可讀性強，但使行數過多，編輯須要來回拖動滾動條，影響開發速度，增大css文件大小。 一行式：可讀性稍差，有效減少css文件行數，有利於提升開發速度，同時減少css文件大小。 一行式逐漸成爲主流。

12. css sprite：即把多個甚至全部的圖標都放在一張圖裏，而後用背景定位來控制圖標的顯示。 使用難點：圖片如何排列可以緊湊，同時保證不會影響擴展性。 優勢：減小http請求數，減少服務器壓力。 缺點：影響開發速度，大大下降了可維護性。 是否使用取決於網站流量，對於流量不大的網站來講，css sprite帶來的好處並不明顯，而付出的代價是巨大的，不划算。

13. 定義有：hover僞類的樣式時，多定義一個它的hover類，這樣有助於js調用生成current的效果，如定義 btn{xxx}，btn：hover，btn_hover{xxx}。

14. 低權重原則避免濫用子選擇器(即相似#test span這樣的選擇符)。 css的選擇符是有權重的，當不一樣選擇符的樣式設置有衝突時，會採用權重高的選擇符設置的樣式。 規則：html標籤的權重是1，class的權重是10，id的權重是100.如「div em」的權重是1+1=2，「strong.demo」的權重是10+1=11，「#test.red」的權重是100+10=110. 若是css選擇符權重相同，那麼樣式會遵循就近原則，哪一個選擇符最後定義，就採用哪一個選擇符的樣式，與掛class名的前後順序無關。 爲了保證樣式容易被覆蓋，提供可維護性，css選擇符需保證權重儘量低。

15. 若是不肯定模塊的上下margin特別穩定，最好不要將它寫到模塊的類裏，而是使用類的組合，單獨爲上下margin掛用於邊距的原子類（例如mt十、mt20）。模塊最好不要混用margintop和marginbottom，統一使用margintop或marginbottom。

16. 拆分模塊技巧：1.模塊與模塊之間儘可能不要包含相同的部分，若是有相同部分，應將它們提取出來，拆分紅一個獨立的模塊。2.模塊應在保證數量儘量少的原則下，作到儘量簡單，以提升重用性。

17. 觸發hasLayout通常狀況用zoom：1就好了，但當用dhtml的時候，可能失效，這時用position：relative就好了。

18. 佈局最基本的元素：塊級元素（常見：div,p,form,ul,ol,li）和行內元素（span,strong,em）等。 塊級元素：獨佔一行，默認狀況下，其寬度自動填滿父元素寬度（即便設置了寬帶也會獨佔一行）。 行內元素：不會獨佔一行，相鄰的行內元素會排列在同一行裏，直到一行排不下，纔會換行，其寬度隨元素的內容而變化（沒有上下邊距，只有左右邊距）。 能夠用display：inline/block，切換。

19. ie六、7不支持display：inline-block，但行內元素能夠用此屬性觸發hasLayout（是ie瀏覽器爲解析盒模型而設計的一個專有屬性，它的設計初衷是用於塊級元素的，若是觸發行內元素的hasLayout，就會讓行內元素擁有一些塊級元素的特性），從而模擬出inline-block的效果，而後再用*vertical-align控制文字的垂直對齊。但這樣作用hack，因此不推薦。

20. 排列地板磚同樣的佈局的元素時，儘可能用給每一個元素用相同的類來實現，若是最左邊的元素間距和右邊的有區別能夠給全部元素套一個父層，而後設置其右邊距爲負就好了。

21. 若是一個類中有些部分會常常變化，咱們能夠將這個常常變化的部分抽離出來單獨設成一個類，而後用組合來實現最終樣式。

22. 能夠用(function(){})(),這樣的匿名函數來避免全局變量衝突。讓js不產生衝突，須要避免全局變量的泛濫，合理使用命名空間以及爲代碼添加必要的註釋。能夠定義一個全局對象，而後用其屬性來定義全局變量，同時結合命名空間（即相似，GLOBAL.A.xx,和GLOBAL.B.xx之類的）。4、常見問題

1. ie只有a支持hover,而且注意a裏要有href才行。

2. IE6中用了float:left以後致使margin-left雙倍邊距的BUG解決方法加上display:inline

3. 若是存在文字在層居中的問題，水平方向能夠用text-align代替，垂直方向能夠用line-height來控制，若是隻是控制上邊距，就用padding-top。這樣能夠避免在ie6上的某些沒必要要的錯誤。

4. ajax傳參數時，漢字必定要用encodeURIComponent（string），編碼一下，要否則可能變成亂碼中文在ie6裏。

5. ie6下select元素會以窗口形式顯示的，這是ie6的一個bug，因此當你設置一層爲相對或絕對定位時，select仍然會浮在那個層之上。 解決方法，用一個和那個層一樣大小的iframe放在test下面，select上面，用iframe遮住select。

 

    最後推薦兩本書吧，上面不少技巧都是來自於裏面《css權威指南》、《如何編寫高質量的代碼》，有些是實際工做中本身的一些心得，前輩的指點。還有一句話：「你對所學東西理解深度，決定了你所站的高度。」​​​​