在前端技術(shù)眼花繚亂的時(shí)代，作為一個(gè)小白該如何學(xué)習(xí)、提高?在這里我結(jié)合自己的十年從業(yè)經(jīng)歷，來簡單分享一下自己的經(jīng)驗(yàn)看法。
淺談前端
一、關(guān)于前端
我們必須糾正一下大家對(duì)于前端固有的錯(cuò)誤印象。很多人總是以為前端人員就是寫寫頁面這么簡單，其實(shí)不是這樣的，現(xiàn)代的前端崗位是一個(gè)綜合素質(zhì)要求很高的行業(yè)。
前端工程師
首先，作為前端程序員，不僅要掌握開發(fā)語言、數(shù)據(jù)結(jié)構(gòu)、算法等編程素養(yǎng)，現(xiàn)在的前端應(yīng)用場景復(fù)雜程度非常高，這就要求我們必須像后端程序員那樣，具備很高的軟件架構(gòu)能力。
其次，前端的程序是直接跟用戶交互的，現(xiàn)在的互聯(lián)網(wǎng)競爭激烈，產(chǎn)品是否美觀、操作是否友好，是吸引用戶的重要因素，所以，還必須具備UI、美工、用戶體驗(yàn)等多方面的設(shè)計(jì)能力。
最后，很多情況下，前端工程師要參與到產(chǎn)品運(yùn)營推廣工作中，這又要求總結(jié)、歸納、文案寫作等能力，甚至是對(duì)數(shù)據(jù)的統(tǒng)計(jì)、分析能力等等。
有了對(duì)前端工作的正確認(rèn)知后，我們接下來開始具體講解。
二、技術(shù)學(xué)習(xí)路線
前端小白最好給自己規(guī)劃一條合適的技術(shù)學(xué)習(xí)路線，以下是我個(gè)人的技術(shù)發(fā)展過程，我覺得還是能適合大多數(shù)的前端人員：
1.基礎(chǔ)掌握
前端開發(fā)三劍客必須掌握：html、css、javascript。html負(fù)責(zé)組織頁面結(jié)構(gòu)及數(shù)據(jù)的承載，css是對(duì)外觀顯示效果的處理，javascript則是對(duì)行為、業(yè)務(wù)邏輯的處理。這些基礎(chǔ)知識(shí)經(jīng)過長期的迭代，目前已經(jīng)發(fā)展到html5、css3、es6，大家必須掌握好。
2.進(jìn)階能力
對(duì)于進(jìn)階知識(shí)學(xué)習(xí)，這里推薦大家一些組件庫、UI庫，例如jquery或zepto(雖然他們以后會(huì)被取代)、ajax、bootstrap、less、sass等，這些內(nèi)容的學(xué)習(xí)，不僅能直接提升你對(duì)基礎(chǔ)知識(shí)的掌握、提高開發(fā)效率，并且能夠?qū)崿F(xiàn)大部分傳統(tǒng)web應(yīng)用場景的開發(fā)。
3.前端框架
這里的框架，指的是架構(gòu)級(jí)別的基礎(chǔ)框架，它必須對(duì)前端開發(fā)的各個(gè)方面提供支持，主流的框架以Vue、React、Angular為代表，這里推薦大家學(xué)習(xí)Vue，它提供了模板語法、組件、路由、監(jiān)聽、狀態(tài)等一整套方案。框架的學(xué)習(xí)，讓我們的編程思維得到更大的提升，對(duì)模塊化、組件化、mvvm的開發(fā)思想會(huì)有新的認(rèn)識(shí)。
4.前端工程化
現(xiàn)在越來越流行用工程化思想，來管理前端項(xiàng)目，這里的推薦組合是nodejs+webpack。通過webpack自動(dòng)化搭建項(xiàng)目架構(gòu)、組件安裝及管理、測試管理以及代碼壓縮、混淆、編譯、打包等。甚至跟一些諸如基于Vue的腳手架工具配合使用，能夠搭建起開箱即用的項(xiàng)目架構(gòu)。
5.技術(shù)加持
建議大家對(duì)諸如微信公眾號(hào)、微信小程序等跟前端相關(guān)技術(shù)的學(xué)習(xí)，對(duì)自己的技術(shù)能力是很好的加持。
6.全棧開發(fā)
學(xué)有余力的同學(xué)，可以考慮一下全棧開發(fā)，目前阿里云和騰訊云等，提供了基于nodejs的云開發(fā)環(huán)境(云函數(shù)、云數(shù)據(jù)庫、云存儲(chǔ)等)，可直接使用前端的js技術(shù)進(jìn)行后端開發(fā)。
三、開發(fā)工具
俗話說，工欲善其事、必先利其器，下面對(duì)前端開發(fā)中的一些工具進(jìn)行簡單介紹：
1.WebStorm
被稱為Web前端開發(fā)神器，對(duì)初學(xué)者非常友好，默認(rèn)就提供了強(qiáng)大的功能，不需要像其它工具那樣進(jìn)行大量的插件安裝，建議剛接觸前端開發(fā)的同學(xué)使用。但是，這款工具比較消耗性能，內(nèi)存占用大。
2.Sublime
這是我使用過的最輕量化的前端開發(fā)工具，對(duì)性能要求比較高的同學(xué)的首選，需要手動(dòng)進(jìn)行插件安裝配置，才能發(fā)揮出強(qiáng)大的功能。
3.Vscode
這個(gè)是我個(gè)人強(qiáng)烈推薦的，除了性能外，各方面都比Sublime強(qiáng)大，特別是操作體驗(yàn)、習(xí)慣適合大部分人，另外，它還能用于c++/java等的開發(fā)。
四、前端發(fā)展方向
1.Web開發(fā)
Web開發(fā)自然是不用多說，不僅能進(jìn)行電腦端網(wǎng)站開發(fā)，由于HTML5的響應(yīng)式、移動(dòng)適配能力，也能開發(fā)手機(jī)端的網(wǎng)頁。
2.游戲開發(fā)
HTML5游戲開發(fā)，游戲開發(fā)向來都是很有前景的方向，這方面需要掌握html5的canvas、WebGL、SVG等技術(shù)，以及一些html5的游戲引擎。
3.多屏多端開發(fā)
現(xiàn)在的前端，已經(jīng)可以用于Android應(yīng)用、IOS應(yīng)用、微信小程序、支付寶小程序等不同操作系統(tǒng)、不同應(yīng)用平臺(tái)的開發(fā)，甚至可以做到一套代碼，就能發(fā)布為不同平臺(tái)的應(yīng)用。有興趣多屏多端開發(fā)的同學(xué)，推薦學(xué)習(xí)uni-app框架。
另外，除了流行的移動(dòng)端開發(fā)，通過Electron框架，也能使用前端技術(shù)，進(jìn)行桌面端程序的開發(fā)。
原文鏈接：https://www.toutiao.com/a7001762794681254430/
