如何成爲優秀的前端攻城師 （V客學院知識分享）

 什麼是前端呢？大部分人都停留在‘前端就是切頁面，並且頁面開發沒什麼技術含量，很簡單！’，事實上前端不只僅只限於此。

不一樣時期對互聯網技術的見解是不同的，對前端的認知一也是不同的。在互聯網早期時，小車仍是比房子貴的，燒餅和粉絲還只是用來吃的，菊花還只是用來泡茶的。那時的頁面設計風格相對單一，對應的頁面需求比較簡單，而且當時的瀏覽器也基本是IE6的天下，javascript也只是網頁特效的代名詞，HTML頁面自己沒有引發太多人關注，彷佛只要能用div甚至table加css輔助把圖片定好位，把頁面內容預留好就OK了，因此咱們不能把認知停留在過去，隨着互聯網的發展，前端技術早已發生天翻地覆的改變。交互複雜性的增長，AJAX的應用，瀏覽器的更新換代，移動端的應用等等。

優秀的前端須要具有那些？

實現效果圖是最基本的工做

把視覺稿經過頁面代碼的方式表現出來包含兩個基本訴求：1. 可以真實反映視覺稿;2.可以經過瀏覽器的兼容。這兩個訴求的達成須要咱們有追求細節的態度和必定的頁面功底，能完成這兩個內容就能夠初步進入頁面前端的從業者行列了，但這僅表明前端工做才剛剛開始!

與項目的參與者的溝通

溝通很重要。前端開發除了要與設計師參與溝通外，還有跟後臺程序編碼進行溝通。可謂是 UI 跟後臺的一箇中間橋樑。

良好的頁面結構

頁面結構的編寫比如蓋房的地基建設，其好壞會直接影響到CSS代碼的質量、js開發、後臺開發還會影響到之後的頁面拓展、迭代和頁面調整。拿到視覺稿後，不要忙着動手開始，多觀察思考。先分析佈局，劃分框架，而後規劃結構，編寫代碼。特別在大型項目中，合理使用模塊化的開發不論從總體進行仍是拓展維護都有至關大的好處。

關於hack

不少同窗在頁面開發時上網搜索最多的就是hack了，是否咱們徹底要依賴hack來實現頁面兼容性，答案是否認的。你們常常比喻IE6向咱們撒了一個謊，結果咱們要再撒一百個謊來圓這個謊。不否定IE6常常讓咱們口吐鮮血，但不表明咱們用更多的「謊話」來彌補就能夠問心無愧。大部分狀況下能夠經過變換思路調整HTML結構，或使用一些雖然沒法解釋但相對安全的css來幹掉hack。誰都沒法預計使用hack何時會讓咱們栽一個大跟頭。好比觸發layout或position:relative就能夠幫助解決不少IE6的問題。

優美的代碼

如今不少web項目功能複雜，代碼規模也變得很龐大，如何更好地進行協同開發和維護是咱們面臨的一個問題。須要考慮完善統一的規劃，還有要養成良好的代碼開發習慣纔會在面臨各類狀況時遊刃有餘。翻閱頁面代碼，看到合理的標籤使用、良好的註釋、清晰的代碼結構、用意準確的css，不只猶如欣賞一個藝術品，更爲下游開發和協同開發下降了不小的溝通成本，咱們有什麼理由不去這麼作呢?舉個反面例子：div濫用是如今比較典型的一個問題。數數看本身使用的標籤有多少個呢?不一樣的語義都該使用對應的標籤代碼，特別是HTML5提供了更豐富的語義化標籤，它們都苦苦地在等待戰場上的衝鋒號，讓咱們去解放它們吧!

無障礙頁面開發

可訪問性與易用性是很是主觀且人性化的東西。普通人看上去上完美呈現的頁面在特殊羣體中不必定顯得那麼貼心。當盲人用讀屏軟件在頁面某個區域內陷入循環時，咱們應該感到內疚。只能說目前國內網站對此的重視程度還遠遠不夠，這就須要咱們共同努力，讓更多的人感覺到咱們的熱情。

保障效率

做爲項目開發中比較靠前的一環，頁面開發可能須要儘早完成爲項目爭取時間，這就須要咱們儘量提升效率。「工欲善其事，必先利其器」，除了實戰經驗和代碼習慣的造成能夠幫助咱們提升效率外，想要提升對本身開發的進度掌控能力，還有不少輔助工具幫助咱們進行頁面開發。好比使用Less或Sass能夠幫助咱們拓展和組織CSS，大大提升CSS的編寫效率，增長可維護性。好比能夠經過zen coding的自動完成和自定義代碼塊讓你能夠劍指如飛。甚至還見過經過自定義輸入法的代碼塊關鍵字來提高開發速度的。多多發掘，必定會找到最合適本身使用的工具。

針對服務器的優化

頁面開發也須要了解服務器優化，儘可能減少服務器負擔。好比css sprite就是一個典型減少服務器請求數的例子。在網易郵箱的頁面前端開發中你們不停地作着各類優化，好比一直在尋求文件大小與服務器請求數的平衡;爲了儘量提升緩存利用率採用了補丁升級;對class名進行了混淆壓縮避免命名過長的冗餘;應用base64減小請求數量等等措施。這些都是綜合權衡的結果，須要考慮各個方面總體優化。由於當頁面訪問量達到必定的數量級時，再小的一點優化都會達到可觀的效果，再小的問題均可能會造成巨大的災難。

擁抱HTML5

這是一個充滿機會的時代，HTML5時代的來臨伴隨着移動互聯網的興起，創造了更大的機會，還有太多的東西值得咱們去學習去發現。HTML5提供了豐富的JS API接口，須要咱們去研究;CSS3的絢麗吸引了足夠多的眼球，須要咱們去研究;移動設備上如何開發更加適配的頁面，須要咱們去研究……

總之一句：‘learn little  use every where’.

 

（PHP開發、web前端、UI設計、VR開發專業培訓機構--V客IT學院版權全部，轉載請註明出處，謝謝合做！）