浅谈web前端开发
? ? ? ?有部分同學和朋友問到過我相關問題，利用周末我就淺淺地談談我對web前端開發的理解和體會，只能淺淺談談，高手請自動跳過本篇文章。畢竟我現在經驗并不是很足，連工程師都算不上，更不用說大牛了。今天也不談技術，技術很多人比我掌握得更好，也大同小異，但是每個人的理解體會是不一樣的。
? ? ?對前端開發的三個總體理解和體會
? ? ? ?我對前端開發的總體體會有三：
? ? ? ?第一：雜而難，難度甚至超過了一般的后臺開發，如果有人覺得前端開發簡單只能說明他還沒有入門。
? ? ? ?第二：web前端開發正在向響應式和移動端方向大步邁進。
? ? ? ?第三：前端工程師其實就是編程技術人員，用一句話來形容“比UI設計懂技術，比技術人員更懂交互”，當然也有人說前端工程師是工程師中的設計師，是設計師中的工程師。既然是編程工作，那就不會做一輩子，畢竟太累。認真敲幾年代碼然后去賣水果吧，還望師弟師妹們來照顧我生意。
? ? ? ?網頁制作與web前端開發
? ? ? ?前端開發工程師是一個比較新的職業，在國內乃至國際上開始受到重視的時間不超過幾年。互聯網進入2.0時代后，web開發技術得到了空前的發展，尤其是前端技術。近幾年，隨著用戶對體驗的要求越來越高，前端開發技術難度也越來越大。曾經設計和制作不分的職位也終于分為UI設計師和web前端開發工程師（前端開發師）兩個職位，分別向藝術和技術的方向縱向發展。
? ? ? ?從技術體系上講，前端開發師需要掌握和了解的東西非常多，有些大牛用龐雜來形容。
? ? ? ?幾年前，還沒有前端開發的時候我們叫做網頁制作，主要內容都是靜態的頁面，用戶也是以瀏覽為主，而現在發生了翻天覆地的變化，網頁不再只是承載單一的文字和圖片，各種富媒體讓頁面內容更加生動，更注重用戶體驗。
? ? ? ?以前會平面設計軟件、DW和簡單的HTML、CSS、JS就可以制作網頁，現在只掌握這些已經遠遠不夠了，如果只掌握這些連工作機會都很少。無論是開發難度，還是開發方式，現在的web前端開發都接近傳統的網站后臺開發，我覺得比一般的后臺開發更復雜。一個網站或者移動應用是否專業、功能是否強大。服務器端是用J2EE+Oracle組合還是ASP+Access組合，并沒有太明顯的區別，但是，前端的用戶體驗卻給了用戶直觀的印象。所以現在不僅僅是網頁制作，而是web前端開發。大部分人認為是web前端開發取代了以前的網頁制作，我認為現在網頁制作和web前端開發的崗位同時存在。如果僅僅掌握以前網頁制作的技術，那么現在還是叫網頁制作師（我在招聘網頁上也看到不少網頁制作師這個崗位），并不能稱之為web前端工程師。
? ? ? ?Web前端開發一般要掌握哪些技術和具備哪些條件？
? ? ? ?第一、要掌握曾經網頁制作師掌握的基本技術。如各種頁面布局，面向對象編程，JS模塊化編程，設計模式，前端MVC等等。
? ? ? ?第二、網站性能優化，SEO。如盡量減少HTTP請求次數、cssSprites圖片整合技術、合并css與js、運用CDN技術。減少DNS查找次數、避免重定向等。
? ? ? ?第三、要會UI設計。當然在一些相對較小的公司前端工程師也擔任著UI設計的角色。在大公司雖然有專業的UI設計師，但是前端工程師會UI設計能幫助你更準確的理解設計師的意圖，在原型不完整的時候也能正確的反饋設計缺陷，將問題阻擋在設計的環節，會大大減少UI bug數量，比如，設計師會給出理想狀態下的容器樣式，卻往往忽略了文字溢出折行、長連續字符、容器寬高是否適應內容尺寸變化而變化，溢出部分是作截字還是隱藏等諸多細節，因為設計師不一定懂“邊界值測試”的道理，而這些問題往往在測試階段才被發現，所以，如果能在拿到UI設計稿時就提醒設計師補充完整這些場景，自然減少測試回歸次數。
? ? ? 第四、至少要會一門后臺編程語言。職業的特殊性決定了我們需要跟后端工作者頻繁的溝通。如果只顧頁面實現，不考慮后臺，寫出來的頁面也有一部分是廢棄代碼，在后臺進行數據交互的時候用不了。還有一方面就是從招聘信息可以得知，現在幾乎所有公司前端開發崗位都明確要求會后臺語言，在實際工作中可能也要做客戶端和服務器端之間的數據交互等。
? ? ? 第五、掌握各種瀏覽器兼容解決辦法。國內和國際主流瀏覽器種類多，內核不統一，如以Trident為內核的IE、以Gecko為內核的FireFox、以Presto為內核的Opera、以Webkit為內核的google chrome和Safari等，這給我們前端開發增加了很多困難，也是大多數人頭疼的事情，且不說目前市面在有這么多的瀏覽器，就僅僅單一的IE系列家族的問題也夠多的了，特別是IE6，IE7。下圖是本月對上個月全球瀏覽器市場統計排行，IE瀏覽器用戶任然超過百分之五十。盡管2016年1月起，微軟將停止對舊版IE瀏覽器的支持。【微軟相關原新聞鏈接請猛擊這里】?但是我相信最近很多年之內IE低版本瀏覽器還是會占比較大的比例，消亡還需時日。
? ? ? 第六、必須學會運用各種工具進行輔助開發。
? ? ? 第七、除了掌握技術層面的知識，還有掌握理論層面的知識。包括渲染原理，代碼的可維護性，組件的易用性，分層語義模板等等。
? ? ? 第八、要有細心和耐心。和UI設計一樣，我們必須精確到每一個像素，耐心也體現在多方面，比如讓初期開發者頭疼的兼容問題，如果編碼不夠規范，解決兼容問題的時間遠遠超過了頁面實現的時間。
? ? ? 第九、熱愛并不斷學習新技術。前端幾乎每天都有新技術產生，從事這一行，在打牢基礎的情況下要不斷學習新技術。包括開發流程部署，預處理技術，前端框架(如RequireJS、ReactJS、AngularJS等等)，移動終端，標準規范等。
? ? ??淺談自己的體會
? ? ? ?與服務器端語言先慢后快的學習曲線相比，前端開發的學習曲線是先快后慢。所以現在有很多學生或者已從事工作了的人都開始想涌入web前端開發的潮流，并自學成“才”，但我知道大多數人都停留在會用的階段，因為要想成為一名真正的web前端開發師每前進一步都很難。盡管有的人每天都利用工作之余學習，卻還是學不精，于是處于糾結迷茫的狀態。另一方面，正如開篇所說，這還是一個比較新的職業，對一些規范和最佳實踐的研究都處于探索階段，一些新的技術隨時都會閃現出來，例如：瀏覽器大戰也越來越白熱化，跨瀏覽器兼容方案依然五花八門，目前我所在的公司一般要求我們兼容到IE7，以前經常遇到這種情況，好不容易把IE各個版本都兼容了，高興之余又發現在360瀏覽器上出現了bug，沒辦法，熬夜奮戰唄。
? ? ? ?前端開發工程師是一個易學難精的職業，我們必須深入、系統地學習并掌握前端知識，如果簡單地自學一下就能成為web前端工程師，那我想現在市場上也不會出現高薪找不到前端工程師的情況了。有經驗的web前端開發工程師都知道，要精通這一行，必須先精通十行。有一些有經驗的前端工程師，在不斷尋求新的技能上的突破，最明顯的一點體現是，開始關注“底層協議”，即HTTP、第三方應用、系統對接、制造工具、工作流程等，這時思考的重點已經脫離了“切頁面”，變為“出方案“，比如要架設一個站點，能夠搭建站點框架，預見站點后續（前端）開發中的所有風險，并一一給出解決方案。
? ? ? ?說說半路出家的危與機，俗話說，隔行入隔山。每個行業自有其道，自然不是想做就做。前端技術領域半路出家者非常多，我們來分析一下轉行的心理。第一，看到前端技術入門簡單、互聯網對前端技術的需求缺口大；第二，前端技術所見即所得、感覺學習起來很快；第三，我身邊的某某轉行作前端看上去不錯、我似乎也可以；第四，我不喜歡我現在做的工作、想換行業、正好前端技術上手較快，就選他吧；當然還有第五，我的確了解并喜歡做Web前端，為它付出再多都是值得的。
? ? ? ?新進入這一行或者轉行者的心態比較容易走兩個極端，一是只看到新行業的好，二是只覺得原工作很糟糕。但不管是什么行業，對自己的職業規劃的思考都應當先行一步。進入這一行必須先清晰的回答這些問題：
? ? ? 1.我能做什么？
? ? ??2.我不能做什么？
? ? ??3.我的優勢是什么？
? ? ??4.我的劣勢是什么？
? ? ??5.做這一行對我有何好處？
? ? ??6.做這一行會讓我付出何種代價？
? ? ??7.如何定義成功？
? ? ??因為面試的時候一定會被這些問題所挑戰。如果支支吾吾說不清楚，要么是對自己未來不負責任，要么骨子里就是草根一族，習慣做什么都蜻蜓點水淺嘗輒止，也難讓人信服你進入這一行是一個權衡再三看起來合理的選擇。
? ? ?相關誤區解釋
? ? ??有人認為前端工程師上班不干別的，就是玩，弄點效果，攢兩頁面，搞點創新。當然這個表述非常輕巧、甚至有調侃的味道，web前端工作絕對不是玩那么簡單的，更不像曾經的網頁制作那么單一，有時候會為一些效果的實現或優化，弄得加班加點。上周還因為解決一個問題花了2天的時間，慚愧啊。所以前端開發是一項很特殊的工作，前端工程師的工作說得輕松，看似輕巧，但做起來絕對不是那么的簡單。在開發過程中涵蓋的東西非常寬廣，既要從技術的角度來思考界面的實現，規避技術的死角，又要從用戶的角度來思考，怎樣才能更好地接受技術呈現的枯燥的數據，更好的呈現信息。
? ? ??在入行初期，很多人過于著迷，從而陷入了迷途。比如有人糾結于是否將dt、dd的樣式清除從reset.css中拿掉，原因是覺得這兩個標簽的清除樣式會耗費一些渲染性能；或者是否需要將for循環改為while循環以提高js執行速度。盡管這些考慮看上去是合理的，但并不是性能的瓶頸所在，也就是說，你花了很大力氣重構的代碼帶來的頁面性能提升，往往還不如將兩個css文件合成一個帶來的提升明顯。就好比用一把米尺量東西，沒必要精確到小數點后10位，因為精確到小數點后2位就已經是不準確的了。這種技術誤區常常讓人撿了芝麻丟了西瓜。
? ? ?對自己學習和工作的要求
? ? ??N.C.Zakas曾經勉勵過大家，現在成為了我對自己的要求和對已結確定要走Web前端開發方向的人的建議：熱愛你的工作。熱愛跨瀏覽器開發帶來的挑戰、熱愛互聯網技術的種種異端，熱愛業內的同行，熱愛你的工具。互聯網發展太快了，如果你不熱愛它的話，不可能跟上它的步伐。這意味著你必須多閱讀，多動手，保證自己的才能與日俱增。要為如何編寫易于維護、高質量的前端代碼奮斗。下了班也不能閑著，要做一些對自己有用的事兒。可以參與一些開源軟件的開發，讀讀好書，看看牛人的博客。經常參加一些會議，看看別人都在干什么。要想讓自己快速成長，有很多事兒可以去做，相信付出一定會有回報。
? ? ? ? ?這次就分享到這里，一個上午就這樣過去了，餓了，該去做中午飯了。關于前端開發具體相關技術和具體怎么學習發展下次我會繼續分享。
? ? ? ? ?最后，因時間倉促，資質有限，文中表述僅代表個人觀點，不準確的地方還望見諒，歡迎嚴厲地指正。
總結
- 上一篇： javascript中not defin
- 下一篇： min-width、max-width兼