前端學(xué)習(xí)方法

模塊一
前端知識架構(gòu)：構(gòu)建你的前端知識體系

    兩種高效的前端學(xué)習(xí)方法
    建立前端體系架構(gòu)
    明確前端工程師的發(fā)展方向

JavaScript語言：掌握J(rèn)avaScript的核心功能和設(shè)計(jì)思路

    學(xué)習(xí)JavaScript語言知識
    建立對JavaScript語言的文法、語義、運(yùn)行時(shí)的整體認(rèn)知
    掌握J(rèn)avaScript的核心功能和設(shè)計(jì)思路

    JavaScript運(yùn)行時(shí)
    JavaScript詞法
    JavaScript語法
    JavaScript對象機(jī)制
    腳本與模塊
    函數(shù)
    類
    語法與聲明
    表達(dá)式
    標(biāo)識符與直接量

HTML、CSS語言：掌握HTML應(yīng)用，理解CSS語言、排版、繪制和動畫

    理解HTML語言
    掌握基本語法和主要標(biāo)簽語義
    掌握HTML語言繼承自SGML和XML的各種機(jī)制
    掌握運(yùn)用HTML開發(fā)網(wǎng)頁所需要的知識
    學(xué)習(xí)CSS語法和基本機(jī)制，以及重要的CSS屬性的使用
    掌握用CSS完成網(wǎng)頁視覺和交互效果的技能

    HTML語義：學(xué)習(xí)如何用 HTML 說話
    HTML 與 SGML：DTD、entity 等來自 SGML 的設(shè)施
    HTML 與 XML：namespace、標(biāo)簽封閉
    HTML 的擴(kuò)展：SVG、MathML、Aria
    CSS 語法
    CSS 機(jī)制：Media Query、Viewport、其他 at-rule、選擇器、偽類、偽元素
    排版：盒模型、正常流與文本、Flex、Grid
    繪制：顏色、背景圖片、投影、圓角、濾鏡、Counter
    CSS 動畫

瀏覽器工作原理和 API：動手實(shí)現(xiàn)一個(gè)簡易瀏覽器，梳理 Web 核心 API 及背后機(jī)制

    用 JavaScript 實(shí)現(xiàn)一個(gè)簡化版的模擬瀏覽器
    理解瀏覽器的整個(gè)工作過程
    學(xué)習(xí) DOM 和 CSSOM API 等瀏覽器的核心 API
    掌握在瀏覽器上開發(fā)交互效果的基本能力

    HTTP 協(xié)議的解析
    HTML 語法與詞法
    實(shí)現(xiàn) CSS 計(jì)算
    實(shí)現(xiàn)排版
    實(shí)現(xiàn)渲染和繪制
    基礎(chǔ) DOM 樹操作
    瀏覽器的事件機(jī)制：冒泡與捕獲
    CSSOM、CSS 的對象模型以及與顯示相關(guān)的對象模型
    其他 API

編程與算法訓(xùn)練：12 個(gè)案例提升你的編程內(nèi)功

    訓(xùn)練與語言和運(yùn)行環(huán)境無關(guān)的基礎(chǔ)編程實(shí)例
    訓(xùn)練與 JavaScript 和 Web 相關(guān)的編程實(shí)例
    解決具體問題，提升編程能力

    基礎(chǔ)：TicTacToe /井字棋（遞歸）
    基礎(chǔ)：尋路問題（搜索）
    基礎(chǔ)：出現(xiàn)最多的 50 個(gè)字符串（哈希樹/排序結(jié)構(gòu)）
    基礎(chǔ)：判斷點(diǎn)擊區(qū)域（計(jì)算幾何）
    基礎(chǔ)：括號匹配（棧）
    基礎(chǔ)：wildcard（貪心）
    應(yīng)用：Promise 與異步編程
    應(yīng)用：正則表達(dá)式與文本處理
    應(yīng)用：Proxy 與雙向綁定
    應(yīng)用：使用 Range 實(shí)現(xiàn) DOM 精確操作
    應(yīng)用：使用 CSSOM 實(shí)現(xiàn)視覺交互
    應(yīng)用：解析一個(gè)四則運(yùn)算的表達(dá)式

組件化：掌握組件化核心開發(fā)思想和工程實(shí)踐

    理解組件化的概念、應(yīng)用場景和基本思路
    了解組件化的歷史與現(xiàn)狀
    提升對組件化這一工程手段的認(rèn)知
    設(shè)計(jì)一套組件的基礎(chǔ)設(shè)施，揭秘 React/Vue 風(fēng)格的組件原理。

    組件化基礎(chǔ)知識
    實(shí)現(xiàn)一個(gè)輪播組件
    抽象出手勢庫
    抽象出動畫庫
    為組件添加 JSX 語法
    其他組件
    輪播組件的繼續(xù)改造：生命周期
    輪播組件的繼續(xù)改造：狀態(tài)、屬性、特征
    輪播組件的繼續(xù)改造：事件機(jī)制
    新組件 Tab：容器型組件
    新組件 List：數(shù)據(jù)機(jī)制
    One more thing：Vue 風(fēng)格的 SFC
    組件體系的設(shè)計(jì)

工具鏈：從零設(shè)計(jì)并實(shí)現(xiàn)一套符合大廠要求的工具鏈

    完整實(shí)現(xiàn)一套可以用于實(shí)際開發(fā)的工具鏈模型
    理解工具鏈的各個(gè)方面
    從零開始設(shè)計(jì)一套包含初始化、構(gòu)建、調(diào)試、測試的工具鏈，學(xué)習(xí)大廠如何通過工具鏈保證代碼風(fēng)格、環(huán)境統(tǒng)一，保障基本質(zhì)量。

    整體理解一個(gè)工具鏈的設(shè)計(jì)
    目錄結(jié)構(gòu)與初始化工具
    設(shè)計(jì)并實(shí)現(xiàn)一個(gè)構(gòu)建工具
    設(shè)計(jì)并實(shí)現(xiàn)一個(gè)調(diào)試工具
    設(shè)計(jì)并實(shí)現(xiàn)一個(gè)單元測試工具

發(fā)布與持續(xù)集成：通過發(fā)布和持續(xù)集成保證前端團(tuán)隊(duì)代碼質(zhì)量

    實(shí)現(xiàn)一個(gè)持續(xù)集成和前端發(fā)布體系
    學(xué)習(xí)如何用持續(xù)集成保證前端代碼質(zhì)量
    從零開始搭建一套極簡的線上服務(wù)和與之搭配的發(fā)布系統(tǒng)，基于這個(gè)發(fā)布系統(tǒng)完成前端的持續(xù)集成體系，學(xué)習(xí)如何用持續(xù)集成保證前端代碼質(zhì)量。

    實(shí)現(xiàn)一個(gè)線上 Web 服務(wù)
    實(shí)現(xiàn)一個(gè)發(fā)布系統(tǒng)
    持續(xù)集成：如何使用 Git Hook
    持續(xù)集成：如何使用 Lint 工具
    持續(xù)集成：如何使用無頭瀏覽器
    持續(xù)集成：如何實(shí)現(xiàn) DOM 樹的檢查






作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路