有部分同學(xué)和朋友問(wèn)到過(guò)我相關(guān)問(wèn)題。利用周末我就淺淺地談?wù)勎覍?duì)web前端開(kāi)發(fā)的理解和體會(huì)，僅僅能淺淺談?wù)?，高手?qǐng)自己主動(dòng)跳過(guò)本篇文章。

畢竟我如今經(jīng)驗(yàn)并非非常足，連project師都算不上，更不用說(shuō)大牛了。今天也不談技術(shù)。技術(shù)非常多人比我掌握得更好，也大同小異?？墒敲恳粋€(gè)人的理解體會(huì)是不一樣的。

1、對(duì)前端開(kāi)發(fā)的三個(gè)整體理解和體會(huì)

我對(duì)前端開(kāi)發(fā)的整體體會(huì)有三：

第一：雜而難，難度甚至超過(guò)了一般的后臺(tái)開(kāi)發(fā)，假設(shè)有人認(rèn)為前端開(kāi)發(fā)簡(jiǎn)單僅僅能說(shuō)明他還沒(méi)有入門(mén)。

第二：web前端開(kāi)發(fā)正在向響應(yīng)式和移動(dòng)端方向大步邁進(jìn)。

第三：前端project師事實(shí)上就是編程技術(shù)人員，用一句話(huà)來(lái)形容“比UI設(shè)計(jì)懂技術(shù)，比技術(shù)人員更懂交互”。當(dāng)然也有人說(shuō)前端project師是project師中的設(shè)計(jì)師，是設(shè)計(jì)師中的project師。既然是編程工作。那就不會(huì)做一輩子。畢竟太累。認(rèn)真敲幾年代碼然后去賣(mài)水果吧，還望師弟師妹們來(lái)照應(yīng)我生意。

2、網(wǎng)頁(yè)制作與web前端開(kāi)發(fā)

前端開(kāi)發(fā)project師是一個(gè)比較新的職業(yè)。在國(guó)內(nèi)乃至國(guó)際上開(kāi)始受到重視的時(shí)間不超過(guò)幾年?；ヂ?lián)網(wǎng)進(jìn)入2.0時(shí)代后，web開(kāi)發(fā)技術(shù)得到了空前的發(fā)展，尤其是前端技術(shù)。近幾年，隨著用戶(hù)對(duì)體驗(yàn)的要求越來(lái)越高，前端開(kāi)發(fā)技術(shù)難度也越來(lái)越大。以前設(shè)計(jì)和制作不分的職位也最終分為UI設(shè)計(jì)師和web前端開(kāi)發(fā)project師（前端開(kāi)發(fā)師）兩個(gè)職位。分別向藝術(shù)和技術(shù)的方向縱向發(fā)展。

從技術(shù)體系上講，前端開(kāi)發(fā)師須要掌握和了解的東西許多。有些大牛用龐雜來(lái)形容。

幾年前，還沒(méi)有前端開(kāi)發(fā)的時(shí)候我們叫做網(wǎng)頁(yè)制作，主要內(nèi)容都是靜態(tài)的頁(yè)面。用戶(hù)也是以瀏覽為主，而如今發(fā)生了翻天覆地的變化，網(wǎng)頁(yè)不再僅僅是承載單一的文字和圖片，各種富媒體讓頁(yè)面內(nèi)容更加生動(dòng)，更注重用戶(hù)體驗(yàn)。

曾經(jīng)會(huì)平面設(shè)計(jì)軟件、DW和簡(jiǎn)單的HTML、CSS、JS就能夠制作網(wǎng)頁(yè)，如今只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了，假設(shè)只掌握這些連工作機(jī)會(huì)都非常少。不管是開(kāi)發(fā)難度。還是開(kāi)發(fā)方式。如今的web前端開(kāi)發(fā)都接近傳統(tǒng)的站點(diǎn)后臺(tái)開(kāi)發(fā)。我覺(jué)得比一般的后臺(tái)開(kāi)發(fā)更復(fù)雜。一個(gè)站點(diǎn)或者移動(dòng)應(yīng)用是否專(zhuān)業(yè)、功能是否強(qiáng)大。server端是用J2EE+Oracle組合還是ASP+Access組合。并沒(méi)有太明顯的差別，可是，前端的用戶(hù)體驗(yàn)卻給了用戶(hù)直觀的印象。所以如今不不過(guò)網(wǎng)頁(yè)制作。而是web前端開(kāi)發(fā)。大部分人覺(jué)得是web前端開(kāi)發(fā)代替了曾經(jīng)的網(wǎng)頁(yè)制作，我覺(jué)得如今網(wǎng)頁(yè)制作和web前端開(kāi)發(fā)的崗位同一時(shí)候存在。

假設(shè)只掌握曾經(jīng)網(wǎng)頁(yè)制作的技術(shù)，那么如今還是叫網(wǎng)頁(yè)制作師（我在招聘網(wǎng)頁(yè)上也看到不少網(wǎng)頁(yè)制作師這個(gè)崗位），并不能稱(chēng)之為web前端project師。

3、Web前端開(kāi)發(fā)一般要掌握哪些技術(shù)和具備哪些條件？

第一、要掌握以前網(wǎng)頁(yè)制作師掌握的基本技術(shù)。如各種頁(yè)面布局，面向?qū)ο缶幊蹋?/span>JS模塊化編程。設(shè)計(jì)模式，前端MVC等等。

第二、站點(diǎn)性能優(yōu)化，SEO。如盡量降低HTTP請(qǐng)求次數(shù)、cssSprites圖片整合技術(shù)、合并css與js、運(yùn)用CDN技術(shù)。降低DNS查找次數(shù)、避免重定向等。

第三、要會(huì)UI設(shè)計(jì)。當(dāng)然在一些相對(duì)較小的公司前端project師也擔(dān)任著UI設(shè)計(jì)的角色。在大公司盡管有專(zhuān)業(yè)的UI設(shè)計(jì)師，可是前端project師會(huì)UI設(shè)計(jì)能幫助你更準(zhǔn)確的理解設(shè)計(jì)師的意圖。在原型不完整的時(shí)候也能正確的反饋設(shè)計(jì)缺陷，將問(wèn)題阻擋在設(shè)計(jì)的環(huán)節(jié)，會(huì)大大降低UI bug數(shù)量。比方。設(shè)計(jì)師會(huì)給出理想狀態(tài)下的容器樣式，卻往往忽略了文字溢出折行、長(zhǎng)連續(xù)字符、容器寬高是否適應(yīng)內(nèi)容尺寸變化而變化，溢出部分是作截字還是隱藏等諸多細(xì)節(jié)，由于設(shè)計(jì)師不一定懂“邊界值測(cè)試”的道理，而這些問(wèn)題往往在測(cè)試階段才被發(fā)現(xiàn)，所以，假設(shè)能在拿到UI設(shè)計(jì)稿時(shí)就提醒設(shè)計(jì)師補(bǔ)充完整這些場(chǎng)景，自然降低測(cè)試回歸次數(shù)。

第四、至少要會(huì)一門(mén)后臺(tái)編程語(yǔ)言。職業(yè)的特殊性決定了我們須要跟后端工作者頻繁的溝通。假設(shè)僅僅顧頁(yè)面實(shí)現(xiàn)，不考慮后臺(tái)。寫(xiě)出來(lái)的頁(yè)面也有一部分是廢棄代碼，在后臺(tái)進(jìn)行數(shù)據(jù)交互的時(shí)候用不了。另一方面就是從招聘信息能夠得知。如今差點(diǎn)兒全部公司前端開(kāi)發(fā)崗位都明白要求會(huì)后臺(tái)語(yǔ)言，在實(shí)際工作中可能也要做client和server端之間的數(shù)據(jù)交互等。

第五、掌握各種瀏覽器兼容解決的方法。國(guó)內(nèi)和國(guó)際主流瀏覽器種類(lèi)多，內(nèi)核不統(tǒng)一，如以Trident為內(nèi)核的IE、以Gecko為內(nèi)核的FireFox、以Presto為內(nèi)核的Opera、以Webkit為內(nèi)核的google chrome和Safari等。這給我們前端開(kāi)發(fā)添加了非常多困難，也是大多數(shù)人頭疼的事情。且不說(shuō)眼下市面在有這么多的瀏覽器，就只單一的IE系列家族的問(wèn)題也夠多的了，特別是IE6，IE7。IE瀏覽器用戶(hù)任然超過(guò)百分之五十。雖然2016年1月起，微軟將停止對(duì)舊版IE瀏覽器的支持可是我相信近期非常多年之內(nèi)IE低版本號(hào)瀏覽器還是會(huì)占比較大的比例。消亡還需時(shí)日。

 第六、必須學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開(kāi)發(fā)。

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

第八、要有細(xì)心和耐心。和UI設(shè)計(jì)一樣，我們必須精確到每個(gè)像素，耐心也體如今多方面，比方讓初期開(kāi)發(fā)人員頭疼的兼容問(wèn)題，假設(shè)編碼不夠規(guī)范，解決兼容問(wèn)題的時(shí)間遠(yuǎn)遠(yuǎn)超過(guò)了頁(yè)面實(shí)現(xiàn)的時(shí)間。

第九、熱愛(ài)并不斷學(xué)習(xí)新技術(shù)。

前端差點(diǎn)兒每天都有新技術(shù)產(chǎn)生，從事這一行，在打牢基礎(chǔ)的情況下要不斷學(xué)習(xí)新技術(shù)。包含開(kāi)發(fā)流程部署，預(yù)處理技術(shù)，前端框架(如RequireJS、ReactJS、AngularJS等等)，移動(dòng)終端，標(biāo)準(zhǔn)規(guī)范等。

4、淺談自己的體會(huì)

與server端語(yǔ)言先慢后快的學(xué)習(xí)曲線(xiàn)相比，前端開(kāi)發(fā)的學(xué)習(xí)曲線(xiàn)是先快后慢。所以如今有非常多學(xué)生或者已從事工作了的人都開(kāi)始想涌入web前端開(kāi)發(fā)的潮流，并自學(xué)成“才”。但我知道大多數(shù)人都停留在會(huì)用的階段。由于要想成為一名真正的web前端開(kāi)發(fā)師每前進(jìn)一步都非常難。雖然有的人每天都利用工作之余學(xué)習(xí)。卻還是學(xué)不精，于是處于糾結(jié)迷茫的狀態(tài)。

還有一方面，正如開(kāi)篇所說(shuō)。這還是一個(gè)比較新的職業(yè)，對(duì)一些規(guī)范和最佳實(shí)踐的研究都處于探索階段，一些新的技術(shù)隨時(shí)都會(huì)閃現(xiàn)出來(lái)，比如：瀏覽器大戰(zhàn)也越來(lái)越白熱化，跨瀏覽器兼容方案依舊五花八門(mén)，眼下我所在的公司一般要求我們兼容到IE7，曾經(jīng)常常遇到這樣的情況。好不easy把IE各個(gè)版本號(hào)都兼容了，高興之余又發(fā)如今360瀏覽器上出現(xiàn)了bug。沒(méi)辦法，熬夜奮戰(zhàn)唄。

前端開(kāi)發(fā)project師是一個(gè)易學(xué)難精的職業(yè)，我們必須深入、系統(tǒng)地學(xué)習(xí)并掌握前端知識(shí)，假設(shè)簡(jiǎn)單地自學(xué)一下就能成為web前端project師。那我想如今市場(chǎng)上也不會(huì)出現(xiàn)高薪找不到前端project師的情況了。有經(jīng)驗(yàn)的web前端開(kāi)發(fā)project師都知道，要精通這一行，必須先精通十行。有一些有經(jīng)驗(yàn)的前端project師，在不斷尋求新的技能上的突破，最明顯的一點(diǎn)體現(xiàn)是。開(kāi)始關(guān)注“底層協(xié)議”，即HTTP、第三方應(yīng)用、系統(tǒng)對(duì)接、制造工具、工作流程等，這時(shí)思考的重點(diǎn)已經(jīng)脫離了“切頁(yè)面”，變?yōu)椤俺龇桨浮?，比方要架設(shè)一個(gè)網(wǎng)站，可以搭建網(wǎng)站框架，預(yù)見(jiàn)網(wǎng)站興許（前端）開(kāi)發(fā)中的全部風(fēng)險(xiǎn)。并一一給出解決方式。

說(shuō)說(shuō)半路出家的危與機(jī)，俗話(huà)說(shuō)。隔行入隔山。每一個(gè)行業(yè)自有其道。自然不是想做就做。

前端技術(shù)領(lǐng)域半路出家者非常多，我們來(lái)分析一下轉(zhuǎn)行的心理。

第一、看到前端技術(shù)入門(mén)簡(jiǎn)單、互聯(lián)網(wǎng)對(duì)前端技術(shù)的需求缺口大；

第二、前端技術(shù)所見(jiàn)即所得、感覺(jué)學(xué)習(xí)起來(lái)非?？欤?/p>

第三、我身邊的某某轉(zhuǎn)行作前端看上去不錯(cuò)、我似乎也能夠。

第四、我不喜歡我如今做的工作、想換行業(yè)、正好前端技術(shù)上手較快。就選他吧；

第五、我的確了解并喜歡做Web前端。為它付出再多都是值得的。

新進(jìn)入這一行或者轉(zhuǎn)行者的心態(tài)比較easy走兩個(gè)極端。一是僅僅看到新行業(yè)的好，二是僅僅認(rèn)為原工作非常糟糕。

但無(wú)論是什么行業(yè)，對(duì)自己的職業(yè)規(guī)劃的思考都應(yīng)當(dāng)先行一步。進(jìn)入這一行必須先清晰的回答這些問(wèn)題：

1.我能做什么？

2.我不能做什么？

3.我的優(yōu)勢(shì)是什么？

4.我的劣勢(shì)是什么？

5.做這一行對(duì)我有何優(yōu)點(diǎn)？

6.做這一行會(huì)讓我付出何種代價(jià)？

7.怎樣定義成功？

由于面試的時(shí)候一定會(huì)被這些問(wèn)題所挑戰(zhàn)。假設(shè)支支吾吾說(shuō)不清楚，要么是對(duì)自己未來(lái)不負(fù)責(zé)任，要么骨子里就是草根一族，習(xí)慣做什么都蜻蜓點(diǎn)水淺嘗輒止。也難讓人信服你進(jìn)入這一行是一個(gè)權(quán)衡再三看起來(lái)合理的選擇。

5、相關(guān)誤區(qū)解釋

有人覺(jué)得前端project師上班不干別的。就是玩，弄點(diǎn)效果。攢兩頁(yè)面，搞點(diǎn)創(chuàng)新。當(dāng)然這個(gè)表述很輕巧、甚至有調(diào)侃的味道，web前端工作絕對(duì)不是玩那么簡(jiǎn)單的。更不像以前的網(wǎng)頁(yè)制作那么單一，有時(shí)候會(huì)為一些效果的實(shí)現(xiàn)或優(yōu)化，弄得加班加點(diǎn)。上周還由于解決一個(gè)問(wèn)題花了2天的時(shí)間。羞愧啊。

所以前端開(kāi)發(fā)是一項(xiàng)很特殊的工作，前端project師的工作說(shuō)得輕松，看似輕巧，但做起來(lái)絕對(duì)不是那么的簡(jiǎn)單。

在開(kāi)發(fā)過(guò)程中涵蓋的東西很寬廣，既要從技術(shù)的角度來(lái)思考界面的實(shí)現(xiàn)，規(guī)避技術(shù)的死角，又要從用戶(hù)的角度來(lái)思考，如何才干更好地接受技術(shù)呈現(xiàn)的枯燥的數(shù)據(jù)，更好的呈現(xiàn)信息。

在入行初期。非常多人過(guò)于著迷。從而陷入了迷途。比方有人糾結(jié)于是否將dt、dd的樣式清除從reset.css中拿掉，原因是認(rèn)為這兩個(gè)標(biāo)簽的清除樣式會(huì)耗費(fèi)一些渲染性能。或者是否須要將for循環(huán)改為while循環(huán)以提高js運(yùn)行速度。雖然這些考慮看上去是合理的，但并非性能的瓶頸所在，也就是說(shuō)。你花了非常大力氣重構(gòu)的代碼帶來(lái)的頁(yè)面性能提升，往往還不如將兩個(gè)css文件合成一個(gè)帶來(lái)的提升明顯。就好比用一把米尺量東西，不是必需精確到小數(shù)點(diǎn)后10位，由于精確到小數(shù)點(diǎn)后2位就已經(jīng)是不準(zhǔn)確的了。這樣的技術(shù)誤區(qū)經(jīng)常讓人撿了芝麻丟了西瓜。

6、對(duì)自己學(xué)習(xí)和工作的要求

N.C.Zakas以前勉勵(lì)過(guò)大家，如今成為了我對(duì)自己的要求和對(duì)已結(jié)確定要走Web前端開(kāi)發(fā)方向的人的建議：熱愛(ài)你的工作。熱愛(ài)跨瀏覽器開(kāi)發(fā)帶來(lái)的挑戰(zhàn)、熱愛(ài)互聯(lián)網(wǎng)技術(shù)的種種異端，熱愛(ài)業(yè)內(nèi)的同行，熱愛(ài)你的工具。互聯(lián)網(wǎng)發(fā)展太快了，假設(shè)你不熱愛(ài)它的話(huà)，不可能跟上它的步伐。

這意味著你必須多閱讀。多動(dòng)手，保證自己的才干與日俱增。要為怎樣編寫(xiě)易于維護(hù)、高質(zhì)量的前端代碼奮斗。

下了班也不能閑著。要做一些對(duì)自己實(shí)用的事兒。

能夠參與一些開(kāi)源軟件的開(kāi)發(fā)，讀讀好書(shū)，看看牛人的博客。常常參加一些會(huì)議，看看別人都在干什么。

要想讓自己高速成長(zhǎng)，有非常多事兒能夠去做，相信付出一定會(huì)有回報(bào)。

這次就分享到這里。一個(gè)上午就這樣過(guò)去了，餓了，該去做中午飯了。關(guān)于前端開(kāi)發(fā)詳細(xì)相關(guān)技術(shù)和詳細(xì)怎么學(xué)習(xí)發(fā)展下次我會(huì)繼續(xù)分享。

文章來(lái)源：網(wǎng)絡(luò)  版權(quán)歸原作者所有

上文內(nèi)容不用于商業(yè)目的，如涉及知識(shí)產(chǎn)權(quán)問(wèn)題，請(qǐng)權(quán)利人聯(lián)系小編，我們將立即處理