 |
VOOZH | about |
|
VOOZH | about |
前言
這篇文章是我們工作室內部 Wiki 的前端部分。下午時分心血來潮寫了很多，對於前端新人算是不錯的學習路徑指南，遂整理成博文。
另，前兩周也寫了一篇前端自學路徑的博文，但是重點偏向於漫談前端發展歷程了，前端自學路徑這部分寫得不夠詳細和具體。
本博文算是一個補充，遂叫《前端學習路徑加強版》。
正文其實不管是前端還是後端，首先要清楚，自己是想從事業務型的技術工作，還是 Research 型的技術工作。
前者可以理解為：網際網路公司的程式設計師。業務型的前端工程師，最大的一個特點是：從客戶需求出發，去真真正正地做出一個產品來，交付客戶，讓客戶滿意，並對客戶產生實際的價值，這也是大部分網際網路技術從業人員的工作內容。業務型的技術人員使用的技術往往不是最新的前沿技術，而是經過驗證的效益更高的技術，用最小化的成本來服務客戶。這需要不停地實踐與實戰，以便更快、更高效地實現客戶需求的滿足。
後者可以理解為：行業的科學家。這種角色時常走在行業的前面，去帶領網際網路公司，甚至是技術行業，探索更先進的技術、挖掘更有價值的數據、構建服務大眾的基礎設施平台等……
目前，絕大部分網際網路技術人員都從事著業務型的技術工作，少部分極其優秀的技術人員可以從事 Research 型的技術工作。文章一開始就強調要了解清楚自己想從事的是哪個類型的技術工作，目的是樹立一個終極目標。而要從事 Research 型的技術工作，首先必定是需要多年的業務型技術工作的經驗積累的。
很多沒有接觸過編程的人都以為編程很難，要具備很高的數學能力，是因為他們往往都把「編程」這個活動理解為從事 Research 型的技術工作了。這是他們的一大誤區。
其實大部分的編程活動，都是對「業務邏輯」的理解，然後用代碼拼湊出產品和服務，這裡面涉及到多深的數學知識？我看不多……
編程的總體思路就像是寫書。寫書前，你已經識字了，這是你的基礎，你還會運用積累下來的一些表達技巧，讓你的書更加吸引人，實現更高的銷量。寫書前，你已經知道了很多前人規劃好的、約定俗成的東西了，而你要做的是，利用這些約定俗成的東西，去寫一本自己的書。這本書可以參考前人的書，也可以參考已有的論文。編程，往往是一個創造過程，而不是一個發明過程。
前端作為一個新興工種和職業，它一直未能有幸像 Java、C 等後端語言一樣，進入高校，成為一門課程。這就導致幾乎所有的前端工程師，要麼是從後端工程師轉型而來，要麼從設計師轉行而來，都靠自學成才。而我也發現，校內極少人從事前端開發，大部分人都走後端和客戶端路線。
而前端從誕生至今，一直未能跳脫 HTML、CSS、JavaScript 這三門「語言」。自然地，入門指南當然圍繞三者講起：
header、footer、article、main、section、nav、aside這種語義特別明顯的用於布局的標籤。
margin、padding、border、box-sizing）、頁面布局相關（position的用法、淘寶的雙飛翼布局）、頁面渲染相關（背景、陰影、字體樣式等）……
以上是編寫靜態頁面的基礎，重點是多實踐。
CSS 框架 Bootstrap 應該是大部分前端工程師繞不過的一個點。它流行到以至於現在有些前端開發人員都刻意避免使用 Bootstrap 來防止頁面撞臉了。
即使如此，還是阻擋不了大部分前端開發人員使用它的熱情。畢竟它能幫助我們快速實現頁面響應式布局、快速編寫出可交互的頁面。
我的建議：覺得 HTML、CSS 基礎了解得差不多了，我主張先學習 Bootstrap，重點是學會 Bootstrap 的柵格系統及其原理，了解響應式網頁設計是如何實現的，能夠用 Bootstrap 拼出一套管理後台界面。
Bootstrap 的進階用法就是：自行定製 Bootstrap。雖然已有 Bootswatch 這樣的第三方 Bootstrap 主題能滿足大部分一般需求，但總有些時候需要自定義樣式。而在使用 Bootstrap 的過程中，修改 Bootstrap 默認主題的最佳方式不是覆蓋默認設置，而是自定義主題後構建出自己的 Bootstrap 主題。
關於定製 Bootstrap 主題，官網上有一個現成的網頁。而如果要在自己的電腦定製，需要掌握LESS或者Sass（兩者都是 CSS 編譯器，為編寫 CSS 引入了程式語言的變量、復用等特性）。
我個人是從設計師轉型而來的前端工程師，所以偏重頁面的設計、對設計稿的還原程度、更好的頁面語義和頁面布局、SEO 等，對 JavaScript 的了解並不深。這樣的角色，在騰訊的崗位叫UI 開發或網頁重構。小公司的話，不分前端工程師、網頁重構工程師、UI 開發工程師。所以遇到以編寫 JavaScript 為己任的前端開發工程師，我的 OS 是這樣的：
沒想到你是這種前端工程師。
哈哈，開個玩笑。回到正題上來：
由於上面提到的緣由，對於 JavaScript，我主張是邊用邊學。當然首先是要已經看過 W3School 的 JavaScript 文字教程，了解 JavaScript 在瀏覽器中的能力（操作 DOM、BOM，知道 AJAX 是什麼），並知道它擁有什麼樣的 API，什麼效果能實現，什麼效果不能實現。當 JavaScript 用於編寫程序邏輯時，要知道需要用到什麼語法、內置方法、內置 API。再後來，是了解 HTML5 中WebSQL、Web Storage（Local Storage 和 Session Storage）、應用緩存（Application Cache）、Cookie是怎麼回事，能實現什麼功能。
以上算是接觸並使用 JavaScript，還沒進入大量實戰階段。
我的主張是，JavaScript 一開始並不需要學得太深。對於業務型的前端工程師，完成上面提到的 JavaScript 部分，基本就夠用了。
而基本上，一定要做的一件事是：學習 jQuery、Zepto.js（人稱移動端的 jQuery）。兩者的實現極其相像，可以只學 jQuery，Zepto 基本就無師自通了。
jQuery 和 Zepto.js 之於 JavaScript，就像 Bootstrap 之於 HTML 和 CSS。都是為了簡化代碼、更高效地完成業務而開發的 JavaScript 類庫。它們封裝了很多原生 JavaScript 的語法和方法，使之編寫代碼時更方便，同時保證對舊版瀏覽器的兼容性。
對於兩者，建議：了解如何使用 jQuery 操作 DOM、常用的數據處理方法（數組項如何增刪查改、對象如何訪問及選取、方法如何調用、JSON 數據如何處理及使用）。
Sublime Text、Atom 等代碼編輯器（認真記住各種快捷鍵，好好閱讀各大編輯器的插件使用說明）。
方便前端開發的利器：瀏覽器自動刷新 Browser-sync、調試工具 Chrome 控制台、Fiddler 和 Weinre、模擬請求 Postman、圖片壓縮 iSparta……
Node.js 平台下的 NPM（一個集合了幾乎所有優秀前端開源項目的社區，用來管理項目中用到的開源技術、資源、插件等）
CSS 預處理器與後處理器：Autoprefixer、PostCSS（一個龐大的社區，提供各種 CSS 處理能力的插件）。
由於各大瀏覽器對標準 CSS 的支持情況不一樣，都或多或少地擁有帶自身特殊前綴的私有 CSS 屬性，例如-webkit-border-radius這個私有 CSS 屬性是Webkit以前沒有 CSS 預處理器與後處理器時，往往需要前端開發人員手寫帶有各種特殊前綴的私有 CSS 屬性。有了這些處理器之後，只需要寫標準的
CSS，如border-radius，再用這些處理器處理一下 CSS，就能自動補齊瀏覽器私有 CSS 屬性，實現前端頁面的最大化兼容性，例如兼容 IE9、IE8 等等……
當然，這個栗子只是眾多 CSS 預處理器與後處理器最簡單的一個應用而已，還有更多高階屬性與使用技巧。
JavaScript 編譯器：之所以 JavaScript 有編譯器，是因為自從 2015 年，JavaScript 的標準制定組織 ECMAScript 委員會決定今後每年都推出新版的 ECMAScript 標準，也就是新版的 JavaScript。而又因為各大瀏覽器的開發進度不同，對新標準的實現還沒完全跟進，而一些喜歡追新的前端開發人員又想早早地開始使用新版的 JavaScript，所以就出現了Babel這樣的 JavaScript 編譯器。
Babel 的主要功能是將新版 JavaScript 編譯成舊版 JavaScript，使得前端工程師既可以編寫最新版的 JavaScript，而前端頁面也可以完美兼容各大瀏覽器。
前端開發構建工具：Gulp。前兩年還流行 Grunt，這兩年流行 Gulp，所以直接學習並使用 Gulp吧。
Gulp 的最大一個用處是：打通開發過程中的工作流程。例如開發過程中，自動刷新瀏覽器、將 SCSS 編譯成 CSS、將新版 JavaScript 編譯成各大瀏覽器支持的舊版 JavaScript、項目開發完畢後的性能優化：壓縮圖片、CSS、JavaScript 等靜態資源、合併雪碧圖，把項目源碼上傳伺服器等。
其實每個小操作都有工具能完成，而像 Gulp 這樣的構建工具的作用是：將所有分散的小操作和小流程，通過 Gulp 平台上的插件，集合成一條龍服務，一次編寫前端 Workflow，就可以免去很多分散精力的小操作，實現開發流程自動化。
上面提到的 CSS 處理器、JavaScript 編譯器，都有 Gulp 插件，例如gulp-autoprefixer、gulp-cssnano、gulp-image……
JavaScript 前端框架：Vue.js、Angular.js、React、React Native……
JavaScript 前端框架的主要作用是，讓前端工程師也能像後端工程師一樣，以一個已經驗證有效的開發範式來支撐項目，降低耦合度，提高項目可靠性和可維護性。
Grunt還沒開始用，Gulp就來了，Gulp
還沒領略其精粹，Webpack又款款而至。迷戀工具，每每追新，必然不是前端工程師的修養。對於工具，我們強調使用場景。在什麼情況下，需要使用什麼工具，幫助提高效率，才應該是前端工程師所要關注的重點。
所謂高級前端工程師的範疇：深入 JavaScript 底層、深入瀏覽器底層。
包括但不限於（由於本人遠不及這個層次，下面的羅列可能不正確）：
如有錯誤，歡迎在下方評論區指正。