之前的Blog中講到了,重新開(kāi)始理解前端和明確你前端的學(xué)習(xí)方法和學(xué)習(xí)路線,前文中講到了對(duì)應(yīng)的方法,但是對(duì)應(yīng)的學(xué)習(xí)路線還沒(méi)有做具體介紹,這一篇,我們來(lái)講講前端學(xué)習(xí)路線,也為我在學(xué)習(xí)前端的過(guò)程中,溫習(xí)和鞏固!
那么我們?cè)诹幸粋€(gè)知識(shí)架構(gòu)圖的時(shí)候,我們應(yīng)該注意什么或者我們應(yīng)該如何做?
- 知識(shí)架構(gòu)圖不是一個(gè)參考手冊(cè)!
- 知識(shí)架構(gòu)圖并不是一個(gè)語(yǔ)言標(biāo)準(zhǔn)!
- 知識(shí)架構(gòu)圖本質(zhì)上是為了更好地查閱,便于理解和全面!
- 語(yǔ)言標(biāo)準(zhǔn)更多的是嚴(yán)謹(jǐn),無(wú)遺漏和無(wú)歧義!
除此之外,架構(gòu)圖的的目標(biāo)是什么?
- 把不方便和記憶的內(nèi)容整理好
- 把不容易查閱解決的過(guò)程中在后面的Blog中講解明白!
對(duì)應(yīng)的寫B(tài)log是一種非常不錯(cuò)的學(xué)習(xí)方式,有人可能會(huì)說(shuō):"對(duì)應(yīng)的寫教程的方式不應(yīng)該是更好的嘛?"
是的,無(wú)論是教程還是所謂的Blog都是一種不錯(cuò)的學(xué)習(xí)方式,但是如果說(shuō)考慮到時(shí)間成本的話,教程的篇幅和內(nèi)容非常多并且非常細(xì)致,一個(gè)人也非常難做好,鑒于現(xiàn)在互聯(lián)網(wǎng)上的MDN以及阮一峰老師有更好的更細(xì)致的教程!因此沒(méi)必要去做,并且做了也不一定能夠做得更好!
因此一個(gè)前端知識(shí)框架的建立,將重要的有聯(lián)系的知識(shí)點(diǎn)將整個(gè)架子搭建起來(lái),再把對(duì)應(yīng)的知識(shí)點(diǎn)做個(gè)遍歷,將原理和背景的部分做深度剖析和理解!對(duì)應(yīng)的不是那么重要甚至是沒(méi)有背景的部分可以使用手冊(cè)或者標(biāo)準(zhǔn)進(jìn)行查詢!
前端總體部分上來(lái)看,可以劃分為兩個(gè)部分,分別為,基礎(chǔ)知識(shí)部分和實(shí)踐部分
- 基礎(chǔ)知識(shí)部分
- JavaScript語(yǔ)言
- CSS和HTML語(yǔ)言
- 瀏覽器實(shí)現(xiàn)原理和API
三個(gè)模塊組成了對(duì)應(yīng)的基礎(chǔ)知識(shí)部分!
JavaScript對(duì)應(yīng)的知識(shí)架構(gòu)圖:
其實(shí)圖中的部分還是不難理解的,我們看JavaScript應(yīng)該站在編程語(yǔ)言的角度去看待,符合一般規(guī)律:
用一定的詞法和語(yǔ)法,表達(dá)一定的語(yǔ)義,從而操作運(yùn)行時(shí)!
運(yùn)行時(shí)分為數(shù)據(jù)結(jié)構(gòu)和算法:
- 數(shù)據(jù)結(jié)構(gòu)包含類型和實(shí)例
- 對(duì)應(yīng)的JavaScript的類型系統(tǒng)就是它的7中基本類型和7種語(yǔ)言類型!實(shí)例就是JavaScript內(nèi)置的對(duì)象部分!
對(duì)應(yīng)的實(shí)例部分其實(shí)就是JavaScript中的基礎(chǔ)庫(kù),JavaScript內(nèi)置對(duì)象多大150個(gè)以上!我會(huì)在以后的Blog上面講到!
CSS和HTML架構(gòu)圖
其中通過(guò)上圖可以看到,HTML分為元素,語(yǔ)言和標(biāo)準(zhǔn),先從元素開(kāi)始,所謂的元素對(duì)應(yīng)了HTML中的標(biāo)簽,例如說(shuō)在head里面我們稱之為元信息類標(biāo)簽,title和meta,style,link,以及base這些,用來(lái)描述文檔的一些基本信息!
用來(lái)描述數(shù)據(jù)的數(shù)據(jù)我們稱之為元數(shù)據(jù),用來(lái)描述信息的標(biāo)簽我們稱之為元信息標(biāo)簽!
之后還有一些例如section,nav,article標(biāo)簽,在視覺(jué)表現(xiàn)上面和所謂的div沒(méi)有區(qū)別,但是各自有不同的應(yīng)用場(chǎng)景,稱之為語(yǔ)義類標(biāo)簽!
對(duì)應(yīng)的一些例如img,audio和vedio之類的標(biāo)簽,一般是用來(lái)引用外部?jī)?nèi)容,開(kāi)發(fā)中也會(huì)經(jīng)常用到,稱之為替換型元素!
因此,我們把HTML里面的知識(shí)點(diǎn)按照了功能劃分了如下所示
| name | description |
|---|---|
| 文檔元信息 | 出現(xiàn)在head標(biāo)簽中的元素,描述文檔自身的一些信息 |
| 語(yǔ)義相關(guān) | 擴(kuò)展了純文本,表達(dá)文章結(jié)構(gòu),不同語(yǔ)言要素的標(biāo)簽 |
| 鏈接 | 提供文檔內(nèi)核文檔外的標(biāo)簽 |
| 替換型標(biāo)簽 | 引入聲音,圖片,視頻等外部元素替換自身一類的標(biāo)簽 |
| 表單 | 用于填寫和提交信息一類的標(biāo)簽 |
| 表格 | 表頭,表尾單元格等表格的結(jié)構(gòu) |
CSS部分是按照語(yǔ)言和功能進(jìn)行劃分的,之后會(huì)介紹到CSS的語(yǔ)法相關(guān)的內(nèi)容,例如說(shuō)@rule,選擇器,單位等等,功能這塊,可以分為布局,繪制,交互等!
瀏覽器的實(shí)現(xiàn)原理和API
因?yàn)槲覀兪乔岸顺绦騿T,我們的應(yīng)用大部分情況下是跑在瀏覽器上面的,因此學(xué)習(xí)瀏覽器這塊的知識(shí)也是非常必要的,我們可以從圖上看,瀏覽器相關(guān)的知識(shí)我們可以按照思維導(dǎo)圖的方式進(jìn)行理解!
- 從瀏覽器的設(shè)計(jì)出發(fā),按照解析,構(gòu)建DOM樹(shù),和計(jì)算CSS,渲染,合成和繪制的流程來(lái)了解和學(xué)習(xí)瀏覽器的工作原理!
- 之后涉及到了API部分的知識(shí)點(diǎn),可以從W3C標(biāo)準(zhǔn)中的幾個(gè)大塊的API來(lái)學(xué)習(xí),主要有:
- 事件
- DOM
- CSSOM
API部分涉及到的知識(shí)分別覆蓋了,交互,語(yǔ)義和可見(jiàn)效果是工作中常常用到的知識(shí)!
涉及到其他的API應(yīng)該如何學(xué)習(xí)呢? 我們可以根據(jù)Chrome已經(jīng)實(shí)現(xiàn)的API和W3C標(biāo)準(zhǔn)相關(guān)的API進(jìn)行對(duì)照和學(xué)習(xí)!
總結(jié)和思考
和上圖一樣,列出了對(duì)應(yīng)的知識(shí)圖譜之后,可以針對(duì)性的進(jìn)行學(xué)習(xí)了,而不至于學(xué)習(xí)前端的時(shí)候毫無(wú)頭緒了! 如果你有很么好的建議和想法,請(qǐng)?jiān)谠u(píng)論區(qū)告訴我!
