重學前端-程劭非-極客時間

由極客時間出品的《重學前端》由程劭非（winter）所做，程劭非（winter）前手機淘寶前端負責人，每天10分鐘，重構你的前端知識體系。

《重學前端》課程背景

隨著前端技術不斷地發展，崗位需求與薪資一路攀升。整個前端業界正值“黃金時代”，而前端開發者們卻似乎“學不動了”。

這緣於前端的學習是一條先快後慢的曲線。在快速入門之後，大多數人都會感覺：自己僅僅停留在會用的階段，後面的學習之路似乎越來越陡峭，每前進一步都十分艱難。

其實是你沒有意識到，你在自學的過程中走了太多彎路。

大部分前端工程師的知識，其實都來自於工作中零散的學習和實踐。在這種情況下，學習方向一旦偏離，就可能導致基礎不牢固，知識認知不清晰，難以建立完整的知識體系。

並且，如果所在公司業務簡單，工程師更難以在實踐中形成技術積累，這導致了自身技術長期處於非常初級的階段。

winter 在手機淘寶一直負責前端工程師的面試與培養工作，他深知其中的痛點與難點。在這個專欄中，winter 將帶你告別零散和盲目的自學，重新學習前端，一起搭建前端知識框架，共同明確學習重點，精進前端技術。

《重學前端》講師介紹

作者程劭非，網名“winter”，前端社群知名專家，前手機淘寶前端負責人，先後就職於微軟、盛大、阿里巴巴等公司。winter 早年做過嵌入式系統瀏覽器、電子書和 WebOS 的相關工作，近年致力於移動前端領域研究，提出過 Flexible 佈局等先進概念，也產出過 Weex 這樣的移動前端開發框架。

《重學前端》模組介紹

專欄共 42 講，分為 4 大模組。

模組一，JavaScript ：這部分會按照文法、語義和執行時去討論 JavaScript 語言。這樣的劃分符合程式語言的一般規律，即“用一定的詞法和語法，表達一定語義，去操作執行時”。而且，這樣的劃分也整合了零散的知識點，具有完備性。

模組二，HTML 和 CSS：這部分會側重從語言和功能的角度來講解，帶你領略兩者的全貌。HTML 的功能主要由標籤來承擔，所以我們首先會把標籤分類，並分別進行講解。語言部分，我們會簡要介紹 HTML 的語法和幾個重要的語言機制。在 CSS 的語言部分，我們會從大到小介紹 @rule、選擇器、單位等等。功能部分，我們大致可以分為佈局、繪製和互動類。

模組三，瀏覽器實現原理與 API：這部分會著重講解瀏覽器的工作原理。我們會一起來了解：一個瀏覽器到底是如何工作的。並且，我們還會學習一些重要的瀏覽器 API，包括 BOM、DOM、CSSOM 等內容。只有瞭解了這些知識，你才能把 JavaScript 和 HTML、CSS 聯絡起來實現具體功能。

模組四，前端綜合應用：作者會結合自己的前端工作經驗，選擇自己在手淘和淘寶工作中的一些案例來輔助講解前端的效能、工具鏈、持續整合、架構等實際應用內容。

《重學前端》專欄目錄

1. 開篇詞
2. 明確你的前端學習路線
3. 一起列一份前端知識架構圖

模組一• JavaScript

1. 型別：關於型別，有哪些你忽視的細節？
2. 物件：JavaScript是物件導向還是基於物件的？
3. 物件：JavaScript中，我們真的需要模擬類嗎？
4. 函式：this有什麼用？應該怎麼用？
5. 函式：JavaScript裡的閉包到底要怎麼用？適合用在哪裡？
6. 事件迴圈與微任務：Promise裡的程式碼為什麼比setTimeout先執行？
7. 語句：try裡面放return, finally還會執行嗎？
8. 詞法：為什麼l.toString會報錯？
9. 運算子與表示式：新加入的**運算子，好像有哪裡不一樣？
10. 語句、程式與模缺：在script標籤裡寫export為什麼會拋錯？
11. 分號自動補全：到底要不要寫分號呢？

模組二• HTML和CSS

HTML：

1. HTML語義：只用div和span是不是就夠了？
2. HTML語義：一篇wiki文章究竟會用到哪些語義元素？
3. 文件元資訊：你知道head裡一共能寫哪幾種標籤嗎？
4. 連結：除了a標籤，還有標籤叫連結？
5. 嵌入型元素：怎麼link—個css要用href,而引入js要用src呢？
6. HTML標籤：標籤總結
7. HTML語言：dtd到底是什麼？
8. ARIA:可訪問性不止是給盲人使用者的特性

CSS：

1. 媒體、分頁、視口 ：除了屬性和選擇器，你還要知道這些帶@的規則
2. 選擇器：為什麼只有子元素選擇器，沒有父元素選擇器
3. 佈局正常流：其實從畢昇開始，我們就在用正常流了
4. 佈局彈性盒：垂直居中為什麼這麼難？
5. 文字：baseline到底是啥東西？
6. 顏色與形狀：CSS是如何繪製顏色與形狀的？
7. 動畫與互動：為什麼動畫要用貝塞爾曲線這麼奇怪的東西？
8. CSS屬性：CSS總結

模組三•瀏覽器實現原理與API

1. 瀏覽器的工作原理：你最熟悉的瀏覽器，是怎麼寫出來的？（上〉
2. 瀏覽器的工作原理：你最熟悉的瀏覽器，是怎麼寫出來的？（中)
3. 瀏覽器的工作原理：你最熟悉的瀏覽器，是怎麼寫出來的？（下)
4. DOM:如何用JS操作文件？
5. CSSOM:如何獲取一個元素的準確位置？
6. 事件：捕獲模型和冒泡模型到底是怎麼來的？
7. 其它一些API: API總集合

模組四•前端綜合應用

1. 1. 效能：前端效能到底對業務資料有多大的影響？
   2. 工具鏈：什麼樣的工具鏈才能提升團隊效率？
   3. 持續整合：幾十個前端一起工作，怎麼樣保證基本質量？
   4. 搭建系統：大量的低價值需求如何應對？
   5. 架構與基礎庫：如何設計基礎庫？
   6. 答疑文章

訂閱價格：

為回報猿人學的粉絲，所有通過我分享的二維碼購買的使用者，請加我微訊號：dismissmewp，備註：返現。

享受完其它優惠後，我再給大家立即返￥12元現金。

我的公眾號：猿人學 Python 上會分享更多心得體會，敬請關注。

***版權申明:若沒有特殊說明，文章皆是猿人學 yuanrenxue.com 原創，沒有猿人學授權，請勿以任何形式轉載。***