1. 當(dāng)下的前端開發(fā)
隨著 Web2.0 的到來，前端從傳統(tǒng)的切圖制作網(wǎng)頁演化成為一個(gè)重要的崗位，尤其是在如今這個(gè)體驗(yàn)至上的時(shí)代，前端也變得越來越不可替代。
在大學(xué)里面，普遍不會(huì)有 Web 前端開發(fā)這門課，即便是有相關(guān)課程，也常常是伴隨著 JSP、ASP 等技術(shù)一起被提起，往往不會(huì)受到重視。
還記得大學(xué)時(shí)期，我剛開始接觸前端。那個(gè)時(shí)候?qū)W校的老師授課還在用 Dreamweaver，前端這個(gè)概念還不清晰，很多人對(duì)前端的看法就是 “DIV+CSS”。
實(shí)際上，這一看法其實(shí)是錯(cuò)誤的，前端早已經(jīng)不僅僅只是制作網(wǎng)頁了。隨著 NodeJS/Babel/Webpack 等誕生，前端也邁入了工程化的時(shí)代。
2. 前端進(jìn)階之路
剛畢業(yè)的時(shí)候，我一個(gè)人來到上海，在一家大型互聯(lián)網(wǎng)公司做前端開發(fā)。最開始我也只是一個(gè)頁面仔，每天做著重復(fù)的工作，寫寫新頁面、維護(hù)老頁面，不管寫了多少頁面都得不到什么提升。
由于當(dāng)時(shí)做的交互都比較復(fù)雜，我就開始關(guān)注如何寫好業(yè)務(wù)代碼這一層面，這一期間我讀了很多經(jīng)典的書籍，例如《編寫可讀代碼的藝術(shù)》、《代碼大全》、《JavaScript 設(shè)計(jì)模式與開發(fā)實(shí)踐》、《重構(gòu) 改善既有代碼的設(shè)計(jì)》等書，學(xué)到了很多語言之外的理論，打好了編程的基礎(chǔ)。
后來，我意識(shí)到只會(huì)使用工具是不夠的，一旦工具換了，那我們就要重新學(xué)習(xí)新的工具，而學(xué)習(xí)精力終歸是有限的。于是，我開始去讀源碼，從 jQuery、Underscore 到 Backbone、React 等等，這一過程不僅加深了我對(duì) JavaScript 的理解，還增長了自信，我的前端進(jìn)階之路由此開始。
你在前端開發(fā)的學(xué)習(xí)之中，是否經(jīng)常會(huì)有下面這些困擾？
- 新技術(shù)變化太快，不知從何學(xué)起
- 不管做了多少個(gè)項(xiàng)目，依舊是寫不好業(yè)務(wù)代碼
- 想讀源碼，但無從下手
- 技術(shù)深度不夠，一直停留在初中級(jí)階段
如果你有這些困擾，那么你就是本專欄的受眾。我寫這個(gè)專欄的目的，就是為廣大初中級(jí)前端們提供一條學(xué)習(xí)路線，盡量避免大家在學(xué)習(xí)階段花費(fèi)太多時(shí)間踩坑。
因此，這個(gè)專欄里的內(nèi)容并非只是簡單地講解語法，更多的是深入其原理，比如我會(huì)帶你從零實(shí)現(xiàn) Promise、asnyc/await、動(dòng)態(tài) import、Redux、Mobx 等等，這些都是別的入門課程中很少涉及到的。
3. 文章主題和章節(jié)設(shè)計(jì)
3.1 基礎(chǔ)篇
基礎(chǔ)篇主要介紹了 JavaScript 的誕生、ECMAScript 提案、變量命名、表驅(qū)動(dòng)法、類型轉(zhuǎn)換原理、函數(shù)這幾部分，內(nèi)容盡量做到了實(shí)用、易懂。
面向?qū)ο笃?ES6 篇的主要目標(biāo)就是介紹一些可以提高業(yè)務(wù)代碼可讀性和可維護(hù)性的方法。
面向?qū)ο笃獜奈宕笤瓌t、三大特性開始講起，帶你探尋面向?qū)ο缶幊痰谋举|(zhì)，深入到 Babel 編譯之后類與繼承的實(shí)現(xiàn)，再擴(kuò)展到從零開始用 MVC 組織前端業(yè)務(wù)代碼，對(duì)代碼進(jìn)行分層等方面。
3.3 ES6 篇
ES6 篇主要是對(duì) ECMAScript 中可以深入挖掘的，例如 Proxy、裝飾器、Promise、asnyc/await 等語法的介紹，使用了豐富的例子來講解適用場(chǎng)景，中間還穿插了一些裝飾器模式、代理模式等知識(shí)。
除此之外，還引出了開發(fā)中實(shí)用的面向切面編程（AOP）、依賴注入、控制反轉(zhuǎn)等概念，幫助我們寫出可維護(hù)性更高的代碼。
3.4 React 篇
React 篇從教你用 Webpack 和 Parcel 搭建環(huán)境開始，帶你學(xué)習(xí) React 的基本用法以及原理。
為了避免講解原理時(shí)的枯燥，其中 Redux、Mobx 等做到了手把手帶你從零實(shí)現(xiàn)一個(gè)類似的庫，加深你對(duì) React 狀態(tài)管理的理解。
此外，不僅會(huì)對(duì) React 中的 key、diff、state 等做比較深入的講解，還會(huì)介紹 React16 中的新特性，例如 hooks、fiber 等，盡量做到深入原理。
參考文檔：