前端勸退指南

05-07

所謂前端，寬泛來說是包括APP開發和web開發的，APP端主要是指安卓和IOS的應用開發（windows phone市場佔有率太小可以忽略），而web開發的前端則主要指的是html頁面，就是我們常說的網頁，當然包括PC端頁面和手機瀏覽器端頁面（中間有一個比較讓人疑惑的名詞，H5開發，這裡的H5開發並不是指的html5，而是指的是移動端頁面開發，在外行人眼裡看來，更多等價於微信的分享頁面開發）。

安卓和IOS開發就暫時不進行勸退了，畢竟現在也是市場的寒冬。這裡主要進行web端前端開發的勸退。

想要勸退，必須讓其入門。web前端入門的話主要學習的是html，css以及js，html是描述頁面結構的，類似於房子的結構，css是定義頁面樣式的，類似於房子的裝修與布局，而js是為了前端能夠實現複雜的功能而創建的，比如你要重新定義你的房子，想把你的房子變成書房，甚至變成游泳池，這時候就需要js出場了，重新定義頁面結構以及樣式。此階段推薦入坑指南《Head First HTML與CSS》，能夠對前端的整個知識結構有個大概的認知，推薦閱讀時間3~7天。中間應該要花時間把書上的例子都手打實現一遍，前端入門的編輯器的話，推薦使用sublime或者atom，前期推薦使用sublime，進階推薦使用atom（這是一款js實現的編輯器，你設置可以用js實現自己的擴展），這兩個編輯器都很漂亮。讀完應該能夠明白html和css究竟是用來做什麼的。

若是還沒有放棄，也算半隻腳踏入了前端大門，這時候就該去學習js了，js入門一般有兩本書推薦，《JavaScript權威指南》以及《JavaScript高級程序設計》，我推薦後者，因為後者更薄，講得更加深入淺出，並且圖書的排版也更漂亮一些。如果之前沒有接觸過編程語言，那本通過這本書要學習到的是編程語言的結構體系以及基本語法，現代的計算機體系是馮諾依曼體系，絕大部分編程語言的設計與實現也沒有脫離這個體系。你需要在這個階段了解到js的數據結構有哪些（基本類型），js的程序結構（if else結構，while結構，for結構）作用，js如何簡單修改頁面結構與樣式（這需要去了解dom節點），js的函數與對象的關係，你如何定義函數，以及如何調用你編寫的函數，對json也要有了解（這是現在互聯網通信使用最為廣泛的數據交換格式，前端與後端的通信大都仰仗於此）。這個的時間預估，如果有編程基礎的話，推薦15天內能理解上述的問題，就算沒有編程基礎也不要拖超過一個月。時間一長，銳氣盡喪。

看了那麼多的基礎，是時候來一本工作速成寶典了，《鋒利的jquery》，jquery應該是目前世界上使用最為廣泛的前端庫了（雖說隨著vue，react，angular等這些前端框架的盛行，jquery也正在變得不那麼必須），但不得不說jquery極大地方便了初學者。jquery其實就是把我們在使用js時常用的功能做了封裝，比如在如下的html結構中

<html><head></head><body><h1 id="myHeader">This is a header</h1></body></html>

js中要獲取頁面中id所在的dom，如下

document.getElementById("myHeader")

而jquery獲取的話，則是

$("#myHeader")

這裡只是一個最簡單的舉例，jquery對js的封裝還有很多，不過最常用的應該也就是頁面元素的選擇，以及發起ajax請求，只要先掌握著兩個部分，暫時也就夠用了。

搞懂上面這些，只能保證你能找到一份比搬磚稍好的工作O(∩_∩)O~

這時候就開始有兩個分支了，一個分支是頁面的重構，一個分支是前端整體的架構。

你要是對編寫漂亮的頁面比較感興趣，就選擇頁面的重構，這時候就應該去深入研究css（包括sass和less）以及Canvas，這條路應該算是能夠比較容易走到盡頭的路，上限也低一些。

另一條路是前端整體的架構。選擇這條路，是時候開始前端真正的入門了。你需要開始真正精通js，把《JavaScript高級程序設計》再重新閱讀一遍，拾漏補缺，同時可以擴展閱讀《你不知道的JavaScript》（這本書建議閱讀英文原版，中文版翻譯得有點差），真正更深層次地去理解js，知道js的優點與缺點，怎麼樣算是最佳實踐。你要開始關心你的js的實現效率的問題，而不是僅僅功能的實現（優秀的前端工程師與平庸的前端工程師差別也在於此）。

這時候可以開始閱讀一些開源的比較優秀的源碼了，可以先從最簡單的jquery的源碼開始讀起，可以想一想，如果自己要實現相同的功能的話，該怎麼實現，是否性能上或者寫法上比上面更優。

自從google的v8引擎發布之後，前端框架如雨後春筍層出不窮。究其根本原因是v8引擎極大地提高了js原本的執行效率，讓js可以做更多的事情。現在更多的是在js完成複雜頁面的渲染。而react做得更為純粹，整個頁面都是在js裡面渲染完成的。

前端現在的三大框架react，angular，vue也要擇一而精。框架都有其優點和缺點，更重要的是業務的真正需求以及團隊的技術實力。入門推薦vue，vue確實比較簡單上手，也能完成複雜的頁面構建。真正想要為所欲為的話還是要學習react。

前端的技術更新迭代比較快，應該說是js的更新迭代比較快，在大多數瀏覽器才全面支持es5的時候，大部分的前端框架都在採用es6的寫法了，而es7也已經蓄勢待發了。這個變化還是很大的，雖然很多的特性只是語法糖，但是寫法上變化不小，功能上也在想著無所不能在前進。

對框架的學習也是一條漫漫長路，會用容易，但真正理解還有對框架進行修改就難了，框架不可能永遠滿足你的需求，總有一天你需要對其進行改造和擴展。不過，這幾大前端框架的設計與實現都相對比較優美。

再擴展開來，你要使用各種前端框架，你還需要了解各種打包工具，以及編譯工具。雖然這些工具大部分時候不用理解太深，只要會用就行。

作為一名優秀的前端工程師光是了解上面這些還是不夠的~~~你還要對與前端相關的各方面都有一定的認知（也就是所謂的知識的廣度）。需要了解HTTP協議與DNS協議，緩存方面（瀏覽器緩存，伺服器緩存，CDN緩存等等），前端本地數據存儲（localstrage和 sessionstorage，以及之前的cookie，以及為什麼現在存數據一般不存cookie了），還有跨域問題~~~~

寫著寫著，發覺前端的深坑就算沒把別人勸退也要把自己勸退了。上面也只是說了大概，如果還沒被勸退，之後可以就一些方面進行深入展開來進行勸退~~