JS 知識架構圖

以前開發者只要掌握 HTML、CSS、JavaScript 三駕馬車就能勝任一份前端的工作了。而現在除了普通的編碼以外,還要考慮如何性能優化,如何跨端、跨平臺實現功能,尤其是 AI、5G 技術的來臨,都在加快前端技術的更新,也在逼促開發者要不停的學習,不能的接受新的技術標準。

因此,“學什么”“怎么學”其實是我們要著重解決的問題。所以,今天給你梳理一下前端知識框架,幫你把知識點重新做個遍歷,查缺補漏的學習更輕松。

這份知識框架,也是極客時間《重學前端》專欄里的一些核心內容,十分珍貴。

我們先來看什么叫做知識架構?

我們可以把它理解為知識的“目錄”或者索引,它能夠幫助我們把零散的知識組織起來,也能夠幫助我們發現一些知識上的盲區。

本文包含了JavaScript、CSS和HTML以及瀏覽器的實現原理和API,這三個模塊涵蓋了一個前端工程師所需要掌握的全部知識。

JavaScript知識架構圖

在JavaScript的模塊中,首先我們可以把語言按照文法、語義和運行時來拆分,這符合編程語言的一般規律:用一定的詞法和語法,表達一定語義,從而操作運行時。

運行時可以分為數據結構和算法部分——數據結構包含類型和實例(內置對象),算法是執行過程。執行過程應按照從最頂層的事件循環和微任務,到函數、再到語句級的執行。

語法和語義基本是一一對應關系,在JavaScript標準中有一份語法定義表,建議隨時拿出來看一看。

HTML 和 CSS知識架構圖

在HTML的部分,我們按照功能和語言來劃分它的知識,HTML的功能主要由標簽來承擔,所以首先要把標簽做一些分類。圖中元素后面的分類,便是我們按照承擔的不同功能,把標簽分成的幾個類別。

除了標簽之外,你還應該把HTML當作一門語言來了解下。較基礎的HTML的語法和幾個重要的語言機制:實體、命名空間,你一定要掌握。

CSS部分,可以按照語言和功能劃分。

  • 語言部分,@rule、選擇器、單位是三個要關注的部分。

  • 功能部分,可以重點關注布局(正常流和彈性布局)、繪制(圖形和文字)以及交互類。

瀏覽器的實現原理和API

瀏覽器的實現原理,是我們深入理解 API 的基礎。

從一般的瀏覽器設計出發,按照解析、構建DOM樹、計算CSS、渲染、合成和繪制的流程來學習瀏覽器的工作原理。

在API部分,可以從W3C零散的標準中挑選幾個大塊的API來詳細講解,主要有:事件、DOM、CSSOM幾個部分,他們分別覆蓋了交互、語義和可見效果,這是我們工作中用到的主要內容。

看完文章還有福利拿,往下看??????
小伙伴可以在公號【grain先森】后臺回復【190311】獲取完整版JS知識框架圖。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,628評論 1 45
  • 前端開發面試題 <a name='preface'>前言</a> 只看問題點這里 看全部問題和答案點這里 本文由我...
    自you是敏感詞閱讀 784評論 0 3
  • 前端開發面試題 面試題目: 根據你的等級和職位的變化,入門級到專家級,廣度和深度都會有所增加。 題目類型: 理論知...
    怡寶丶閱讀 2,606評論 0 7
  • 風正一線闊,夏日登高臨。 聚接天地氣,吞吐成龍云。 悠悠空中坐,隱隱蓬萊嵩。 瓜渡千帆懸,鐘山草木深。 (平水韻 ...
    劉秉均閱讀 548評論 0 2
  • 明天就要回家了,沒有太多的歡快,也沒有過多的憂愁,心情很平淡。這次回家的消息,我都沒有和家里說。 以前回家...
    蕊之雪閱讀 197評論 0 0