如果你是以下幾個類型的學(xué)生，這篇文章一定要看！

從零開始小學(xué)生：懷著滿腔的熱血，看到了這一個行業(yè)的希望和未來，準(zhǔn)備開始學(xué)習(xí) Web 開發(fā)知識。先通過 w3cschool 等免費學(xué)習(xí)資源把 HTML、CSS 和 JavaScript 的基本操作學(xué)會了寫一個簡單的表白頁面送給你的女/男朋友，展示一下自己努力的成果，如果沒有就當(dāng)我沒說

懵懵懂懂初學(xué)者：懂得如何使用 HTML、CSS 和 JavaScript 三大件來實現(xiàn)基本頁面開發(fā)功能選擇一個可以覆蓋多種場景、可以隨自己意愿調(diào)整難度的項目嘗試實現(xiàn)，如博客系統(tǒng)、記賬本、Markdown 編輯器等從 React 和 Vue 這兩個框架中選擇一個進行學(xué)習(xí)

輕車熟路新玩家：懂得使用框架來實現(xiàn)上面所舉例項目學(xué)習(xí) Redux、Vuex 或者 MobX 等狀態(tài)管理工具，并將他們使用到前面的項目中思考狀態(tài)管理工具為你的項目帶來了什么好處

初出茅廬新司機： 懂得如何使用腳手架創(chuàng)建項目，并且能將代碼結(jié)構(gòu)根據(jù)模塊化的思想進行安排學(xué)習(xí) TypeScript，對前面的項目進行重寫，注重對數(shù)據(jù)結(jié)構(gòu)和類型的控制學(xué)習(xí) Node.js，試著配合數(shù)據(jù)庫實現(xiàn)一個比博客系統(tǒng)更為復(fù)雜的 CMS（內(nèi)容管理系統(tǒng)），如 圖書館管理系統(tǒng)、倉庫管理系統(tǒng)

基本上手好司機：如果是懂得如何利用 Node.js 或 TypeScript 編寫業(yè)務(wù)代碼的思考在前面使用框架開發(fā)的項目中，有哪些代碼是重復(fù)冗余的，有哪些邏輯是可以在多個組件之間共用的學(xué)習(xí)利用 ES2015 或更新的 JavaScript 標(biāo)準(zhǔn)，逐步替換使用框架所編寫的代碼

淡定自然老司機：如果是對邏輯抽象、模塊封裝有了一定的理解和經(jīng)驗的思考如何使用純 JavaScript 對業(yè)務(wù)組件中的非渲染、非 DOM 相關(guān)代碼進行抽象引入單元測試工具，對純邏輯代碼進行測試，爭取覆蓋率達到 80% 以上

賽道新手初學(xué)者：如果上面的條件你都已經(jīng)滿足了 思考不同的代碼哲學(xué)（OO、FP 等）、不同的代碼結(jié)構(gòu)（MVC、MVVM 等）的區(qū)別思考不同的框架之間設(shè)計的初衷，思考不同的編程語言中對同一類問題不同解法的區(qū)別。

如何看源碼新人剛開始看源碼，會陷入兩個困境中。一是無從下手。二是看了之后感覺沒啥收獲。這個也很正常。一般我們熟知的框架都有個幾千甚至上萬個PR。太大細節(jié)會干擾你。掌握整個節(jié)奏和流程。學(xué)習(xí)原理也比較吃力。就連找個入口都像大海撈針一樣。

建議從下面幾個方面入手：挑簡單的上手。別一開始就搞 vue、react、webpack。太難，會直接勸退新人。不要為了面試而去讀。反而效果不好，面試稍微問深入一點就答不出來了。平時有興趣多琢磨琢磨。按照難易程度，函數(shù)庫 < 組件庫 < 框架 < 工程化 分別典型代表 lodash < vant < vue < webpack手擼簡易模型。

像vue, webpack, babel 都有簡易項目給你做。有的創(chuàng)始人（尤哥）還直播如何做。國外的更多，youtube 一搜一大堆。就算不看源碼，照著寫出了簡易 demo 對原理和理解提升都是很大的。調(diào)試開源項目。先把項目拉下來。在vscode里面跑下，核心函數(shù)多打幾個斷點。看看里面變量是怎么diff的。重點搞下babel、webpack。

 學(xué)習(xí)下編譯，打包的原理。自己配置下 webpack。嘗試自己去寫下下 webpack 的 loader 和 plugin。學(xué)習(xí)這些之前要懂一點 node.js， node.js 不需要全部學(xué)習(xí)。一般就日常用到讀寫文件fs接口，path 路徑接口。這些 api 都不難寫幾個 demo 就懂了?；旧蟱ebpack 里面配置文件也沒用到多少 node 的東西。最后自己學(xué)會配置webpack的配置文件。如果想深想去優(yōu)化打包體積和速度，就需要去了解很多webpack插件。webpack 里面最核心的就是插件了。當(dāng)然前端工程化不僅僅是這些，CI/CD可持續(xù)集成, Umi 了解下。shell各種腳本自動化命令、代碼生成技術(shù)了解下。

學(xué)習(xí)吃力的原因肯定是學(xué)習(xí)方法不太正確?？偨Y(jié)下一般怎么才能真正學(xué)到東西詳略得當(dāng)：前端知識太多，抓重點學(xué)，不要像背字典一樣。不要急著寫代碼，先理清流程（以一個函數(shù)為單位，可以先寫注釋）再寫代碼。看視頻看講解是會誤以為自己會了，其實并沒有。學(xué)會總結(jié)：一句話可以講清楚的事情，不要多說一句。

減少心智負擔(dān)。不介意復(fù)制代碼，但是要知道這個代碼里面大致實現(xiàn)原理。感興趣自己重寫一個。較大的項目，不要急著看代碼?？梢韵劝秧椖颗芷饋怼Ｍㄟ^改代碼里面的參數(shù)來理解里面的核心流程。demo 式編程。 對于新框架，參考demo來上手更快更容易理解。漸進式編程。對于比較復(fù)雜的功能/需求。不要想著一氣呵成。先實現(xiàn)一個核心，每次往上面加細節(jié)，有點像繪畫。斷點單步調(diào)試很有用，定位bug會更快。

當(dāng)然有些不易調(diào)試的應(yīng)用選擇打log。一次打 log 要多打點，免得打完log,有得再加。黑盒太多的項目，實在找不到bug原因。發(fā)給同事幫忙看?？赡芎芸炀湍芸闯鰜怼．?dāng)局者迷，旁觀者清。(很多時候是拼寫的問題).