前端技術學習路徑的一點感想

前言

之前不經意看到這篇文章，那麼就整理之後給大家分享一下，本文主要說明前端學習的過程和路徑。

路漫漫其修遠兮，吾将上下而求索~~

正文

明确你的意願

其實不管是前端還是後端，首先要清楚，自己是想從事業務型的技術工作，還是 Research 型的技術工作。

前者可以了解為：網際網路公司的程式員。業務型的前端工程師，最大的一個特點是：從客戶需求出發，去真真正正地做出一個産品來，傳遞客戶，讓客戶滿意，并對客戶産生實際的價值，這也是大部分網際網路技術從業人員的工作内容。業務型的技術人員使用的技術往往不是最新的前沿技術，而是經過驗證的效益更高的技術，用最小化的成本來服務客戶。這需要不停地實踐與實戰，以便更快、更高效地實作客戶需求的滿足。

後者可以了解為：行業的科學家。這種角色時常走在行業的前面，去帶領網際網路公司，甚至是技術行業，探索更先進的技術、挖掘更有價值的資料、建構服務大衆的基礎設施平台等……

目前，絕大部分網際網路技術人員都從事着業務型的技術工作，少部分極其優秀的技術人員可以從事 Research 型的技術工作。文章一開始就強調要了解清楚自己想從事的是哪個類型的技術工作，目的是樹立一個終極目标。而要從事 Research 型的技術工作，首先必定是需要多年的業務型技術工作的經驗積累的。

補充一個題外話

很多沒有接觸過程式設計的人都以為程式設計很難，要具備很高的數學能力，是因為他們往往都把“程式設計”這個活動了解為從事 Research 型的技術工作了。這是他們的一大誤區。

其實大部分的程式設計活動，都是對“業務邏輯”的了解，然後用代碼拼湊出産品和服務，這裡面涉及到多深的數學知識？我看不多……

程式設計的總體思路就像是寫書。寫書前，你已經識字了，這是你的基礎，你還會運用積累下來的一些表達技巧，讓你的書更加吸引人，實作更高的銷量。寫書前，你已經知道了很多前人規劃好的、約定俗成的東西了，而你要做的是，利用這些約定俗成的東西，去寫一本自己的書。這本書可以參考前人的書，也可以參考已有的論文。

程式設計，往往是一個創造過程，而不是一個發明過程。

前端入門指南口語版

前端作為一個新興工種和職業，它一直未能有幸像 Java、C 等後端語言一樣，進入高校，成為一門課程。這就導緻幾乎所有的前端工程師，要麼是從後端工程師轉型而來，要麼從設計師轉行而來，都靠自學成才。而我也發現，校内極少人從事前端開發，大部分人都走後端和用戶端路線。

而前端從誕生至今，一直未能跳脫 HTML、CSS、JavaScript 這三門“語言”。自然地，入門指南當然圍繞三者講起：

HTML、HTML5

記住至少 90% 的 HTML 标簽及其語義，重點是 

header

、

footer

、

article

、

main

、

section

、

nav

、

aside

 這種語義特别明顯的用于布局的标簽。

CSS、CSS3

記住至少 90% 的 CSS 屬性與寫法，重點是盒模型（

margin

、

padding

、

border

、

box-sizing

）、頁面布局相關（

position

 的用法、淘寶的雙飛翼布局）、頁面渲染相關（背景、陰影、字型樣式等）……

以上是編寫靜态頁面的基礎，重點是多實踐。

Bootstrap

CSS 架構 Bootstrap 應該是大部分前端工程師繞不過的一個點。它流行到以至于現在有些前端開發人員都刻意避免使用 Bootstrap 來防止頁面撞臉了。

即使如此，還是阻擋不了大部分前端開發人員使用它的熱情。畢竟它能幫助我們快速實作頁面響應式布局、快速編寫出可互動的頁面。

我的建議：覺得 HTML、CSS 基礎了解得差不多了，我主張先學習 Bootstrap，重點是學會 Bootstrap 的栅格系統及其原理，了解響應式網頁設計是如何實作的，能夠用 Bootstrap 拼出一套管理背景界面。

Bootstrap 的進階用法就是：自行定制 Bootstrap。雖然已有 Bootswatch 這樣的第三方 Bootstrap 主題能滿足大部分一般需求，但總有些時候需要自定義樣式。而在使用 Bootstrap 的過程中，修改 Bootstrap 預設主題的最佳方式不是覆寫預設設定，而是自定義主題後建構出自己的 Bootstrap 主題。

關于定制 Bootstrap 主題，官網上有一個現成的網頁。而如果要在自己的電腦定制，需要掌握 

LESS

 或者 

Sass

（兩者都是 CSS 編譯器，為編寫 CSS 引入了程式設計語言的變量、複用等特性）。

JavaScript

我個人是從設計師轉型而來的前端工程師，是以偏重頁面的設計、對設計稿的還原程度、更好的頁面語義和頁面布局、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，還沒進入大量實戰階段。

jQuery 與 Zepto.js

我的主張是，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 底層、深入浏覽器底層。

包括但不限于（由于本人遠不及這個層次，下面的羅列可能不正确）：

• 玩轉 SVG 繪圖、Canvas 繪圖
• 頁面性能調優
• 玩轉 Web Socket、Web Worker
• 自行開發 JavaScript 插件、工具、架構等
• 玩轉 Chrome V8 引擎

共同進步

如有錯誤，歡迎在下方評論區指正。