不知道到底應(yīng)該以怎樣的學(xué)習(xí)路線來(lái)入門(mén)和進(jìn)階前端領(lǐng)域。其實(shí)這是一個(gè)問(wèn)得非常多的共性問(wèn)題。

作為程序員，肯定不能容忍重復(fù)無(wú)味的勞動(dòng)，因此六星云課堂決定系統(tǒng)地總結(jié)分享一下零基礎(chǔ)小白的前端學(xué)習(xí)路線，作為「前端入門(mén)」部分，希望對(duì)你能有幫助。

前端學(xué)習(xí)是一個(gè)螺旋上升的過(guò)程，既要反復(fù)地看書(shū)，也要抓緊時(shí)間進(jìn)行實(shí)戰(zhàn)。只看書(shū)，看了就會(huì)忘，所以必須將看書(shū)和寫(xiě)代碼相結(jié)合。只要你認(rèn)真學(xué)，之后跟著六星云課堂提供的前端進(jìn)階路線，相信一定可以事半功倍。

01、什么是前端開(kāi)發(fā)

首先，你知道前端究竟是做什么的嗎？當(dāng)你通過(guò)電商app為你的女票訂購(gòu)生日蛋糕，你是否想過(guò)是誰(shuí)創(chuàng)造了這一切？是誰(shuí)為那些冗長(zhǎng)的二進(jìn)制代碼賦予了如此有生命力的皮囊？

沒(méi)錯(cuò)！這些都是前端開(kāi)發(fā)者的功勞！而實(shí)現(xiàn)這一切的技術(shù)就是前端開(kāi)發(fā)。

從狹義上講，前端工程師主要負(fù)責(zé)的工作就是使用HTML、CSS、JavaScript等專(zhuān)業(yè)技能和工具將產(chǎn)品UI設(shè)計(jì)稿實(shí)現(xiàn)成網(wǎng)站產(chǎn)品。

在一個(gè)完整的項(xiàng)目開(kāi)發(fā)體系中，產(chǎn)品經(jīng)理會(huì)設(shè)計(jì)產(chǎn)品原型（prd），UI會(huì)根據(jù)產(chǎn)品原型來(lái)做出產(chǎn)品圖樣psd，編程人員會(huì)根據(jù)產(chǎn)品原型和產(chǎn)品圖樣進(jìn)行項(xiàng)目開(kāi)發(fā)，涵蓋用戶PC端、移動(dòng)端網(wǎng)頁(yè)，處理視覺(jué)和交互問(wèn)題。

從廣義上來(lái)講，所有用戶終端產(chǎn)品只要是與視覺(jué)和交互有關(guān)的部分，都是前端工程師的專(zhuān)業(yè)領(lǐng)域。

也就是說(shuō)，前端開(kāi)發(fā)簡(jiǎn)單來(lái)說(shuō)就是把平面效果圖轉(zhuǎn)化成網(wǎng)頁(yè)，把靜態(tài)轉(zhuǎn)換成動(dòng)態(tài)。優(yōu)秀的前端開(kāi)發(fā)可以保障實(shí)現(xiàn)這些效果的同時(shí)，既不能影響網(wǎng)站的打開(kāi)速度、瀏覽器兼容性還有搜索引擎的收錄，還可以讓用戶體驗(yàn)更加舒適。

02、前端開(kāi)發(fā)的應(yīng)用領(lǐng)域

隨著前端規(guī)模增大，開(kāi)始工程化發(fā)展。gulp、webpack工具應(yīng)運(yùn)而生。JS獨(dú)霸前端江湖，Node.js橫空出世，直接操作數(shù)據(jù)庫(kù)，殺向后臺(tái)，與PHP、Python、Java等老牌后臺(tái)語(yǔ)言同臺(tái)競(jìng)技，大有一統(tǒng)Web江湖之勢(shì)。

不可否認(rèn)，前端仍有很多需要解決的問(wèn)題，JS仍然有許多的局限和不足。但這并沒(méi)有阻擋前端發(fā)展的步伐，除了網(wǎng)頁(yè)，你可以在更多具有開(kāi)拓性的領(lǐng)域看到前端的身影。

應(yīng)用開(kāi)發(fā)

包括移動(dòng)端應(yīng)用和桌面應(yīng)用。比如你可以使用React構(gòu)建原生應(yīng)用，用Angular,Typescript, JavaScript進(jìn)行混合開(kāi)發(fā)構(gòu)建WeApp應(yīng)用。

使用Electron構(gòu)建跨平臺(tái)的桌面應(yīng)用。Electron使用到了Chromium內(nèi)核和Node.js，兼容Windows,Mac& Linux等平臺(tái)，Electron。

TypeScript

TypeScript是JavaScript的擴(kuò)展，增加了面向?qū)ο蠛挽o態(tài)類(lèi)型等多種特性，相比JS更規(guī)范，方便測(cè)試。廣泛用于Angular、React和Vue項(xiàng)目中。

無(wú)服務(wù)架構(gòu)無(wú)服務(wù)器架構(gòu)是云計(jì)算的熱點(diǎn)趨勢(shì)，不必要?jiǎng)?chuàng)建和管理服務(wù)器，專(zhuān)注于前端和業(yè)務(wù)，這是云服務(wù)帶來(lái)的方便。

PWA

PWA（ProgressiveWeb Apps）可以理解為是一個(gè)增強(qiáng)型的webapp。

本質(zhì)還是webApp，但是經(jīng)過(guò)增強(qiáng)，在功能和樣式上給用戶帶來(lái)類(lèi)似原生應(yīng)用使用體驗(yàn)的一項(xiàng)技術(shù)。

其開(kāi)發(fā)的應(yīng)用是響應(yīng)式的，有類(lèi)似App的交互，能夠離線存儲(chǔ)提供服務(wù)，采用https安全可靠。

03、新手學(xué)習(xí)前端三步走

明確目標(biāo)：

1、明確自己以后要做什么，需要掌握什么技能。很多人在不知情的情況下盲目學(xué)習(xí)。首先，你知道公司現(xiàn)在需要什么人才，你應(yīng)該為什么目標(biāo)而奮斗。

2、系統(tǒng)的規(guī)劃，每天學(xué)習(xí)哪些新知識(shí)和每天做的作業(yè)、練習(xí)。很多人都想自學(xué)web前端，以為過(guò)幾天看完教學(xué)視頻就完事了。你能找到工作真是令人驚訝。現(xiàn)在想通過(guò)學(xué)習(xí)web前端找工作，沒(méi)有4-6個(gè)月或者接觸項(xiàng)目實(shí)戰(zhàn)都做不到。因此，規(guī)劃是必要的。

3、注重學(xué)習(xí)方法，很多人在學(xué)習(xí) web前端的時(shí)候，剛開(kāi)始學(xué)習(xí)的時(shí)候選擇了錯(cuò)誤的學(xué)習(xí)方法，因此最終注定要放棄，回到原來(lái)的崗位繼續(xù)做自己不喜歡的事，學(xué)習(xí) web前端需要一定的技巧，在開(kāi)始學(xué)習(xí)之前要多問(wèn)問(wèn)別人，不要盲目的自學(xué)，浪費(fèi)時(shí)間。

掌握基礎(chǔ)技巧：

一個(gè)優(yōu)秀的網(wǎng)絡(luò)前端開(kāi)發(fā)工程師必須具備系統(tǒng)的知識(shí)和豐富的工作經(jīng)驗(yàn)，因此，許多大公司很難招聘到理想的前端工程師，甚至高薪也是如此。那么如何系統(tǒng)地學(xué)習(xí)實(shí)用的企業(yè)web前端技術(shù)呢？在此，我們不再進(jìn)行技術(shù)講解，而是集中進(jìn)行技術(shù)講解。技術(shù)并非黑白分明，只有對(duì)錯(cuò)，技術(shù)見(jiàn)仁見(jiàn)智。

1、必須掌握基礎(chǔ)的 Web前端開(kāi)發(fā)技術(shù)，包括 HTML、CSS、JavaScript（ES5、ES6）、DOM、BOM、Ajax等等，在掌握了這些技術(shù)之后，還必須清楚地了解它們對(duì)不同瀏覽器的兼容性，渲染原理以及存在的 bug。

2、要想成為一名合格的前端工程師，還必須具備計(jì)算機(jī)網(wǎng)絡(luò)相關(guān)知識(shí)，如http協(xié)議等，還有網(wǎng)站性能優(yōu)化、?SEO、服務(wù)器等基本知識(shí)。

3、要學(xué)會(huì)利用前端的各種輔助開(kāi)發(fā)工具。

4、除技術(shù)層面外，還應(yīng)具備以下方面的理論知識(shí)：代碼的可維護(hù)性、組件的易用性、層次化語(yǔ)義模板和瀏覽器分級(jí)支持等。

掌握前端工程化：

除了以上的基礎(chǔ)技巧之外，前端工程化也是就業(yè)必備的技術(shù)棧，像Nodejs環(huán)境、模塊化開(kāi)發(fā)規(guī)范（commonjs、ES模塊化）、包管理器npm、webpack構(gòu)建工具、GIT等，都需要牢牢掌握。

了解框架：

做前端開(kāi)發(fā)的都知道3大框架：Angular、Vue、React，下面說(shuō)說(shuō)他們的特點(diǎn)。

1、React：次組件重復(fù)渲染問(wèn)題需要手動(dòng)優(yōu)化；redux可以用于狀態(tài)管理，函數(shù)化，不可變，模式化，時(shí)間旅行；JSX，完全的 javascript功能；更加繁榮的社區(qū)生態(tài)。

2、Vue：可使用JSX，但推薦使用模版語(yǔ)言不是JSX；

3、Angular：包括模板、數(shù)據(jù)雙向綁定、路由、模塊化、服務(wù)、過(guò)濾、依賴項(xiàng)注入等所有功能的完整 MV框架；Typescript；比較 UI與后臺(tái)數(shù)據(jù)一致性的不完整數(shù)據(jù)檢查。

jQuery（了解即可） ：它使用簡(jiǎn)單，學(xué)習(xí)方法也很簡(jiǎn)單。只要根據(jù)產(chǎn)品文檔完成幾頁(yè)的工作，你就不需要做任何事情。然后，查一下這些文件。這個(gè)框架可以幫助你屏蔽瀏覽器的多樣性，讓你更加關(guān)注 Web開(kāi)發(fā)的本質(zhì)和學(xué)習(xí)。

前端工程師從來(lái)都不是一個(gè)靜態(tài)的崗位，不要以為程序?qū)懙膬?yōu)秀就可以成為優(yōu)秀的前端工程師。

前端是背景實(shí)現(xiàn)和視覺(jué)表達(dá)之間的橋梁，貫穿整個(gè)產(chǎn)品開(kāi)發(fā)過(guò)程，起著承上啟下的作用。一個(gè)好的前端工程師可以很好的理解產(chǎn)品經(jīng)理對(duì)用戶體驗(yàn)的要求，也可以很好的理解后臺(tái)工程師對(duì)數(shù)據(jù)邏輯或者程序邏輯分離的要求，并將這些要求轉(zhuǎn)化為前端開(kāi)發(fā)工作。

前端開(kāi)發(fā)工作是目前計(jì)算機(jī)科學(xué)職業(yè)領(lǐng)域中最復(fù)雜的一個(gè)工種，絕大多數(shù)的編程思想在前端開(kāi)發(fā)中已經(jīng)out了，只有保持學(xué)習(xí)與時(shí)俱進(jìn)的專(zhuān)業(yè)技術(shù)，才能幫助你涉及到更廣闊而復(fù)雜的領(lǐng)域哦。

最后，如果你選擇了前端，那就請(qǐng)一定要堅(jiān)持下去！

以上就是本次分享的全部?jī)?nèi)容，想學(xué)習(xí)更多編程技巧，歡迎持續(xù)關(guān)注六星云課堂！