前言

先不談具體的學(xué)習(xí)內(nèi)容，我準(zhǔn)備通過(guò)自己在前端方面的學(xué)習(xí)成長(zhǎng)歷程，并結(jié)合幾年的工作經(jīng)驗(yàn)來(lái)談?wù)剬?duì)前端學(xué)習(xí)的想法。以下都是筆者的愚見(jiàn)，請(qǐng)大家保持平常心看待。

在前端技術(shù)日新月異的今天，正在從事前端開(kāi)發(fā)或者想要從事前端開(kāi)發(fā)的讀者都會(huì)有一個(gè)疑惑：前端發(fā)展的速度太快了，該怎么去學(xué)？

前端發(fā)展的速度有多快？我們仔細(xì)想一下。

在JavaScript方面，正當(dāng)我們沉浸在ES 2015（ES6）帶來(lái)的一系列好處，并開(kāi)始學(xué)習(xí)它時(shí)，ES 2019已經(jīng)登場(chǎng)了。ES的版本正在以每年迭代一次的速度更新，我們都會(huì)感慨，這更新的速度也太快了吧！

就HTML來(lái)說(shuō)，HTML5的誕生為頁(yè)面交互處理、多媒體實(shí)現(xiàn)提供了極大的便利，它也成了Web端未來(lái)的發(fā)展趨勢(shì)。但是回過(guò)頭來(lái)，誰(shuí)又能想到，曾經(jīng)的霸主Flash已然被人們拋棄，在移動(dòng)互聯(lián)網(wǎng)的時(shí)代，后浪終究會(huì)將前浪拍在沙灘上。

就CSS來(lái)說(shuō)，CSS3較之前的版本增加了很多強(qiáng)大的屬性，包括頁(yè)面布局、變換、動(dòng)畫(huà)，豐富了頁(yè)面的呈現(xiàn)形式。可能還沒(méi)等我們系統(tǒng)學(xué)習(xí)完，又有一些新特性出現(xiàn)，我們也許同樣會(huì)感慨，這更新的速度也太快了吧！

就框架或者類庫(kù)來(lái)說(shuō)，曾經(jīng)風(fēng)靡一時(shí)的jQuery逐漸被人拋棄，眾人轉(zhuǎn)向更加符合時(shí)代需求的MVVM框架。

在MVVM時(shí)代，Angular、Vue、React“三駕馬車”并駕齊驅(qū)。Vue自2016年完成2.0版本升級(jí)后便火得一發(fā)不可收拾，在GitHub上的star數(shù)徑直超過(guò)React。在我們猶豫該好好學(xué)哪個(gè)框架時(shí)，Vue已經(jīng)完成了3.0版本的升級(jí)，我們會(huì)再次感慨，這更新的速度也太快了吧！

也許gulp、webpack等項(xiàng)目構(gòu)建工具，大家還沒(méi)開(kāi)始學(xué)習(xí)，它就已經(jīng)更新到4.0甚至更高的版本。

對(duì)于前端開(kāi)發(fā)，Node.js也是一項(xiàng)必須掌握的語(yǔ)言，其包括了基本的npm、http、文件讀寫等操作。可能還沒(méi)等大家投入精力學(xué)習(xí)時(shí)，它已經(jīng)發(fā)布10.X的版本了，我們不得不再次感慨，這更新的速度也太快了吧！

除了上面提到的這些，還有很多需要學(xué)習(xí)的內(nèi)容，它們都在以極快的速度更新著，可能哪一天業(yè)界又火了一個(gè)新的框架，而沒(méi)準(zhǔn)哪個(gè)框架又成為歷史了。

以上的種種，最終還是會(huì)歸結(jié)成一個(gè)問(wèn)題，應(yīng)該怎么去學(xué)習(xí)前端？

我覺(jué)得最重要的是打牢基礎(chǔ)，善于思考，提高解決問(wèn)題的能力。

而唯一真正要做的就是多敲代碼！多敲代碼！多敲代碼！——重要的事情說(shuō)3遍。

前端的學(xué)習(xí)相比后端有個(gè)便利的地方：我們可以通過(guò)控制臺(tái)，或者通過(guò)HTML源碼等，借助瀏覽器很快地驗(yàn)證自己的觀點(diǎn)，沒(méi)有后端部署、啟動(dòng)server等復(fù)雜的過(guò)程。

那么，該如何快速地學(xué)習(xí)JavaScript呢？

供參考的JavaScript學(xué)習(xí)路線

基于本書(shū)內(nèi)容的整理，我將從以下幾個(gè)階段提供一個(gè)供參考的JavaScript學(xué)習(xí)路線。

1. 基礎(chǔ)篇

JavaScript是前端學(xué)習(xí)的重中之重，對(duì)原生的JavaScript的掌握程度將決定后面對(duì)框架學(xué)習(xí)的理解程度。

在學(xué)習(xí)完JavaScript基礎(chǔ)篇之后，應(yīng)該掌握以下知識(shí)點(diǎn)。

· 數(shù)據(jù)類型。

· 表達(dá)式。

· 循環(huán)結(jié)構(gòu)。

· 內(nèi)置對(duì)象的常用方法。

· 函數(shù)基礎(chǔ)。

· DOM相關(guān)操作、事件。

當(dāng)大家學(xué)習(xí)完基礎(chǔ)內(nèi)容后，可以動(dòng)手編寫一個(gè)網(wǎng)頁(yè)，以檢驗(yàn)自己的學(xué)習(xí)成果。

2. 核心篇

核心篇作為基礎(chǔ)篇的深入，是必須掌握的內(nèi)容，這部分的學(xué)習(xí)成果將決定后續(xù)學(xué)習(xí)的高度。

JavaScript核心篇主要包括以下學(xué)習(xí)內(nèi)容。

· 原型、原型鏈。

· 作用域。

· 閉包。

· this。

· 繼承。

· Ajax。

· ES6。

當(dāng)大家學(xué)習(xí)完核心篇內(nèi)容后，可以多練習(xí)一些JavaScript的經(jīng)典作用域、閉包、繼承等內(nèi)容，并且還可以嘗試封裝一個(gè)屬于自己的輔助類。

3. 模塊化以及組件化

前端開(kāi)發(fā)已經(jīng)從原來(lái)的整體化開(kāi)發(fā)發(fā)展到現(xiàn)在的模塊化開(kāi)發(fā)，甚至是組件化開(kāi)發(fā)，開(kāi)發(fā)過(guò)程愈發(fā)精細(xì)，講求的是代碼的可復(fù)用性。

以前開(kāi)發(fā)一個(gè)頁(yè)面是從上到下一次編寫的過(guò)程，現(xiàn)在已經(jīng)發(fā)展為先將頁(yè)面拆分成模塊甚至是組件，不同的人關(guān)注不同的模塊、組件，以提高開(kāi)發(fā)效率。

JavaScript模塊化開(kāi)發(fā)的標(biāo)準(zhǔn)是由CommonJS規(guī)定的。基于這個(gè)標(biāo)準(zhǔn)，誕生了不同的實(shí)現(xiàn)方式，分別是AMD規(guī)范和CMD規(guī)范。

基于AMD規(guī)范的產(chǎn)物是RequireJS，基于CMD規(guī)范的產(chǎn)物是SeaJS，讀者可以根據(jù)實(shí)際需要做具體選擇。

在學(xué)習(xí)完模塊化知識(shí)后，應(yīng)該掌握以下知識(shí)點(diǎn)。

· AMD規(guī)范和CMD規(guī)范的差異。

· RequireJS和SeaJS的使用方式。

本書(shū)結(jié)構(gòu)

本書(shū)共有7章，各章簡(jiǎn)介如下。

第1章 “JavaScript重點(diǎn)概念”，介紹的內(nèi)容包括JavaScript的基本數(shù)據(jù)類型、運(yùn)算符等。

第2章 “引用數(shù)據(jù)類型”，介紹的內(nèi)容包括Object類型、Array類型、Date類型及一些常見(jiàn)的算法。

第3章 “函數(shù)”，介紹的內(nèi)容包括函數(shù)的定義與調(diào)用、函數(shù)參數(shù)、閉包、this、call()函數(shù)、apply()函數(shù)、bind()函數(shù)等。

第4章 “對(duì)象”，介紹的內(nèi)容包括對(duì)象的屬性和訪問(wèn)方式、創(chuàng)建、克隆、繼承，以及核心的原型對(duì)象的概念。

第5章 “DOM與事件”，介紹的內(nèi)容包括DOM選擇器、常用的DOM操作、事件流、Event對(duì)象等。

第6章 “Ajax”，介紹的內(nèi)容包括Ajax的原理及執(zhí)行過(guò)程、Ajax提交Form表單、Ajax跨域解決方案等。

第7章 “ES6”，介紹的內(nèi)容都是ES6中的新特性，包括let和const關(guān)鍵字、箭頭函數(shù)、Promise、Class、Module等。

總結(jié)

無(wú)論學(xué)習(xí)哪一種語(yǔ)言，都要經(jīng)歷一段漫長(zhǎng)的過(guò)程，耐心才是最重要的。始終還是那4個(gè)字——多敲代碼，努力完成每一個(gè)想要完成的功能。

在學(xué)習(xí)的過(guò)程中遇到問(wèn)題是在所難免的，不要害怕遇到問(wèn)題，記住一點(diǎn)，你所遇到過(guò)的任何問(wèn)題一定是別人遇到過(guò)的。所以遇到問(wèn)題時(shí)，一定要學(xué)會(huì)在網(wǎng)上尋找答案，拒絕做“伸手黨”。

大牛之所以能稱之為大牛，是因?yàn)樗麄兘鉀Q問(wèn)題的能力比別人強(qiáng)，能一眼看出問(wèn)題的所在，而大家要做的就是朝著這個(gè)方向去努力。

周雄

2020.5.30