摘要：面對(duì)這些較高的要求，前端在開發(fā)環(huán)節(jié)中的作用也變得越來越重要因而近幾年來前端工程師備受青睞一般水平的前端工程師平均年薪可達(dá)萬元資深前端工程師年薪高達(dá)萬元。這種用戶體驗(yàn)的細(xì)節(jié)問題是否處理妥當(dāng)是判斷一名前端工程師是否優(yōu)秀的因素。

本文是為了給那些想要了解前端開發(fā)是什么，或者剛剛打算開始學(xué)習(xí)前端的朋友們準(zhǔn)備，希望可以幫助準(zhǔn)備入行的你;

總所周知，目前無論是企業(yè)還是個(gè)人，都會(huì)有制作網(wǎng)站、博客、小程序等需求,他們希望把自己的產(chǎn)品或服務(wù)通過互聯(lián)網(wǎng)展示給更多用戶。在這種情況下, 對(duì)于剛剛接觸這方面的新人來說，可能先需要了解一個(gè)網(wǎng)站的從零到有的制作過程會(huì)涉及哪些環(huán)節(jié)。

簡(jiǎn)單的來說網(wǎng)站的誕生過程會(huì)經(jīng)歷這些環(huán)節(jié)

策劃 > 設(shè)計(jì) > 前端開發(fā) > 后端開發(fā) > 測(cè)試發(fā)布

從這個(gè)流程來看,我們的網(wǎng)站開發(fā)是一個(gè)系統(tǒng)工程,它需是多個(gè)環(huán)節(jié)之間緊密配合來去完成的，而“前端開發(fā)”這個(gè)環(huán)節(jié)處于整個(gè)系統(tǒng)工程的中間部位，起到承上啟下的核心作用，因此“前端開發(fā)工程師”這個(gè)職位越來越受到重視，接下來我們先和大家詳細(xì)聊聊關(guān)于前端開發(fā)這些事。

前端開發(fā)是做什么的

前端開發(fā)的興起
前端開發(fā)是從網(wǎng)頁制作演變而來的,在國(guó)內(nèi)被大家所認(rèn)知并接受是在 2005 年之后。在 2005 年之前,處于1.0 時(shí)代的 Web 并沒有“前端”這個(gè)概念,此時(shí)的網(wǎng)頁內(nèi)容主要就是一些文字和圖片,用戶使用網(wǎng)站的行為也以瀏覽為主,這樣的網(wǎng)頁使用幾個(gè)網(wǎng)頁制作軟件,諸如 Photoshop+Dreamweaver+Flash 就能制作出來。所以Web1.0 時(shí)代的網(wǎng)頁開發(fā)也叫網(wǎng)頁制作、美工切圖；

2005 年之后,互聯(lián)網(wǎng)進(jìn)入 Web2.0 時(shí)代,對(duì)網(wǎng)頁的開發(fā)要求越來越高,比起 1.0 時(shí)代,其開發(fā)難度加大,前端開發(fā)已經(jīng)不再是掌握幾個(gè)制作軟件就可以做好的事了,它需要專業(yè)的工程師才能做好，網(wǎng)頁除了展示信息以外,還需要美觀的設(shè)計(jì)、炫酷的交互、良好的用戶體驗(yàn)、復(fù)雜的業(yè)務(wù)邏輯處理、跨終端的適配兼容等，開發(fā)方式也有了本質(zhì)改變，因此網(wǎng)頁開發(fā)不再叫網(wǎng)頁制作，而是變成了前端開發(fā)。

前端開發(fā)的市場(chǎng)需求

隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展，在這個(gè)到處都是講究“顏值”和用戶體驗(yàn)的時(shí)代，“高顏值”以及能與用戶進(jìn)行友好交互的網(wǎng)站會(huì)極大地吸引用戶，用戶會(huì)更加愿意深入地了解這樣的網(wǎng)站，也提高網(wǎng)站的用戶黏度。面對(duì)這些較高的要求，前端在開發(fā)環(huán)節(jié)中的作用也變得越來越重要；

因而近幾年來前端工程師備受青睞,一般水平的前端工程師平均年薪可達(dá) 10 萬元,資深前端工程師年薪高達(dá) 20~80 萬元。但就這樣的年薪,很多企業(yè)還是很難找到合適的前端工程師；

從上述企業(yè)的招聘信息來看,前端行業(yè)的就業(yè)薪資是較為可觀的。
那么如何才能做好專業(yè)的前端開發(fā)呢?
就讓我在接下來的日子里，為大家分享下我的前端入門學(xué)習(xí)的修煉之道吧。

前端開發(fā)人員要具備以下能力

1.復(fù)雜炫酷的頁面交互設(shè)計(jì)能力

在進(jìn)行前端開發(fā)時(shí),開發(fā)人員除了要將設(shè)計(jì)圖完美還原以外,還需要對(duì)交互效果進(jìn)行編寫。當(dāng)用戶打開頁面的時(shí)候,如果頁面風(fēng)格新穎、交互炫酷,那他就會(huì)感覺你的產(chǎn)品技術(shù)含量很高。相反如果頁面風(fēng)格老舊、交互呆板,他就會(huì)覺得你的產(chǎn)品不行,不買你的賬。因此,前端開發(fā)工程師要具備設(shè)計(jì)復(fù)雜炫酷頁面的能力。

在鼠標(biāo)懸停和移開時(shí)的不同效果,就體現(xiàn)了一種較為炫酷的交互效果；

2.良好的用戶體驗(yàn)設(shè)計(jì)能力

用戶體驗(yàn)是從用戶的角度出發(fā),不僅要把炫酷的視覺效果展現(xiàn)給用戶,還要從功能上讓用戶有所感知。例如當(dāng)用戶注冊(cè)微博賬號(hào)時(shí),電話號(hào)碼提供錯(cuò)誤或者沒有輸入密碼,輸入框右側(cè)應(yīng)有相應(yīng)提示。這種用戶體驗(yàn)的細(xì)節(jié)問題是否處理妥當(dāng),是判斷一名前端工程師是否優(yōu)秀的因素。

3.復(fù)雜的業(yè)務(wù)邏輯處理能力

現(xiàn)在的前端工程師不僅要制作頁面,還需要配合服務(wù)端工程師一起去實(shí)現(xiàn)某些功能。例如,微博的文章發(fā)布、用戶搜索、評(píng)論留言等內(nèi)容的開發(fā),前端開發(fā)工程師對(duì)后端數(shù)據(jù)接收是否成功、搜索結(jié)果狀態(tài)以及評(píng)論留言是否合法等進(jìn)行邏輯判斷處理。因此,前端開發(fā)工程師要具備處理復(fù)雜業(yè)務(wù)邏輯的能力。

用戶輸入數(shù)據(jù)不正確時(shí)顯示提示信息

4.能處理跨終端的適配兼容問題

近年來,智能手機(jī)發(fā)展迅猛,幾乎人手一部,大街上隨處可見“低頭族”。隨著手機(jī)、平板電腦等不同移動(dòng)終端的普及,越來越多的人喜歡移動(dòng)辦公、移動(dòng)學(xué)習(xí)、移動(dòng)娛樂......人們經(jīng)常會(huì)在不同的終端之間進(jìn)行切換,因此,這就要求一個(gè)頁面能實(shí)現(xiàn)跨終端的適配兼容——即能在不同終端中正確顯示。

比如域名 www.miaov.com,在 PC 和移動(dòng)端瀏覽器中的顯示如圖 1-6 所示,該示例給我們展示了該域名跨終端適配兼容的其中一種情況,這種適配兼容運(yùn)用于網(wǎng)站內(nèi)容比較復(fù)雜的情況,通過后臺(tái)判斷,渲染不同模板進(jìn)行輸出或跳轉(zhuǎn)；

還有一種情況,就是各終端顯示的頁面內(nèi)容完全一樣,但頁面布局等樣式會(huì)根據(jù)終端屏幕的大小進(jìn)行自動(dòng)切換,如圖所示就是響應(yīng)式設(shè)計(jì)。響應(yīng)式網(wǎng)頁開發(fā)主要是基于一套代碼來適配不同尺寸的終端,有關(guān)響應(yīng)式網(wǎng)頁開發(fā)技術(shù)請(qǐng)閱讀本系列叢書的響應(yīng)式開發(fā)。

綜上所述的，前端開發(fā)的工作主要是開發(fā)用戶操作界面,其中涉及的內(nèi)容包括實(shí)現(xiàn)炫酷的頁面交互、提供良好的用戶體驗(yàn)、配合服務(wù)端工程師處理復(fù)雜的業(yè)務(wù)邏輯和實(shí)現(xiàn) Web 的跨終端適配兼容等，這些都是一個(gè)合格前端要掌握的必備技能；

至此,我們已經(jīng)大致了解了前端開發(fā)到底是做什么的。現(xiàn)在的問題是如何成為一名合格的前端開發(fā)工程師?怎樣才能將前端 開發(fā)的各項(xiàng)工作做好?要成為專業(yè)的前端開發(fā)工程師、做好前端開發(fā)的各項(xiàng)工作,需要掌握哪些相關(guān)的技術(shù)呢?

下一期我將就這些內(nèi)容進(jìn)行介紹

關(guān)注本訂閱號(hào)，觀看《零基礎(chǔ)入門前端的修煉之道》系列文章

公眾號(hào)ID：Miaovclass
關(guān)注妙味訂閱號(hào)：“妙味前端”，為您帶來優(yōu)質(zhì)前端技術(shù)干貨；