摘要：前言本文主要是有關(guān)前端方面知識(shí)按照目前的認(rèn)知進(jìn)行的收集歸類概括和整理，涵蓋前端理論與前端實(shí)踐兩方面。

前言：
本文主要是有關(guān)前端方面知識(shí)按照 XX 目前的認(rèn)知進(jìn)行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實(shí)踐』兩方面。本文會(huì)告訴你前端需要了解的知識(shí)大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。
初衷。寫這篇文章主要有以下幾個(gè)初衷：

梳理知識(shí)體系。網(wǎng)上雖然有許多類似的內(nèi)容，但每個(gè)人都有各自獨(dú)特的思維方式，適合自己的才是最好的。

探索不足之處。明確自己到底掌握了哪些，哪些本應(yīng)掌握但還沒有學(xué)習(xí)。

完善公司的前端培訓(xùn)方向。前端技能培訓(xùn)的方向由懂前端、懂公司前端團(tuán)隊(duì)的人來設(shè)定最好不過了。

希望借此激發(fā)大家的一點(diǎn)思考。我們都在路上，我不是成功的例子，我寫下我的思考，希望借此激發(fā)大家的一點(diǎn)思考。

一個(gè)梗。自 2012 年以來，我知乎上獲贊最多的答案卻是引用他人的答案……有點(diǎn)尷尬：《一名合格的前端工程師的知識(shí)結(jié)構(gòu)是怎樣的？》

目錄

專業(yè)技能

前端理論

瀏覽器

HTML

CSS

JavaScript

編程通用

SEO 數(shù)據(jù)統(tǒng)計(jì) 數(shù)據(jù)分析

網(wǎng)絡(luò)基礎(chǔ)

交叉領(lǐng)域理論

產(chǎn)品設(shè)計(jì)相關(guān)

后端基礎(chǔ)

前端實(shí)踐

解決實(shí)際問題

學(xué)習(xí)型項(xiàng)目

前端工程

第一階段：框架應(yīng)用

第二階段：簡(jiǎn)單自動(dòng)構(gòu)建優(yōu)化

第三階段：JS/CSS模塊化開發(fā)

第四階段：組件化開發(fā)與資源管理

項(xiàng)目技術(shù)選型

造輪子

版本規(guī)劃

致謝

聯(lián)系方式

結(jié)語(yǔ)

許可

專業(yè)技能 前端理論 瀏覽器

知己知彼

瀏覽器內(nèi)核渲染原理

HTML 解析器

CSS 解析器

JavaScript 引擎

渲染流程

加載

解析（確定結(jié)構(gòu)、計(jì)算樣式）

構(gòu)建 DOM 樹、應(yīng)用樣式

繪制

回流

重繪

瀏覽器調(diào)試

工具

F12

擴(kuò)展插件

瀏覽器常用快捷鍵

調(diào)試內(nèi)容

元素

結(jié)構(gòu)

屬性

樣式

腳本

日志

斷點(diǎn)

事件

變量監(jiān)聽

調(diào)用堆棧

性能

snapshot

耗時(shí)

網(wǎng)絡(luò)請(qǐng)求

模擬請(qǐng)求

審查網(wǎng)絡(luò)

模擬網(wǎng)絡(luò)環(huán)境

內(nèi)存

本地存儲(chǔ)信息

cookie

local storage

cache

調(diào)試技巧

瀏覽器事件

常見事件

鼠標(biāo)事件

表單元素事件

鍵盤事件

文檔事件

CSS 事件

……

事件處理、添加、移除

瀏覽器任務(wù)調(diào)度機(jī)制

micro queue

macro queue

瀏覽器兼容性

各平臺(tái)瀏覽器的坑（家家有個(gè)難填的坑，有的坑深，有的坑淺）

移動(dòng)端瀏覽器

UC

Safari

微信瀏覽器

百度

……

PC 端瀏覽器

Chrome

Firefox

IE

Edge

……

小程序

不同瀏覽器內(nèi)核差異

CSS 私有屬性前綴（注：建議使用 postcss 自動(dòng)化補(bǔ)全）

Polyfill

HTML、CSS、Javascript 特性支持度

MDN

Can I use ?

常見問題

請(qǐng)求跨域

iframe 跨域通信

各種兼容性問題

網(wǎng)頁(yè)加載速度慢

按鈕點(diǎn)擊沒反應(yīng)……

HTML

吃土小2叉：據(jù)說 HTML 和 CSS 一起學(xué)習(xí)體驗(yàn)最佳哦

語(yǔ)法 & 語(yǔ)義

!DOCTYPE HTML 文檔標(biāo)準(zhǔn)

怪異模式

標(biāo)準(zhǔn)模式

head

meta 元數(shù)據(jù)標(biāo)簽

網(wǎng)頁(yè)描述

設(shè)備描述

HTTP 請(qǐng)求描述

HTTP Client Hints

body

裝飾型標(biāo)記（不推薦、部分已廢棄）

功能型標(biāo)記

無(wú)語(yǔ)義容器（div、span）

用戶交互（交互型標(biāo)記）

輸入框

選擇器

多選框

單選框

按鈕

數(shù)據(jù)可視化（展示型標(biāo)記）

列表

定義列表

無(wú)序列表

有序列表

表格

結(jié)構(gòu)化數(shù)據(jù)標(biāo)記、微數(shù)據(jù)

多媒體

圖片

視頻

音頻

SVG、Canvas

文章（正文、摘要、段落、章節(jié)、前言、結(jié)語(yǔ)、引用）

規(guī)范

HTML 代碼規(guī)范

HTML 使用規(guī)范（標(biāo)簽嵌套規(guī)則）

標(biāo)簽類型

可訪問性、無(wú)障礙體驗(yàn)

常見問題

圖片空 src 導(dǎo)致頁(yè)面加載兩次

iframe 空 src 導(dǎo)致無(wú)限循環(huán)加載本頁(yè)面

上圖據(jù)說是 HTML5 規(guī)范中關(guān)于 HTML 標(biāo)簽嵌套規(guī)則的示意圖

CSS

吃土小2叉：用設(shè)計(jì)師的思維去理解 CSS，用程序員的思維去寫 CSS

語(yǔ)法（CSS 從入門到放棄）

基本用法

選擇器

基礎(chǔ)選擇器

組合選擇器

偽類選擇器

媒體查詢

簡(jiǎn)寫屬性

注釋

屬性運(yùn)算 calc()

規(guī)范（編寫可讀性良好的 CSS）

用例規(guī)范

權(quán)限控制

最佳實(shí)踐

不良習(xí)慣

格式規(guī)范

風(fēng)格

復(fù)用

BEM 規(guī)范

邏輯特性（在 CSS / Less 中運(yùn)用 OO 思想和設(shè)計(jì)模式）

權(quán)重（優(yōu)先級(jí)）

作用域

封裝（mixins）

組合（mixins+）

擴(kuò)展（:extend）

繼承（mixins）

CSS 變量、Less 變量

模塊化（import）

視覺設(shè)計(jì)（單一狀態(tài)設(shè)計(jì)）

布局（分久必合、合久必分）

盒模型（高度、寬度、邊框、外邊距、內(nèi)邊距、溢出控制）

定位方式

層疊上下文（z-index）

display 類型（table、inline、inline-block、block、flex、grid）

浮動(dòng)

偽元素：:after、:before

字體排印（厲害了 word 哥）

字體（字體族、網(wǎng)絡(luò)字體）

文本（刪除線、下劃線、斜體、粗細(xì)、字號(hào)）

段落（行高、縮進(jìn)、斷句方式、換行方式）

對(duì)齊

方向

裝飾（神說，要有光）

顏色

背景

邊框（border、outline）

圓角

陰影

漸變

透明度

變形（旋轉(zhuǎn)、縮放、矩陣變化）

交互設(shè)計(jì)（多狀態(tài)設(shè)計(jì)）

動(dòng)畫（運(yùn)動(dòng)和靜止是對(duì)立的統(tǒng)一）

過渡效果

動(dòng)畫關(guān)鍵幀

反饋

active、checked 狀態(tài)

引導(dǎo)

結(jié)合 Javascript

CSS 動(dòng)畫

互動(dòng)

hover 狀態(tài)

多設(shè)備設(shè)計(jì)

響應(yīng)式設(shè)計(jì)（多套代碼，多種設(shè)備）

媒體查詢

自適應(yīng)設(shè)計(jì)（一套代碼，多種設(shè)備）

最小固定寬度布局

百分比布局

柵格布局、彈性布局

js + rem 方案（rpx）

常見問題

視覺還原度

調(diào)試技巧

屬性“失效”問題

transition “失效”？

z-index “失效”？

外邊距合并

邊框 1px 問題

垂直居中

大屏幕 rem 小屏幕 px

圖片適配

可維護(hù)性

權(quán)重控制

嵌套層級(jí)

語(yǔ)義性

擴(kuò)展內(nèi)容

預(yù)處理器：Less、Sass

后處理器：postcss

小程序的 WXSS

Weex、RN 中的 CSS

JavaScript

吃土小2叉：至今還沒看完一遍《JavaScript 高級(jí)程序設(shè)計(jì)》的我是該好好面壁思過了。
本段內(nèi)容大量參考了：《The Modern JavaScript Tutorial》http://javascript.info/ ，推薦閱讀。

JavaScript 標(biāo)準(zhǔn)

嚴(yán)格模式

兼容模式

開發(fā)工具

IDE

輕量編輯器

基礎(chǔ)語(yǔ)法

數(shù)據(jù)類型

基本數(shù)據(jù)類型 number、 string、 boolean、null、undefined、object、symbol

數(shù)據(jù)類型檢測(cè)

解構(gòu)賦值

數(shù)組

對(duì)象

date 與時(shí)間

JSON

格式說明

序列化

反序列化

數(shù)組

數(shù)組操作（增、刪、改、遍歷、復(fù)制）

多維數(shù)組

變量

聲明 var、let、const

聲明提升

作用域

邏輯控制

循環(huán)

分支

判斷

對(duì)象（基礎(chǔ)部分）

對(duì)象操作（增、刪、改、查、復(fù)制）

Symbols

類型轉(zhuǎn)換

垃圾回收機(jī)制

對(duì)象方法中的 this

new

函數(shù)

函數(shù)默認(rèn)值

函數(shù)聲明

立即執(zhí)行函數(shù)

箭頭函數(shù)

運(yùn)算符

數(shù)值運(yùn)算

邏輯運(yùn)算

事件

瀏覽器事件

冒泡、捕獲

事件捕獲

瀏覽器默認(rèn)行為

文檔

DOM 樹

節(jié)點(diǎn)

節(jié)點(diǎn)類型

節(jié)點(diǎn)標(biāo)簽

節(jié)點(diǎn)內(nèi)容

window 對(duì)象

DOM 操作

元素節(jié)點(diǎn)（增、刪、移、換、復(fù)制）

元素屬性（增、刪、改、查）

文本內(nèi)容（增、刪、改、查）

網(wǎng)絡(luò)請(qǐng)求

ajax（回調(diào)函數(shù)）

Promise

async、await

深入細(xì)節(jié)

對(duì)象、類、繼承

屬性標(biāo)記與屬性描述

原型、原型鏈

繼承

屬性定義

對(duì)象混合

類型檢測(cè)

數(shù)據(jù)類型

基本類型

復(fù)雜類型

函數(shù)進(jìn)階

遞歸、調(diào)用堆棧

閉包

函數(shù)綁定、上下文

剩余參數(shù)、擴(kuò)展語(yǔ)法

函數(shù)對(duì)象

任務(wù)調(diào)度：定時(shí)器

柯里化

深入箭頭函數(shù)

函數(shù)式

錯(cuò)誤處理

異常捕獲

代碼質(zhì)量

注釋

相關(guān)工具

ESLint、JSLint

Standard.js

Prettify

自動(dòng)化測(cè)試工具：Jest、Mocha

用例規(guī)范

最佳實(shí)踐

不良習(xí)慣

格式規(guī)范

風(fēng)格

正則表達(dá)式

普通字符、轉(zhuǎn)義字符

元字符

字符類

分支條件

分組

反義

貪婪與懶惰

后向引用

……

編程通用

軟件工程的核心就是管理復(fù)雜度 —— 《代碼大全 2》
推薦閱讀：來自法海@淘寶前端團(tuán)隊(duì)《從達(dá)標(biāo)到卓越 —— API 設(shè)計(jì)之道》

達(dá)標(biāo)（語(yǔ)法、詞法）

正確拼寫

準(zhǔn)確用詞

注意單復(fù)數(shù)

不要搞錯(cuò)詞性

處理縮寫

用對(duì)時(shí)態(tài)和語(yǔ)態(tài)

熟練（語(yǔ)義、可用性）

單一職責(zé)

避免副作用

代碼一致性

合理設(shè)計(jì)函數(shù)參數(shù)

合理運(yùn)用函數(shù)重載

使返回值可預(yù)期

固話術(shù)語(yǔ)表

遵循一致的代碼風(fēng)格

卓越（系統(tǒng)性、大局觀）

版本控制

確保向下兼容

設(shè)計(jì)擴(kuò)展機(jī)制（易于擴(kuò)展）

控制 API 的抽象級(jí)別

設(shè)計(jì)模式

注釋

DRY

編碼規(guī)范

解耦

復(fù)雜度控制

SEO & 數(shù)據(jù)統(tǒng)計(jì) & 數(shù)據(jù)分析

吃土小2叉：盡人事，聽天命（天者，用戶也）

SEO

影響因素

相關(guān)性

title

關(guān)鍵詞密度

權(quán)威性

外鏈

內(nèi)鏈

域名年限

網(wǎng)站收錄

安全性

用戶體驗(yàn)

廣告

加載速度

內(nèi)容質(zhì)量：內(nèi)容真實(shí)性、內(nèi)容原創(chuàng)性、內(nèi)容有益性

用戶反饋

不良行為

堆疊關(guān)鍵詞

抄襲、作弊

大量低價(jià)值外鏈

廣告、木馬、病毒
-數(shù)據(jù)統(tǒng)計(jì)

工具

統(tǒng)計(jì)、埋點(diǎn)工具：Google Analytics、百度統(tǒng)計(jì)、Piwik……

站長(zhǎng)工具：Google Webmaster 、百度站長(zhǎng)工具

其他工具：百度指數(shù)、SEO 各項(xiàng)指標(biāo)助手工具……

數(shù)據(jù)分析

工具

同數(shù)據(jù)統(tǒng)計(jì)工具

腦子是個(gè)好東西

分析方法

歸因、排查

細(xì)分

來源、渠道

用戶屬性

人口統(tǒng)計(jì)學(xué)

用戶終端、型號(hào)

用戶行為

站內(nèi)搜索關(guān)鍵詞

自定義事件（埋點(diǎn)事件）

瀏覽頻率、時(shí)間、跳出頁(yè)

訪問內(nèi)容

訪問漏斗

站點(diǎn)屬性

對(duì)比

時(shí)間維度

統(tǒng)計(jì)指標(biāo)維度

目標(biāo)設(shè)置

轉(zhuǎn)化路徑

轉(zhuǎn)化目標(biāo)

轉(zhuǎn)化價(jià)值

網(wǎng)絡(luò)基礎(chǔ)

此處是不是又要出現(xiàn)，經(jīng)典問題：當(dāng)你在瀏覽器輸入 URL 并回車（非單頁(yè)應(yīng)用的傳統(tǒng)網(wǎng)站），直到你看見這個(gè)頁(yè)面，此時(shí)經(jīng)歷了哪些過程（略去瀏覽器渲染環(huán)節(jié)）。

TCP / IP

HTTP

請(qǐng)求

請(qǐng)求頭

請(qǐng)求正文

響應(yīng)

HTTP 狀態(tài)碼（2xx、3xx、4xx、5xx）

響應(yīng)頭

響應(yīng)正文

過程：三次握手

HTTP2

HTTPS

Web Socket

CORS

Session、Cookie

RESTful / RPC

DNS 、域名、IP

域名劫持

內(nèi)網(wǎng)、公網(wǎng)地址段

緩存

服務(wù)端緩存

客戶端緩存

常用工具

F12 Network Panel

Advanced REST client

EditThisCookie

Wireshark

Fiddler、Charles

常見問題

HTTP 遷移到 HTTPS 站點(diǎn)部署問題

HTTPS 證書部署

TLS 版本問題

證書作用域（是否包含子域名）

證書、秘鑰配置文件

資源加載同協(xié)議

error 級(jí)

外部 JavaScript 加載

iframe

warning 級(jí)

img

CSS

網(wǎng)絡(luò)請(qǐng)求同協(xié)議

error 級(jí)

ajax

jsonp

交叉領(lǐng)域理論

吃土小2叉：學(xué)習(xí)交叉領(lǐng)域知識(shí)的一個(gè)很樸實(shí)的目的 —— 掌握如何甩鍋

產(chǎn)品設(shè)計(jì)相關(guān)

吃土小2叉：學(xué)會(huì)優(yōu)雅地質(zhì)疑設(shè)計(jì) => 給用戶更好的體驗(yàn)

與設(shè)計(jì)師的溝通、協(xié)作

設(shè)計(jì)理念 => 用戶體驗(yàn)

一致性

可用性

易用性

反饋

提升審美

單反窮三代 // 單身狗 XX：也許學(xué)好攝影就能追到女神了呢？

競(jìng)品分析 // 知己知彼，重視對(duì)手

常用工具

雪碧圖生成工具（http://www.spritecow.com/）

圖片有損壓縮工具（https://tinypng.com/）

.psd 智能標(biāo)注（http://www.fancynode.com.cn/p...）

強(qiáng)烈建議設(shè)計(jì)師使用 Sketch 進(jìn)行設(shè)計(jì)

后端基礎(chǔ)

吃土小2叉：只要把這篇文章《系統(tǒng)設(shè)計(jì)入門》上面你不認(rèn)識(shí)的術(shù)語(yǔ)弄懂就可以了 （迷之微笑）
XX 的觀點(diǎn)：時(shí)刻謹(jǐn)記編程語(yǔ)言只是一種工具，分別有不同適用的場(chǎng)景罷了。理性、客觀、結(jié)合實(shí)際。

與后端開發(fā)工程師的溝通、協(xié)作

明確分工

文檔先行

mock 數(shù)據(jù)

簡(jiǎn)單了解一門后端語(yǔ)言 // XX 注：如果你已經(jīng)自己搭建了個(gè)人博客站點(diǎn)，后端語(yǔ)言的語(yǔ)法層面足夠了。

了解前端路由與后端路由的區(qū)別

簡(jiǎn)單應(yīng)用數(shù)據(jù)庫(kù)（MySQL）

增、刪、改、查

備份、導(dǎo)出

了解作用與概念

GraphQL

Nginx

Redis

負(fù)載均衡

CDN

數(shù)據(jù)庫(kù)主從備份

計(jì)算機(jī)相關(guān)基礎(chǔ)知識(shí) // 有時(shí)間多重溫（預(yù)習(xí)）重溫（預(yù)習(xí)）

數(shù)據(jù)庫(kù)

操作系統(tǒng)

編譯原理

離散數(shù)學(xué)

數(shù)字邏輯

前端實(shí)踐

實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)，在此引用 Vue.js 作者尤雨溪的一段話：

技術(shù)方案都是先有問題，再有思路，同時(shí)伴隨著取舍。在選擇衡量技術(shù)的時(shí)候，盡量去思考這個(gè)技術(shù)背后是在解決什么問題，它做了怎樣的取舍。這樣一方面可以幫助我們更好的理解和使用這些技術(shù)，也為以后哪天你遇到業(yè)務(wù)中的特殊情況，需要自己做方案的時(shí)候打好基礎(chǔ)。

解決實(shí)際問題

Learn from you mistakes.
吃土小2叉：寫下這篇文章的時(shí)候恰逢今年高考，很感謝高一的英語(yǔ)老師當(dāng)時(shí)給我們布置的一個(gè)作業(yè)：整理考試錯(cuò)題集。因?yàn)榻?jīng)歷過太多次，同樣類型的題目這次錯(cuò)，下次仍然錯(cuò)。而我又是一個(gè)比較較真的人，每次整理錯(cuò)題的時(shí)候，不單單只記錄做錯(cuò)的問題和答案，還會(huì)去分析這里的考點(diǎn)，所涉及的知識(shí)點(diǎn)，去試著換位思考如果我是出題人，會(huì)怎么出這道題，考哪些知識(shí)點(diǎn)可以坑一下考生。而這一過程，又有著考試做錯(cuò)題的心理愧疚感，記憶會(huì)特別深刻。另一方面，在復(fù)習(xí)階段，也可以更具有針對(duì)性地復(fù)習(xí)，為自己減壓。要盡量把大腦當(dāng)成 CPU 來用，或者倒排索引，而非硬盤、數(shù)據(jù)庫(kù)。
Learn from your practice.
而在編程過程中，也是比較接近。我們可以記錄下自己犯過的錯(cuò)誤，不良的編碼案例。同時(shí)，我們也可以像經(jīng)常收集一些名人名言、固定搭配等寫作套路一樣，去整理、收集自己在開發(fā)過程中的最佳實(shí)踐。當(dāng)然若是有時(shí)間再去思考、反思、優(yōu)化，那就更好了。
Learn from your worry & adversity.
另外，抱著積極的態(tài)度、強(qiáng)大的內(nèi)心去面對(duì)開發(fā)過程中的任何困惑、困境，都是助力快速成長(zhǎng)的好機(jī)會(huì)。

前陣子我在 GitHub 上也開了一個(gè)項(xiàng)目，專門記錄、收集我最近在前端開發(fā)過程中遇到的一些問題，有已經(jīng)解決的，也有仍待解決的。

https://github.com/xunge0613/...

目前整理的已解決問題有：

解決跨域 iframe 父子頁(yè)面間通信問題

微信小程序開發(fā) ide 的選擇

→_→ 沒有更多了……

仍待解決的問題：

如何優(yōu)雅地監(jiān)聽元素高度變化？

移動(dòng)端 banner 輪播圖自適應(yīng)的各種坑

當(dāng)然我也簡(jiǎn)單寫了一些方法論，包括：

如何解決問題？

如何提問題？

后續(xù)我也會(huì)不斷完善這一塊內(nèi)容。重點(diǎn)是：形成一套屬于自己的最佳實(shí)踐經(jīng)驗(yàn)庫(kù)。

學(xué)習(xí)型項(xiàng)目

這一部分內(nèi)容更推薦大家關(guān)注 Phodal 大神的 Growth 系列

https://github.com/phodal/growth

而我給準(zhǔn)備入門前端的新手的建議是：

擁有一個(gè)完全屬于自己的博客、域名、網(wǎng)站、服務(wù)器，并每周固定更新博客文章、每年為博客更新一次主題。

前端工程

勿忘自己的 title：前端工程師

以下引用張?jiān)讫?dalao 的文章：前端工程 —— 基礎(chǔ)篇
第一階段：庫(kù)/框架選型
第二階段：簡(jiǎn)單構(gòu)建優(yōu)化
第三階段：JS/CSS模塊化開發(fā)
第四階段：組件化開發(fā)與資源管理
由于先天缺陷，前端相比其他軟件開發(fā)，在基礎(chǔ)架構(gòu)上更加迫切的需要組件化開發(fā)和資源管理，而解決資源管理的方法其實(shí)一點(diǎn)也不復(fù)雜：
一個(gè)通用的資源表生成工具 + 基于表的資源加載框架

第一階段：框架應(yīng)用

吃土小2叉：只要是一個(gè)文檔友好的框架，遇到不會(huì)的問題，去翻翻文檔，如果解決不了，再去認(rèn)真翻一次。因此，第一階段，亦可認(rèn)為是：面向文檔編程。

此處建議再回憶一下剛才提及的尤大的話。

以下是我個(gè)人的框架/庫(kù)應(yīng)用路線：

jQuery => jQuery + artTemplate => Vue.js + lodash => Vue.js 全家桶

jQuery // 此處參考張?chǎng)涡竦?jQuery 1.4 中文文檔

核心

對(duì)象訪問

數(shù)據(jù)緩存

隊(duì)列控制

插件機(jī)制

多庫(kù)共存

事件

頁(yè)面載入

事件處理

事件委托

事件切換

常用事件

鼠標(biāo)事件（click、dbclick、hover、mouse*……）

鍵盤事件（key*……）

表單事件（blur、change、focus、submit、select）

瀏覽器事件（error、resize、scroll）

觸摸事件（touch*……）

選擇器

基本

組合

偽類

內(nèi)容

可見性

屬性

表單

篩選器

過濾

查找

串聯(lián)

CSS

CSS

位置

尺寸

DOM 操作

元素節(jié)點(diǎn)（增、刪、移、換、復(fù)制）

元素屬性（增、刪、改、查）

文本內(nèi)容（增、刪、改、查）

網(wǎng)絡(luò)請(qǐng)求

Ajax

when

deferred

特效

基本（顯示、隱藏）

滑動(dòng)

淡入淡出

自定義動(dòng)畫控制

輔助工具（類似于 lodash）

數(shù)組、對(duì)象操作

函數(shù)操作

字符串操作

瀏覽器及特性檢測(cè)

類型檢測(cè)

JSON 序列化

artTemplate

模板引擎

Vue.js

MVVM 思想

聲明式渲染

條件與循環(huán)

處理用戶輸入

數(shù)據(jù)綁定、響應(yīng)式數(shù)據(jù)

組件化應(yīng)用構(gòu)建

組件間通信

狀態(tài)管理

lodash.js // 提供各種 helper 方法，專注于數(shù)據(jù)處理

數(shù)據(jù)類型

數(shù)組

集合

日期

函數(shù)

數(shù)值

對(duì)象

字符串

語(yǔ)言特性

類型檢測(cè)

類型比較

復(fù)制

數(shù)學(xué)運(yùn)算

輔助工具

XX：

學(xué)會(huì)用 artTemplate 以后，會(huì)發(fā)現(xiàn) Vue.js 很容易上手

當(dāng)你學(xué)會(huì) Vue.js 以后，你會(huì)發(fā)現(xiàn)小程序真的很容易上手

第二階段：簡(jiǎn)單自動(dòng)構(gòu)建優(yōu)化

專注業(yè)務(wù)開發(fā)

工具

Grunt

Gulp

預(yù)處理

Less

Babel

TypeScript

后處理

PostCSS

校驗(yàn)

ESLint

壓縮

代碼

圖片

合并

打包

自動(dòng)化測(cè)試

mock 接口調(diào)試

第三階段：JS/CSS模塊化開發(fā)

張?jiān)讫垼悍种巍⒎种巍⒎种?/p>

AMD

CommonJS

UMD

ES6 Module

……

第四階段：組件化開發(fā)與資源管理

核心目的：提高開發(fā)效率 & 兼顧運(yùn)行性能

分治、解耦、自由組合、就近維護(hù)

Vue.js 組件化開發(fā)

抽象業(yè)務(wù)邏輯組件

組合基礎(chǔ) UI 組件形成業(yè)務(wù)組件

獨(dú)立編寫業(yè)務(wù)相關(guān)組件

……

定制基礎(chǔ) UI 組件庫(kù)

輪播圖組件

彈窗組件

……

資源管理

推薦閱讀：靜態(tài)網(wǎng)頁(yè)資源的管理和優(yōu)化

項(xiàng)目技術(shù)選型

理性、客觀、避免偏見

預(yù)計(jì)投入

開發(fā)資源

時(shí)間

人手

技術(shù)儲(chǔ)備

項(xiàng)目資源

溝通成本

設(shè)計(jì)文檔、功能文檔、產(chǎn)品原型

后端接口文檔

項(xiàng)目排期

產(chǎn)品資源

用戶群體

瀏覽器兼容性

瀏覽器局限性

SEO 問題

期望回報(bào)

開發(fā)人員自我成長(zhǎng)

公司技術(shù)棧

開發(fā)效率

可維護(hù)性

性能、穩(wěn)定性

易于測(cè)試

易于把控項(xiàng)目周期

應(yīng)急預(yù)案

兼容方案

回退方案

A / B Test

漸進(jìn)增強(qiáng)

Plan B

造輪子

吃土小2叉：要么站在巨人的肩膀上，要么自己成為巨人

未完待續(xù)……

UI 組件庫(kù)

前端工具

前端微服務(wù)

前端框架

（以下內(nèi)容是 XX 的 YY 內(nèi)容）

學(xué)習(xí)優(yōu)秀框架源碼

仿寫核心內(nèi)容

掌握山寨一個(gè)框架的套路

發(fā)現(xiàn)問題

具備扎實(shí)的前端基礎(chǔ) + 運(yùn)氣 + 靈感

解決問題

？

版本規(guī)劃

本文會(huì)在 GitHub 上持續(xù)維護(hù)，歡迎大家提 issue ~

地址是：https://github.com/xunge0613/...

v x.x.x

更新 造輪子

內(nèi)容更新

性能監(jiān)控

安全

考慮翻譯成英文？

加入重要性評(píng)分功能

引導(dǎo)目前階段應(yīng)該掌握哪些

分為：初級(jí)、中級(jí)、高級(jí)

===== 當(dāng)前版本分割線 =====

v 0.0.3 內(nèi)容迭代

更新 編程通用

條目更新

更新 JavaScript

更新 前端實(shí)踐

新增引導(dǎo)語(yǔ)

更新支付寶圖標(biāo)、微信圖標(biāo)……

v 0.0.2 內(nèi)容迭代

新增 后端基礎(chǔ)

新增 前端工程 第一階段 jQuery、Vue.js 介紹

新增 常見問題

更新 前言

更新 網(wǎng)絡(luò)基礎(chǔ)

更新 學(xué)習(xí)型項(xiàng)目

致謝

前端工程 —— 基礎(chǔ)篇 by 張?jiān)讫?/p>

從達(dá)標(biāo)到卓越 —— API 設(shè)計(jì)之道 by 法海@淘寶前端團(tuán)隊(duì)

The Modern JavaScript Tutorial by Ilya Kantor

jQuery 1.4 中文文檔 by 張?chǎng)涡?/p>

MDN Web 開發(fā) // 這里有個(gè)小彩蛋，這個(gè)頁(yè)面右上角有某 XX

聯(lián)系方式

歡迎聯(lián)系我討論本文的不足、問題或者意見。

可以在我的 GitHub 主頁(yè)上找到我的聯(lián)系方式

亦可關(guān)注我的微信公眾號(hào)：清風(fēng)迅來

結(jié)語(yǔ)

作為一個(gè)老菜鳥，我只是知識(shí)的搬運(yùn)工

本文大多討論的是有哪些知識(shí)點(diǎn)（what），至于如何學(xué)習(xí)與應(yīng)用這些知識(shí)點(diǎn)（how & why），敬請(qǐng)期待我之后的一系列文章，目前已完成一些雛形，僅供試閱：

Growth CSS

Growth Vue

感謝您一路看到這里，歡迎點(diǎn)擊閱讀原文在我的博客上進(jìn)行留言一同探討。（小透明表示公眾號(hào)至今未開通留言功能……）

若有幫助，盡情打賞！^_^

ps: 好像圖片有點(diǎn)大=。=

許可

MIT