[原创]前端工作了一段时间经验总结，献给做前端的同学
一，編輯器的選擇，推薦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這樣的選擇符)。
?
三、技巧。
?
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掛用于邊距的原子類（例如mt10、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. ie6、7不支持display：inline-block，但行內元素可以用此屬性觸發hasLayout（是ie瀏覽器為解析盒模型而設計的一個專有屬性，它的設計初衷是用于塊級元素的，如果觸發行內元素的hasLayout，就會讓行內元素擁有一些塊級元素的特性），從而模擬出inline-block的效果，然后再用*vertical-align控制文字的垂直對齊。但這樣做用hack，所以不推薦。
?
20. 排列地板磚一樣的布局的元素時，盡量用給每個元素用相同的類來實現，如果最左邊的元素間距和右邊的有區別可以給所有元素套一個父層，然后設置其右邊距為負就行了。
?
21. 如果一個類中有些部分會經常變化，我們可以將這個經常變化的部分抽離出來單獨設成一個類，然后用組合來實現最終樣式。
?
22. 可以用(function(){})(),這樣的匿名函數來避免全局變量沖突。讓js不產生沖突，需要避免全局變量的泛濫，合理使用命名空間以及為代碼添加必要的注釋。可以定義一個全局對象，然后用其屬性來定義全局變量，同時結合命名空間（即類似，GLOBAL.A.xx,和GLOBAL.B.xx之類的）。
?
?
?
四、常見問題
?
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。
轉載于:https://www.cnblogs.com/qiaoxinming/p/8414770.html
總結
以上是生活随笔為你收集整理的[原创]前端工作了一段时间经验总结，献给做前端的同学的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用live555和ffplay搭建流媒体
- 下一篇： 前端性能优化知识，包括css和js