【重學(xué)前端專欄學(xué)習(xí)筆記】建立系統(tǒng)的知識架構(gòu)體系

shaonbean 發(fā)布于2019-08-26 10:49 / 1192人閱讀

摘要：首先一上來就分享了兩個學(xué)習(xí)方法建立知識架構(gòu)追本溯源。列一份前端知識架構(gòu)圖在這章節(jié)中，分享了本專欄要學(xué)習(xí)的知識架構(gòu)瀏覽器的實現(xiàn)原理和前端工程實踐四個模塊。最后一個是前端工程實踐，從性能工具鏈持續(xù)集成搭建系統(tǒng)架構(gòu)與基礎(chǔ)庫五個方面講起。

明確你的前端學(xué)習(xí)路線

自己特別喜歡屯課，看著自己買的課，有種滿足感，仿佛知識都是我的了，翻看極客時間買的課，決定這段時間把重學(xué)前端專欄學(xué)習(xí)一遍。

從周六到今天，一共學(xué)習(xí)了 5 篇文章，這個專欄的信息量是非常大的，特別是第一章《前端的學(xué)習(xí)路線與方法》給我的啟發(fā)特別大。

首先一上來就分享了兩個學(xué)習(xí)方法：建立知識架構(gòu)、追本溯源。

建立知識架構(gòu)很夠就相當(dāng)于把知識分類了，輸入時有條理的存儲，輸出時能夠快速找出對象的知識點。而追本溯源的學(xué)習(xí)方法特別適用于一些概念性的東西，可以追溯提出時的背景及之后的演變過程等。

建立知識架構(gòu)

winter 在文中說：你的知識框架是啥？this、閉包、作用域、原型等術(shù)語拼湊起來？這些名詞之間有關(guān)聯(lián)嗎？

顯然這只是在堆砌名詞，就算你弄清楚了this是啥，但你始終不知道this為啥為這樣。然后每次新技術(shù)發(fā)布后，在一堆名詞中迷失，無從下手。

winter 給出了他的知識框架，他將javascript分成了三個層級：

文法

詞法

語法

語義

運行時

類型

執(zhí)行過程

為什么這么劃分，他說：對任何計算機語言來說，必定是“用規(guī)定的文法，去表達(dá) 特定語義，最終操作運行時”的一個過程

這里有三個名詞：文法、語義、運行時。這三個詞大部分同學(xué)都比較陌生，當(dāng)然我也是。第一次接觸到這些名詞，給我挺沖擊的，雖然還不明白其中的意義，這里先混個眼熟，下次在出現(xiàn)這些名詞，就會有個印象。

追本溯源

追本溯源的方法能夠幫我們了解一些看起來不太合理的東西，有時候還能發(fā)現(xiàn)一些八卦。

在饑人谷跟著方方學(xué)的時候，方方老師每次在講一個新概念的時候，總是從歷史講起，這些知識雖然看上去沒啥用，但是這些知識在你今后的遇到一些不太理解的東西是特別有用，就不會去質(zhì)疑知識本身了。

列一份前端知識架構(gòu)圖

在這章節(jié)中，winter 分享了本專欄要學(xué)習(xí)的知識架構(gòu)：javascript、html/css、瀏覽器的實現(xiàn)原理和API、前端工程實踐四個模塊。

javascript按照文法、語義、運行時進(jìn)行講解，這個符合語言的一般規(guī)律：用一定的詞法和語法，表達(dá)一定語義，從而操作運行時。

按照這個一遍規(guī)律在繼續(xù)往下分，運行時又可以分為：數(shù)據(jù)結(jié)構(gòu)和執(zhí)行過程，數(shù)據(jù)結(jié)構(gòu)和執(zhí)行過程還能再繼續(xù)往下分...

文法中的語法和語義是一一對應(yīng)的關(guān)系

html/css和瀏覽器的實現(xiàn)原理和API知識比較細(xì)碎，我這里就不一一列舉出來了。

最后一個是前端工程實踐，從性能、工具鏈、持續(xù)集成、搭建系統(tǒng)、架構(gòu)與基礎(chǔ)庫五個方面講起。

總結(jié)

在結(jié)束的時候，winter 留了一個問題：你的知識劃分是否和我一樣？

我之前的知識體系非常混亂，js、ts、vue、git、webpack、小程序，es6、canvas等知識混為一談，越學(xué)越迷茫，學(xué)了這個又想學(xué)那個，學(xué)了那個這個又放棄了，因為我根本不知道要學(xué)啥，只知道這些名詞，所見即所得，那都學(xué)了吧，而正確的學(xué)習(xí)方法就應(yīng)該像 winter 這樣的劃分知識架構(gòu)，然后深入去學(xué)。