這是我知識(shí)星球的一個(gè)提問(wèn)，我一直沒(méi)有回答，因?yàn)檫@個(gè)問(wèn)題不好回答，我希望思考清楚后再回答給大家。同時(shí)為了能讓更多人看到，我在公眾號(hào)里也發(fā)一下。

但是我不想再拿Android作為例子來(lái)分析了，因?yàn)槲乙呀?jīng)分析過(guò)很多次了。最近大前端和跨平臺(tái)概念很熱，我也在星球內(nèi)發(fā)布了學(xué)習(xí)路線，這里我就以大前端為例分析下這個(gè)問(wèn)題。

面對(duì)一個(gè)技術(shù)上的新事物，面對(duì)一個(gè)我們不熟悉的領(lǐng)域，如何快速抓住本質(zhì)并整理出有效的學(xué)習(xí)方法和路徑呢？只需要按照如下幾個(gè)步驟。

1. 了解這個(gè)新領(lǐng)域

面對(duì)一個(gè)陌生的領(lǐng)域，在正式學(xué)習(xí)之前，我們需要做充分的調(diào)研。調(diào)研的目的是對(duì)這個(gè)領(lǐng)域建立感性的認(rèn)識(shí)，然后整理這個(gè)領(lǐng)域的常見(jiàn)知識(shí)點(diǎn)。

調(diào)研的方法如下：

1. 百度搜索Web前端

2. 關(guān)注技術(shù)公眾號(hào)、閱讀網(wǎng)上博客、看培訓(xùn)公司課程目錄

3. 看大公司前端工程師的招聘要求

百度搜索web前端可以讓你web前端是個(gè)什么東西，然后閱讀幾篇前端學(xué)習(xí)路線相關(guān)的技術(shù)文章就可以知道大概的知識(shí)點(diǎn)，還有就是培訓(xùn)公司的課程目錄，雖然大家覺(jué)得培訓(xùn)公司有點(diǎn)low，但是他們的課程規(guī)劃是沒(méi)問(wèn)題的。

在這個(gè)過(guò)程中，我們可以了解到前端是有很多知識(shí)的：

基礎(chǔ)知識(shí)：HTML、CSS、JavaScript、ECMAScript、瀏覽器兼容性、自定義UI和動(dòng)效

JavaScript框架：jQuery、yui、extjs、vue.js、react.js、angularjs等一大堆

構(gòu)建工具：npm、webpack、gulp

偏后臺(tái)的開(kāi)發(fā)：nodejs

2. 了解各個(gè)技能

經(jīng)過(guò)第一個(gè)步驟，我們對(duì)前端有了一定的了解。前端里面有很多知識(shí)點(diǎn)，這個(gè)時(shí)候我們要去初步學(xué)習(xí)下這個(gè)知識(shí)點(diǎn)，如果說(shuō)你對(duì)這些知識(shí)點(diǎn)都不懂，那你又如何能找出那些核心知識(shí)點(diǎn)呢？

學(xué)習(xí)方法：

1. 通過(guò)關(guān)鍵字在網(wǎng)上搜搜技術(shù)文章

2. 找到相關(guān)的技術(shù)圖書(shū)，看它的目錄

這二者結(jié)合，可以讓你對(duì)這個(gè)技術(shù)有個(gè)更理性的認(rèn)識(shí)：大概包含多少內(nèi)容？是偏語(yǔ)言還是偏工具？學(xué)習(xí)完大概要多久？

基于這個(gè)認(rèn)識(shí)，我們就可以得出：完整學(xué)習(xí)一遍前端技術(shù)大概需要多長(zhǎng)時(shí)間？很顯然，需要很長(zhǎng)時(shí)間，為了讓我們的學(xué)習(xí)事半功倍，也為了讓整個(gè)學(xué)習(xí)更體系化，我們就需要找出核心知識(shí)點(diǎn)，即新技術(shù)的本質(zhì)。

3. 找到事物的本質(zhì)

我給大家分析一遍。

入門(mén)必備：HTML、CSS、JavaScript屬于語(yǔ)言層面，語(yǔ)言是最基本的，毫無(wú)疑問(wèn)必須要學(xué)會(huì)。

入門(mén)提高：瀏覽器兼容性、自定義UI和動(dòng)效看起來(lái)和Android中的兼容性以及UI特效很像，這類知識(shí)稍微有點(diǎn)難度。

完成了上面兩點(diǎn)，你就入門(mén)了，你可以在不使用第三方框架的情況下開(kāi)發(fā)一個(gè)網(wǎng)頁(yè)了。所以這一塊知識(shí)一定是前端最最本質(zhì)的東西。

中級(jí)：可以看到JavaScript框架層出不窮，可以簡(jiǎn)單理解為整個(gè)前端的變革其實(shí)就是由JavaScript推動(dòng)的。所以一波JavaScript框架的新起就必定伴隨著另一波JavaScript框架的衰落，相信我們?cè)谡{(diào)研階段不難得出：現(xiàn)在是vue和react獨(dú)大的時(shí)代，如果要學(xué)習(xí)的話，他們兩個(gè)就是核心。

小規(guī)模開(kāi)發(fā)沒(méi)有協(xié)作，大規(guī)模開(kāi)發(fā)要求版本管理和團(tuán)隊(duì)協(xié)作，所以就有了類似于包管理和模塊化相關(guān)的概念，和Android的gradle類似，這些東西你最起碼要會(huì)用。

高級(jí)：上面的東西都要求我們會(huì)用就行了，但是如果想成為高級(jí)工程師，還是離不開(kāi)原理：研究主流JavaScript框架的源碼，比如vue和react。

所以得出如下核心學(xué)習(xí)路線：
HTML
掌握HTML和HTML5的常用標(biāo)簽和語(yǔ)法

CSS
熟練使用CSS和CSS3

JavaScript
熟悉JavaScript的語(yǔ)法，包括變量和方法定義、閉包、原型鏈，熟悉es6的新語(yǔ)法特

自動(dòng)化構(gòu)建
了解node.js的安裝和npm命令的使用，會(huì)使用webpack

前端框架
比如vue.js或者react.js，二選一即可，推薦react，因?yàn)镽eactNative用的是react

框架原理
研究vue和react源碼，嘗試自己寫(xiě)框架

任何領(lǐng)域，大家都可以按照這個(gè)思路來(lái)，從入門(mén)到中級(jí)再到高級(jí)，希望大家都能慢慢學(xué)會(huì)這種分析新事物的能力。