圍脖貓貓
新雨初晴水星
如今在整個(gè)技術(shù)領(lǐng)域，Web前端開(kāi)發(fā)永遠(yuǎn)站在第一線直面用戶體驗(yàn)，已成為當(dāng)下互聯(lián)網(wǎng)行業(yè)緊俏的高端技術(shù)崗位，越來(lái)越多的人想要學(xué)習(xí)Web前端，成為一名Web前端開(kāi)發(fā)工程師。
今天安妹就來(lái)跟大家詳細(xì)說(shuō)說(shuō)：什么是Web前端？前端工程師這一職位又是具體做些什么的
什么叫Web前端？
Web前端開(kāi)發(fā)是從網(wǎng)頁(yè)制作演變而來(lái)的，互聯(lián)網(wǎng)的演變進(jìn)程，網(wǎng)站的前端也由此發(fā)生了翻天覆地的變化。網(wǎng)頁(yè)不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁(yè)的內(nèi)容更加生動(dòng)，網(wǎng)頁(yè)上軟件化的交互形式為用戶提供了更好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(xiàn)的。無(wú)論是開(kāi)發(fā)難度上，還是開(kāi)發(fā)方式上，現(xiàn)在的網(wǎng)頁(yè)制作都更接近傳統(tǒng)的網(wǎng)站后臺(tái)開(kāi)發(fā)，所以現(xiàn)在不再叫網(wǎng)頁(yè)制作，而是叫Web前端開(kāi)發(fā)。
通俗的講，“前”代表與人直接展示的部分，包括界面與用戶的交互等，“端”代表輸出終端，如pc瀏覽器、手機(jī)瀏覽器，以及app、應(yīng)用程序等。那么，合起來(lái)的意思也就是這些瀏覽器、app、應(yīng)用程序的界面展現(xiàn)以及用戶交互就是“前端”。前端的主要職能：把網(wǎng)頁(yè)界面更好的呈現(xiàn)給用戶，與后端相比更加注重頁(yè)面性能與用戶體驗(yàn)。
Web前端開(kāi)發(fā)有很明顯的時(shí)代特征，它掌控著非常重要的內(nèi)容和信息的傳達(dá)，前端開(kāi)發(fā)人員影響著用戶的視覺(jué)體驗(yàn)，并且在很大程度上決定著大眾的信息攝入，以及用戶讀取信息的有效方式，所以企業(yè)對(duì)于前端開(kāi)發(fā)的人才需求量也越來(lái)越大。
從招聘網(wǎng)站分析，其用人數(shù)量已經(jīng)遠(yuǎn)遠(yuǎn)超過(guò)主流編程語(yǔ)言Java、ASP、和iOS等的開(kāi)拓人員的數(shù)量。隨著谷歌、YouTube、Twitch等大型企業(yè)紛紛將視線轉(zhuǎn)投向Web前端，更加確認(rèn)了Web前端在互聯(lián)網(wǎng)時(shí)代的發(fā)展遠(yuǎn)景。據(jù)統(tǒng)計(jì)，我國(guó)對(duì)于Web前端工程師人員的缺口將達(dá)到幾十萬(wàn)。目前，北京、上海、廣州、深圳等地Web前端工程師的薪資待遇更是一飆再飆。安妹所在的成都地區(qū)，目前Web前端發(fā)展也是一片向好，具體可以看看安妹之前寫(xiě)的文章，已經(jīng)講過(guò)很多了，此處略去不表。
Web前端開(kāi)發(fā)工程師是做什么的？
Web前端開(kāi)發(fā)崗位有五大特點(diǎn)：
一、行業(yè)緊俏度高：技術(shù)更新快、需求高漲、用人缺口大；
二、學(xué)習(xí)難度低：初期以背單詞為主、中期培養(yǎng)程序思維、后期注重項(xiàng)目練習(xí)；
三、就業(yè)選擇多：涵蓋包括網(wǎng)站、游戲、手機(jī)APP、物聯(lián)網(wǎng)、桌面應(yīng)用、小程序、3D渲染、數(shù)據(jù)可視化、VR&AR等應(yīng)用領(lǐng)域，應(yīng)用范圍極為廣闊，十分受互聯(lián)網(wǎng)企業(yè)青睞；
四、起始薪資高：高于大部分非編碼類崗位、高于部分后臺(tái)開(kāi)發(fā)類崗位；
五、職業(yè)生涯廣：與用戶需求/體驗(yàn)直接關(guān)聯(lián)、與項(xiàng)目數(shù)據(jù)/邏輯直接關(guān)聯(lián)、快速接觸到更多崗位內(nèi)容。
戇戇的囡囡
Web前端，主要是用來(lái)開(kāi)發(fā)用戶通過(guò)瀏覽器可以瀏覽和使用的Web頁(yè)面的。一般而言，所涉及的內(nèi)容主要包括W3C中的HTML、CSS和JavaScript這三方面的內(nèi)容。
工具/原料：HTML、CSS、JavaScript
方法/步驟：
1、隨著前端的發(fā)展，前端開(kāi)發(fā)所涉及到的內(nèi)容肯定不僅限于這三方面。分析這三個(gè)層面內(nèi)容的本質(zhì)可以看到，這三個(gè)層面分別涉及Web頁(yè)面的結(jié)構(gòu)、Web的外觀視覺(jué)表現(xiàn)以及Web層面的交互實(shí)現(xiàn)。
2、歸根結(jié)底，Web前端以及Web前端開(kāi)發(fā)可以說(shuō)是針對(duì)Web的結(jié)構(gòu)、行為和表現(xiàn)來(lái)進(jìn)行相應(yīng)的開(kāi)發(fā)的，也可以說(shuō)，前端開(kāi)發(fā)主要是做Web端的結(jié)構(gòu)、行為以及表現(xiàn)。
3、Web前端開(kāi)發(fā)技術(shù)是一個(gè)先易后難的過(guò)程，主要包括三個(gè)要素：HTML、CSS和JavaScript，這就要求前端開(kāi)發(fā)工程師不僅要掌握基本的Web前端開(kāi)發(fā)技術(shù)，網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識(shí)，而且要學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開(kāi)發(fā)以及理論層面的知識(shí)，包括代碼的可維護(hù)性、組件的易用性、分層語(yǔ)義模板和瀏覽器分級(jí)支持等。
4、Web前端開(kāi)發(fā)后期要懂一些前端框架，如nodejs、Angualrjs、還有bootstrap等，以及ued用戶體驗(yàn)，后臺(tái)開(kāi)發(fā)也要懂一些。
網(wǎng)站前端工作職責(zé)：
1、使用Div+css并結(jié)合Javascript負(fù)責(zé)產(chǎn)品的前端開(kāi)發(fā)和頁(yè)面制作;
2、熟悉W3C標(biāo)準(zhǔn)和各主流瀏覽器在前端開(kāi)發(fā)中的差異，能熟練運(yùn)用DIV+CSS，提供針對(duì)不同瀏覽器的前端頁(yè)面解決方案;
3、負(fù)責(zé)相關(guān)產(chǎn)品的需求以及前端程序的實(shí)現(xiàn)，提供合理的前端架構(gòu);
4、與產(chǎn)品、后臺(tái)開(kāi)發(fā)人員保持良好溝通，能快速理解、消化各方需求，并落實(shí)為具體的開(kāi)發(fā)工作;
5、了解服務(wù)器端的相關(guān)工作，在交互體驗(yàn)、產(chǎn)品設(shè)計(jì)等方面有自己的見(jiàn)解。
Web前端的6大動(dòng)效，HTML5和css3實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)：
1.導(dǎo)航菜單：幾乎所有的網(wǎng)站首頁(yè)都會(huì)用到。
2.導(dǎo)航條雙向綁定：側(cè)邊導(dǎo)航和頭部導(dǎo)航雙向綁定準(zhǔn)確定位。
動(dòng)畫(huà)：鼠標(biāo)經(jīng)過(guò)圖片進(jìn)行動(dòng)態(tài)的翻轉(zhuǎn)、旋轉(zhuǎn)動(dòng)態(tài)變化。
4.滑動(dòng)門(mén)特效：導(dǎo)航菜單中跟隨鼠標(biāo)的移動(dòng)元素進(jìn)行變化。
5.滾動(dòng)視差：鼠標(biāo)滾動(dòng)到特定位置時(shí)，內(nèi)容跟隨加載。
6.錨點(diǎn)跳轉(zhuǎn)：根據(jù)鏈接元素定位到網(wǎng)頁(yè)中想要查看的位置
優(yōu)質(zhì)工程師考試問(wèn)答知識(shí)庫(kù)