淺談web前端開發

標籤：搭建   360瀏覽器   前端   布局   b前端開發   post   .sh   職業   方式   

       有部分同學和朋友問到過我相關問題。利用周末我就淺淺地談談我對web前端開發的理解和體會，僅僅能淺淺談談，高手請自己主動跳過本篇文章。

畢竟我如今經驗並非非常足，連project師都算不上，更不用說大牛了。今天也不談技術。技術非常多人比我掌握得更好，也大同小異。可是每一個人的理解體會是不一樣的。

     對前端開發的三個整體理解和體會

       我對前端開發的整體體會有三：

       第一：雜而難，難度甚至超過了一般的後台開發，假設有人認為前端開發簡單僅僅能說明他還沒有入門。

       第二：web前端開發正在向響應式和移動端方向大步邁進。

       第三：前端project師事實上就是編程技術人員，用一句話來形容“比UI設計懂技術，比技術人員更懂互動”。當然也有人說前端project師是project師中的設計師，是設計師中的project師。既然是編程工作。那就不會做一輩子。畢竟太累。認真敲幾年代碼然後去賣水果吧，還望師弟師妹們來照應我生意。

       網頁製作與web前端開發

       前端開發project師是一個比較新的職業。在國內乃至國際上開始受到重視的時間不超過幾年。互連網進入2.0時代後，web開發技術得到了空前的發展，尤其是前端技術。近幾年，隨著使用者對體驗的要求越來越高，前端開發技術難度也越來越大。以前設計和製作不分的職位也最終分為UI設計師和web前端開發project師（前端開發師）兩個職位。分別向藝術和技術的方向縱向發展。

       從技術體繫上講，前端開發師須要掌握和瞭解的東西許多。有些大牛用龐雜來形容。

       幾年前，還沒有前端開發的時候我們叫做網頁製作，主要內容都是靜態頁面。使用者也是以瀏覽為主，而如今發生了翻天覆地的變化，網頁不再僅僅是承載單一的文字和圖片，各種富媒體讓頁面內容更加生動，更注重使用者體驗。

       曾經會平面設計軟體、DW和簡單的HTML、CSS、JS就能夠製作網頁，如今只掌握這些已經遠遠不夠了，假設只掌握這些連工作機會都非常少。不管是開發難度。還是開發方式。如今的web前端開發都接近傳統的網站後台開發。我覺得比一般的後台開發更複雜。一個網站或者行動裝置 App是否專業、功能是否強大。server端是用J2EE+Oracle組合還是ASP+Access組合。並沒有太明顯的差別，可是，前端的使用者體驗卻給了使用者直觀的印象。所以如今不不過網頁製作。而是web前端開發。大部分人覺得是web前端開發代替了曾經的網頁製作，我覺得如今網頁製作和web前端開發的崗位同一時候存在。

假設只掌握曾經網頁製作的技術，那麼如今還是叫網頁製作師（我在招聘網頁上也看到不少網頁製作師這個崗位），並不能稱之為web前端project師。

       Web前端開發一般要掌握哪些技術和具備哪些條件？

       第一、要掌握以前網頁製作師掌握的基本技術。如各種頁面配置，物件導向編程，JS模組化編程。設計模式，前端MVC等等。

       第二、網站效能最佳化，SEO。如盡量降低HTTP請求次數、cssSprites圖片整合技術、合并css與js、運用CDN技術。降低DNS尋找次數、避免重新導向等。

       第三、要會UI設計。當然在一些相對較小的公司前端project師也擔任著UI設計的角色。在大公司儘管有專業的UI設計師，可是前端project師會UI設計能協助你更準確的理解設計師的意圖。在原型不完整的時候也能正確的反饋設計缺陷，將問題阻擋在設計的環節，會大大降低UI bug數量。比方。設計師會給出理想狀態下的容器樣式，卻往往忽略了文字溢出折行、長連續字元、容器寬高是否適應內容尺寸變化而變化，溢出部分是作截字還是隱藏等諸多細節，由於設計師不一定懂“邊界值測試”的道理，而這些問題往往在測試階段才被發現，所以，假設能在拿到UI設計稿時就提醒設計師補充完整這些情境，自然降低測試迴歸次數。

      第四、至少要會一門後台程式設計語言。職業的特殊性決定了我們須要跟後端工作者頻繁的溝通。假設僅僅顧頁面實現，不考慮後台。寫出來的頁面也有一部分是廢棄代碼，在後台進行資料互動的時候用不了。另一方面就是從招聘資訊能夠得知。如今差點兒全部公司前端開發崗位都明白要求會後台語言，在實際工作中可能也要做client和server端之間的資料互動等。

      第五、掌握各種瀏覽器安全色解決的方法。國內和國際主流瀏覽器種類多，核心不統一，如以Trident為核心的IE、以Gecko為核心的FireFox、以Presto為核心的Opera、以Webkit為核心的google chrome和Safari等。這給我們前端開發添加了非常多困難，也是大多數人頭疼的事情。且不說眼下市面在有這麼多的瀏覽器，就只單一的IE系列家族的問題也夠多的了，特別是IE6，IE7。是本月對上個月全球瀏覽器市場統計排行，IE瀏覽器使用者任然超過百分之五十。雖然2016年1月起，微軟將停止對舊版IE瀏覽器的支援。【微軟相關原新聞連結請猛擊這裡】 可是我相信近期非常多年之內IE低版本號碼瀏覽器還是會佔比較大的比例。消亡還需時日。

      第六、必須學會運用各種工具進行輔助開發。

      第七、除了掌握技術層面的知識。還有掌握理論層面的知識。包含渲染原理。代碼的可維護性，組件的易用性。分層語義模板等等。

      第八、要有細心和耐心。和UI設計一樣，我們必須精確到每個像素，耐心也體如今多方面，比方讓初期開發人員頭疼的相容問題，假設編碼不夠規範，解決相容問題的時間遠遠超過了頁面實現的時間。

      第九、熱愛並不斷學習新技術。

前端差點兒每天都有新技術產生，從事這一行，在打牢基礎的情況下要不斷學習新技術。包含開發流程部署，預先處理技術，前端架構(如RequireJS、ReactJS、AngularJS等等)，移動終端，標準規範等。

      淺談自己的體會

       與server端語言先慢後快的學習曲線相比，前端開發的學習曲線是先快後慢。所以如今有非常多學生或者已從事工作了的人都開始想湧入web前端開發的潮流，並自學成“才”。但我知道大多數人都停留在會用的階段。由於要想成為一名真正的web前端開發師每前進一步都非常難。雖然有的人每天都利用工作之餘學習。卻還是學不精，於是處於糾結迷茫的狀態。還有一方面，正如開篇所說。這還是一個比較新的職業，對一些規範和最佳實務的研究都處於探索階段，一些新的技術隨時都會閃現出來，比如：瀏覽器大戰也越來越白熱化，跨瀏覽器安全色方案依舊五花八門，眼下我所在的公司一般要求我們相容到IE7，曾經常常遇到這樣的情況。好不easy把IE各個版本號碼都相容了，高興之餘又發如今360瀏覽器上出現了bug。沒辦法，熬夜奮戰唄。

       前端開發project師是一個易學難精的職業，我們必須深入、系統地學習並掌握前端知識，假設簡單地自學一下就能成為web前端project師。那我想如今市場上也不會出現高薪找不到前端project師的情況了。有經驗的web前端開發project師都知道，要精通這一行，必須先精通十行。有一些有經驗的前端project師，在不斷尋求新的技能上的突破，最明顯的一點體現是。開始關注“底層協議”，即HTTP、第三方應用、系統對接、製造工具、工作流程等，這時思考的重點已經脫離了“切頁面”，變為“出方案“，比方要架設一個網站，可以搭建網站架構，預見網站興許（前端）開發中的全部風險。並一一給出解決方式。

       說說半路出家的危與機，俗話說。隔行入隔山。每一個行業自有其道。自然不是想做就做。

前端技術領域半路出家者非常多，我們來分析一下轉行的心理。

第一。看到前端技術入門簡單、互連網對前端技術的需求缺口大；第二，前端技術所見即所得 (WYSIWYG)、感覺學習起來非常快；第三。我身邊的某某轉行作前端看上去不錯、我似乎也能夠。第四，我不喜歡我如今做的工作、想換行業、正好前端技術上手較快。就選他吧；當然還有第五，我的確瞭解並喜歡做Web前端。為它付出再多都是值得的。

       新進入這一行或者轉行者的心態比較easy走兩個極端。一是僅僅看到新行業的好，二是僅僅認為原工作非常糟糕。

但無論是什麼行業，對自己的職業規劃的思考都應當先行一步。進入這一行必須先清晰的回答這些問題：

      1.我能做什嗎？

      2.我不能做什嗎？

      3.我的優勢是什嗎？

      4.我的劣勢是什嗎？

      5.做這一行對我有何優點？

      6.做這一行會讓我付出何種代價？

      7.怎樣定義成功？

      由於面試的時候一定會被這些問題所挑戰。假設支支吾吾說不清楚，要麼是對自己未來不負責任，要麼骨子裡就是草根一族，習慣做什麼都蜻蜓點水淺嘗輒止。也難讓人信服你進入這一行是一個權衡再三看起來合理的選擇。

     相關誤區解釋

      有人覺得前端project師上班不幹別的。就是玩，弄點效果。攢兩頁面，搞點創新。當然這個表述很輕巧、甚至有調侃的味道，web前端工作絕對不是玩那麼簡單的。更不像以前的網頁製作那麼單一，有時候會為一些效果的實現或最佳化，弄得加班加點。上周還由於解決一個問題花了2天的時間。羞愧啊。

所以前端開發是一項很特殊的工作，前端project師的工作說得輕鬆，看似輕巧，但做起來絕對不是那麼的簡單。在開發過程中涵蓋的東西很寬廣，既要從技術的角度來思考介面的實現，規避技術的死角，又要從使用者的角度來思考，如何才幹更好地接受技術呈現的枯燥的資料，更好的呈現資訊。

      在入行初期。非常多人過於著迷。從而陷入了迷途。比方有人糾結於是否將dt、dd的樣式清除從reset.css中拿掉，原因是認為這兩個標籤的清除樣式會耗費一些渲染效能。或者是否須要將for迴圈改為while迴圈以提高js運行速度。雖然這些考慮看上去是合理的，但並非效能的瓶頸所在，也就是說。你花了非常大力氣重構的代碼帶來的頁面效能提升，往往還不如將兩個css檔案合成一個帶來的提升明顯。就好比用一把米尺量東西，不是必需精確到小數點後10位，由於精確到小數點後2位就已經是不準確的了。這樣的技術誤區經常讓人撿了芝麻丟了西瓜。

     對自己學習和工作的要求

      N.C.Zakas以前勉勵過大家，如今成為了我對自己的要求和對已結確定要走Web前端開發方向的人的建議：熱愛你的工作。熱愛跨瀏覽器開發帶來的挑戰、熱愛互連網技術的種種異端，熱愛業內的同行，熱愛你的工具。互連網發展太快了，假設你不熱愛它的話，不可能跟上它的步伐。

這意味著你必須多閱讀。多動手，保證自己的才幹與日俱增。要為怎樣編寫易於維護、高品質的前端代碼奮鬥。

下了班也不能閑著。要做一些對自己實用的事兒。

能夠參與一些開源軟體的開發，讀讀好書，看看牛人的部落格。常常參加一些會議，看看別人都在幹什麼。

要想讓自己高速成長，有非常多事兒能夠去做，相信付出一定會有回報。

         這次就分享到這裡。一個上午就這樣過去了，餓了，該去做中午飯了。關於前端開發詳細相關技術和詳細怎麼學習發展下次我會繼續分享。

         最後，因時間倉促。資質有限，文中表述僅代表個人觀點，不準確的地方還望見諒，歡迎嚴厲地指正。

淺談web前端開發