GitChat · 前端 | 從軟件工程角度看大前端技術棧

來自 GitChat 做者：韓亦樂
更多IT技術分享，盡在微信公衆號：GitChat技術雜談

進入 GitChat 閱讀原文

前言

咱們都知道，大學幾乎是沒有 Web 前端課的。以我所在的大學爲例，惟一引導咱們瞭解 JavaScript 的也只是‘人機界面’和‘Web應用開發’選修課。再者，因爲這些選修課的課時短、面向的主要羣體是大部分大學生等緣由，其最終所涉及的內容層次也很難遇上近年來 Web 前端領域的快速變化。自學，看起來是廣大前端學習者的廣泛成長道路。本文嘗試結合軟件工程專業背景並貫穿軟件工程思想，開啓一個經常「不爲人所知」的大前端技術棧之旅。

P.S: 爲了對這場 Chat 有一個背景瞭解，這裏小提一句：筆者現爲準大三學生，前倆年的 Web 開發學習經歷輔之以參與/組織線上線下開發者社區的技術分享活動，對整個 Web 開發有了必定程度上的宏觀認知。但願本文能經過必定程度的拋磚引玉填補不足~。

目錄

• 技術基本功
• 前端設計能力
• 前端開發能力
• 計算機網絡知識儲量
• 服務端應用開發能力
• 數據庫與搜索引擎開發能力
• 編程軟技能

1、技術基本功

標準搜索引擎搜到的，只是 4% 的互聯網數據。引覺得例，但願當咱們談到「大前端」時，前端初學者再也不總被「HTML、CSS、JavaScript 基礎」俘困於學習 Web 開發的瓶頸之中，反之能夠經過掌握如下技術基本功來拓展本身的編程視野、提升本身的編程能力，爲成爲合格的大前端工程師作出紮實的鋪墊。全部章節經過「必修」、「選修」來簡單標識其重要性。

1.1 打字速度至少達到 40WPM+(必修)

我曾用整整一篇博客 (@強化你的打字速度) 來講明訓練出一個打字坐姿良好、打字速度標準的習慣其重要性。打字速度能夠用 WPM - Word Per Minute - 每分鐘敲出的單詞個數(5 個字符被視爲一個單詞)來進行衡量。初級、中級和高級的打字水平評判準分別是 20 WPM、40 WPM和 60 WPM。剛剛在注意打字手勢與打字坐姿的條件下，評測出個人最新打字速度是 51 WPM，不算過高，但還能夠。

在這裏咱們以打字速度達到 40 WPM 爲一個奇點，合格的程序開發者都應該能達到這一水準的。

延伸閱讀：

1. 經常使用的鍵盤佈局爲 QWERT 佈局，能夠選用更高效的 DVORAK 佈局。

1.2 熟練掌握至少一種主流代碼編輯器或 IDE(必修)

「工欲善其事，必先利其器。」對於主流代碼開發工具的掌握將會是咱們高效開發的一個加分項。就代碼編輯器和 IDE 的區別來講：

前者專一源代碼的開發，經常會根據具體編程語言有語法高亮、代碼摺疊等功能，支持大多數編程語言的開發。經過必定的定製化，咱們能夠給簡易的編輯器加入風格迥異的插件，組成一整套駕輕就熟的開發流程。一個典型的例子如跨平臺的 Sublime 編輯器，其支持 Python 語言編寫的插件，可經過包管理器擴充自己功能，大多數的包使用自由軟件受權發佈，並由社區建置維護。

後者的中文全稱是「集成開發環境」，通俗來說能夠當作一種編輯器的全家桶，主要針對特定的編程語言而量身打造。IDE 在內部除了能夠直接寫源代碼文本，還經常默認擁有打包並編譯爲可用程序的功能，有些 IDE 還能夠設計圖形界面。IDE 一般包括代碼編輯器、自動構建工具、調試器和版本控制系統。一個典型的例子如 WebStorm，其支持圖片預覽，擁有內置命令行和版本控制系統，對於錯誤的前端 JavaScript 代碼還有相應的智能提醒和改正能力。WebStorm 良好的集成了編輯、文件、管理、編譯、調試、運行等功能，大大的提升了開發者生產力。

身爲大前端工程師，根據開發須要選擇本身偏心的編輯器或 IDE 並刻意練習其使用方法，在開發代碼時能達到工具熟練度與思惟速度相匹配的境地，也就足夠勝任這項技術基本功。

延伸閱讀：

1. Web 開發推薦掌握的代碼編輯器或 IDE 有： VIM、Sublime、WebStorm、IDEA、VSCode 以及一些在線 IDE 等。

1.3 擁有良好的代碼規範、代碼質量、代碼註釋能力(必修)

程序開發的真實狀況是，代碼是給人看的，偶爾在機器上跑一跑。如何制定一個可執行的代碼規範並使項目最終擁有較高代碼質量，對於佔據軟件開發成本比例很高的軟件維護工做起到了一個決定性的做用。代碼規範、代碼質量、代碼註釋能力三者相輔相成。

代碼規範是一種持續的行爲 ，良好的代碼規範能夠依靠代碼規範文檔或成熟的規範工具進行統一——前者不該複雜，但應具備一些強制性；後者例如在前端開發的環境下，可使用 ESLint 來進行可定製化的代碼風格檢查，或使用持續集成(CI)理念並經過相匹配的 CI 服務器進行軟件交付，以確保高水平的代碼質量。下圖是 CI 的實際應用過程示例。

在上述動圖中，當咱們在搭建好的持續集成(CI)環境下使用 git push 提交代碼後，CI 服務器將根據相關配置自動化執行代碼規範和代碼質量檢查過程(這裏是自動運行的是測試代碼)，並輸出相應的檢查結果。

其次，統一編碼規範、統一語言版本、統一編輯器配置（tab和空格之類）、統一文件編碼，統一數據庫等等行爲，都是提升代碼質量、盡力避免由於環境不一樣而致使 Bug 衆多的種種步驟。

通俗易懂的代碼註釋其意義在程序員界想必「路人皆知」，前端可使用
JSDoc 來規範註釋代碼。除了簡單的註釋以外，JSDoc 還能作不少其餘的事情，在 JSDoc 中文文檔中，這麼介紹到。

JSDoc是一個根據 JavaScript 文件中註釋信息，生成 JavaScript 應用程序或庫、模塊 API 文檔的工具。你可使用他記錄如：命名空間，類，方法，方法參數等。相似 JavaDoc 和 PHPDoc。如今不少編輯器或IDE中還能夠經過 JSDoc 直接或使用插件生成智能提示。從而使開發者很容易瞭解整個類和其中的屬性和方法，而且快速知道如何使用，從而提升開發效率，下降維護成本。

一個真實的 JSDoc 示例以下，不難看出有良好註釋的代碼通俗易懂。

/**
 * Book類，表明一個書本.
 * @constructor
 * @param {string} title - 書本的標題.
 * @param {string} author - 書本的做者.
 */
function Book(title, author) {
    this.title=title;
    this.author=author;
}

1.4 理解主流編程範式及其思想(必修)

在編程範式上，咱們須要理解編程語言的兩個分類——命令式編程和聲明式編程——的設計思想。其中，非命令式的編程均可歸爲聲明式編程，命令式、函數式和邏輯式是最核心的三種範式。能夠用下圖來表示。

命令式編程和聲明式編程起源的不一樣決定了這兩大類範式表明着迥然不一樣的編程理念和風格：命令式編程是行動導向（ Action-Oriented ）的，於是算法是顯性而目標是隱性的；聲明式編程是目標驅動（ Goal-Driven ）的，於是目標是顯性而算法是隱性的。以階乘函數來示例，命令式、函數式和邏輯式的不一樣表現以下。

C++(命令式)

int factorial(int n)  {
    int f = 1;
    for (; n > 0; --n) f *= n;
    return f;
}

Lisp(函數式)

(defun factorial(n)
    (if (= n 0)
        1    //  若n等於0，則n!等於1
        (* n (factorial(- n 1)))))    //  不然n!等於n* (n-1)

Prolog(邏輯式)

// 0! 等於1
factorial(0,1).
// 若M等於N-1且 M!等於Fm且F等於N*Fm，則N! 等於F
factorial(N,F) :-   M is N-1, factorial(M,Fm), F is N * Fm.

縱然聲明式編程有諸多便捷之處，但其在着重交互和業務邏輯的前端開發下就不那麼駕輕就熟。聲明式編程更擅長於數理邏輯的應用。所以咱們能從編程範式角度理解前端開發將會大大提升咱們的編程水平。

延伸閱讀：

1. 《JavaScript 函數式編程》

1.5 擁有撰寫良好軟件工程文檔的能力(必修)

通常符合軟件工程要求的軟件項目要求咱們擁有概要設計說明書、需求規格說明書和測試設計說明書。其中。

• 概要設計說明書包括程序系統的基本處理流程、程序系統的組織結構、模塊劃分、功能分配、接口設計、運行設計、安全設計、數據結構設計和出錯處理設計等，爲程序的詳細設計提供基礎。
• 軟件需求說明是軟件系統需求的規格化說明，是對將要開發系統的行爲的說明。它包括功能性需求及非功能性需求，非功能性需求對設計和實現提出了限制，好比性能要求，質量標準，或者設計限制。
• 測試說明書包括測試目標、測試範圍、性能要求、測試資源、測試環境、測試策略。

延伸閱讀：

1. 《軟件工程》

1.6 熟知常見的數據結構、算法思想、設計模式(必修)

數據結構的良好選擇能夠提升算法效率。從數據結構角度來講，須要咱們熟知數組、堆棧、隊列、鏈表、樹、圖、堆和散列表的相關知識點，並可以根據具體問題經過高級編程語言具體實現；從算法角度來講，還須要咱們熟知時間複雜度、空間複雜度、深度優先、廣度優先、圖論和動態規劃等算法思想。前端開發由於 JavaScript 語言封裝了不少操做數據的具體過程且更編程目標是開發應用邏輯，在算法層面要求並非很高，但熟知算法思想能夠提高每一個前端開發者的計算機科學素養。在看重基礎的開發者面試中也能提升本身的競爭力。

算法用來解決計算上的問題，設計模式用來解決「設計層次」的問題。在軟件工程中，設計模式是對軟件設計中廣泛存在（反覆出現）的各類問題，所提出的解決方案。JavaScript 就有不少的設計模式值得學習並掌握，以下所例，這裏就不一一介紹。經過使用設計模式，可使咱們的代碼更加的可複用，可擴展以及可測試。

• 單例模式、簡單工廠模式、觀察者模式、適配器模式、代理模式、橋接模式、外觀模式、訪問者模式、策略模式、模板方法模式、中介者模式、迭代器模式、組合模式、備忘錄模式、職責鏈模式、享元模式、狀態模式。——參考《經常使用的Javascript設計模式》

延伸閱讀：

1. 《數據結構與算法 JavaScript 描述》
2. 《算法導論(原書第3版)》
3. 《Head First 設計模式》
4. 《JavaScript 設計模式》
5. 《設計模式 可複用面向對象軟件的基礎》

1.7 熟練使用三大操做系統之一及其開發者環境(必修)

軟件的開發活動離不開 Windows、Linux 和 Mac 三大操做系統所各自造成的生態鏈。咱們至少須要可以在其中一個操做系統下進行高效開發，並瞭解該環境下的應用軟件使用技巧和經常使用配置管理。

如在 Windows 下，咱們須要知道環境變量該在哪裏修改；在 Linux 下，咱們須要知道 apt-get、yum 等包管理器的使用方式；在 MacOS 下，咱們須要知道 Mac 經常使用的開發工具等等。不管哪一種，都應該多理解 Linux 操做系統及其使用方式。前端使用的 Bower 管理器、Node 環境以及自動化測試、版本控制等都離不開 Linux 命令行的設計思想。

深刻操做系統的內核，咱們能夠了解計算機如何進行進程管理、內存管理、文件管理以及網絡管理，從而在開發中遇到電腦卡頓、網絡不通暢等情景時能及時找到問題所在，對症下藥。

延伸閱讀：

1. 《鳥哥的Linux私房菜:基礎學習篇(第3版)》
2. 《現代操做系統(原書第3版) 》
3. 《操做系統:精髓與設計原理(原書第6版)》
4. 《深刻理解計算機系統(原書第3版)》

1.8 擁有良好的代碼審查、代碼重構能力(選修)

適當的和團隊成員舉辦一場 Code Review(代碼審查)，有助於保證軟件質量、促進團隊成長和避免團隊成員因缺席而致使軟件進度的「單點故障」。尤爲在團隊沒有測試開發人員的狀況下，咱們很難達到使人滿意的測試覆蓋率。來一場「說走就走」的代碼審查將對軟件質量作出巨大貢獻。

引用 《代碼審查與重構的5個層次》 的觀點，咱們能夠經過以下五個層次完成代碼審查與重構：

• 第一個層次：「業務架構」的代碼審查與代碼重構。
• 第二個層次：「代碼架構」的代碼審查與代碼重構。
• 第三個層次：「設計模式」的代碼審查與代碼重構。
• 第四個層次：「最優算法」的代碼審查與代碼重構。
• 第五個層次：「語言與代碼規範」的代碼審查與代碼重構。

1.9 擁有良好的版本控制、項目管理意識(選修)

著名代碼託管平臺 Github 中點贊量較高的經常是前端項目，JavaScript 編程語言也在 Github 中隨處可見。身爲前端工程師，咱們須要擁有良好的版本控制意識，使項目代碼、配置文件的改動歷史隨時可被人工追蹤、被自動化追蹤，以便進行 Bug 追溯、代碼審查、自動化測試。Github 正如其名，採用的是分佈式版本控制系統——Git。

軟件工程誕生的重要因素就是爲了解決日益複雜的軟件開發活動而產生的「軟件危機」，擁有良好的項目管理意識能夠方便咱們對日趨龐大的軟件項目進行效率化管理，以應對將來需求的變動。Trello、Teambition 都是不錯的選擇，咱們能夠經過任務版的用戶故事將附件、文檔、工做進度有機的組合起來，讓用戶和開發者團隊合做更加密切。

1.10 掌握軟件測試相關能力(選修)

白盒測試、黑盒測試、單元測試、集成測試、測試驅動開發

在「擁有良好的代碼規範、代碼質量、代碼註釋能力」一節的動圖中咱們看到了編寫測試代碼並自動化執行測試的一個應用場景。軟件測試通常分爲白箱測試和黑箱測試。通俗來說，黑箱測試測試應用程序的功能，而不是其內部結構或運做，適合集成測試以及系統測試等；白箱測試測試應用程序的內部結構或運做，而不是應用程序的功能，可應用於單元測試、集成測試中。單元測試的目的是檢驗基本組成單位（函數）的正確性。

function checkLoginPhone (phone) {
    if (phone === "") return false;
    if (phone.length !== 11) return false;
    if (phone.match(/[^\d]/g)) return false;
    return true;
}

之前端開發中常接觸到的單元測試框架 Jasmine 爲例，爲開發上述代碼中驗證手機號格式的函數 checkLoginPhone(phone)，咱們能夠先編寫相應的單元測試代碼，每一個 describe 用來測試一個函數，其中的多個 it 分別測試該函數在不一樣條件下的不一樣結果是否爲期待的結果。以下。

describe("驗證手機號格式", function () {
    it("手機號不能爲空", function () {
        var phone = "";
        var output = checkLoginPhone(phone);
        var result = false;
        expect(output).toEqual(result);
    });

    it("手機號不能爲非數字", function () {
        var phone = "";
        var output = checkLoginPhone(phone);
        var result = false;
        expect(output).toEqual(result);
    });
);

軟件測試常由專業測試工程師完成，但咱們在開發中小型軟件時徹底能夠本身勝任這份工做。愈發偏向業務邏輯的前端對測試的需求愈發凸顯。這同時須要咱們瞭解測試驅動開發、敏捷開發、極限編程的知識點。

1.11 熟練繪製概念圖、思惟導圖、流程圖、網絡拓撲圖等(選修)

個人另外一篇博客 《概念圖圖解 Web Cookie》 中曾介紹過概念圖與思惟導圖這兩大概念繪製工具。概念圖的普遍應用發揚了其發明者約瑟夫·D·諾瓦克(Novak)的那句總結——「有意義的學習涉及到新概念和命題歸入現有的認知結構的同化」。以我在學習過程當中繪製的「HTTP」概念圖爲例，以下所示。

前端工程師常在視覺上有更高的敏銳度，也須要繪製較多的圖來輔助開發，在寫博客、寫文檔時熟練掌握概念圖、思惟導圖、流程圖、網絡拓撲圖、UML 圖等的繪製將是表達思想的一大利器。

1.12 掌握持續集成、持續交付、持續部署相關編程能力(選修)

在「擁有良好的代碼規範、代碼質量、代碼註釋能力」一節咱們介紹過經過持續集成能夠保證良好的代碼規範程度。持續交付能夠看做持續集成的下一步，指的是頻繁地將軟件的新版本，交付給質量團隊或者用戶，以供評審；持續部署是持續交付的下一步，指的是代碼經過評審之後，自動部署到生產環境。以下圖所示，最終經過 DevOps 將軟件工程、技術運營和質量保障（QA）三者作交集，使整個軟件項目在開發過程當中的變動範圍更少，發佈協調更強，自動化過程更穩健。

同時相比服務端開發，前端開發因需求的變動其改動量更大，所以在前端開發的過程當中使用「精益思想」完成對持續集成、持續交付、持續部署的實戰工做意義非凡。

2、前端設計能力

前端分爲前端設計和前端開發。前者曾在 Web Pages 時代佔據了前端的主流，那時 JavaScript 默認被瀏覽器禁用，網頁間多依靠超連接形式相互連接。那時的前端工程師經常要求擁有必定的製圖、切圖能力。縱然如今 JavaScript 在 Web 領域已從前端拓展到後端 Node.js，一個合格的大前端工程師仍是應該多多注重拓展前端設計方面的知識點，以備不時之需。

2.1 掌握必定的用戶界面設計、人機交互知識(必修)

不管是懂前端的設計仍是懂設計的前端在任何互聯網公司都是很受歡迎的。良好的用戶界面及其交互氛圍能讓用戶產生溫馨的體驗，在一些功能性較弱的軟件項目中，當因用戶界面及其氛圍不足致使用戶體驗的降低常會對軟件產生致命一擊的效果。交互設計要求咱們可以進行用戶調研、概念設計以及建立用戶模型、界面流程並能開發項目原型。

拓展閱讀：

1. 《簡約至上》
2. 《用戶體驗的要素》
3. 《人人都是產品經理》

2.2 熟練至少一個主流平面設計工具(選修)

擁有了足夠的用戶界面設計與人際交互知識，咱們能夠選擇一個主流平面設計工具來強化咱們的設計能力。常見的平面設計軟件有 PS、CDR、AI、InDesign 等。

前端開發中的一些繪圖技術也常與平面設計工具設計出的圖片有共性。舉例來講：HTML 5 中的 Canvas 是像素級別的，能夠對應 PS 處理出的圖片； SVG 又是矢量級的，不管如何放大也不會看到像素塊，能夠對應 AI 處理出的圖片。熟練一個主流平面設計工具將是前端開發者和設計工程師之間重要的溝通橋樑。

2.3 熟練至少一個主流原型設計工具(選修)

主流原型設計工具經常能夠分別製做 Web 端、PC 端和 APP 端的原型，也有不少原型設計工具專爲一個平臺打造。原型設計工具每每不像平面設計工具同樣面面俱到，但能清晰的展示出各頁面內的主體組件和各頁面間的邏輯關係。

咱們在開發中小型前端項目時每每不須要專業的原型設計師(常被產品經理一職所包攬)，熟練使用至少一個主流原型設計工具能使咱們在正式編寫前端代碼前快速開發出一個直觀的原型參考系。

下圖展示了我在最近一次編程競賽 - 中國軟件杯中快速開發出的原型預覽。咱們團隊只有 3 我的，其餘兩人分別負責 PHP 微信端和 Java 搜索引擎的應用開發，快速迭代出一個產品原型頗有助於前端人員拆分重複組件並快速開發，和服務端人員肯定本身須要開發的接口。

詳見 《「消失」的這倆個月裏，個人前端項目如何從零開始》

3、前端開發能力

3.1 熟練使用 HTML、CSS 和 JavaScript 三大前端語言(必修)

HTML 是標籤語言，能夠構建前端頁面的骨架；CSS 是層疊樣式控制表，能夠構建前端頁面的外貌；JavaScript 是前端編程語言，能夠規範前端頁面的事件行爲。掌握 HTML、CSS、JavaScript 是前端開發三大基石，缺一不可。

偏向 HTML 和 CSS 的開發，咱們能夠走出一條會設計的前端工程師的道路；偏向 CSS 和 JavaScript 的開發，咱們能夠走出一條會服務端編程的前端工程師的道路。固然，CSS 之因此也能夠算做偏向服務端編程的道路之一，在於咱們可使用 SASS、LESS 等 CSS 預處理語言進行 CSS 的動態化開發。

拓展閱讀：

1. 《Head First HTML 與 CSS (第2版)》
2. 《CSS 禪意花園(修訂版)》
3. 《Javascript 權威指南》
4. 《JavaScript 高級程序設計(第3版)》

3.2 理解前端語言新標準 HTML五、CSS三、ES6 及其特性(必修)

熟練使用 HTML、CSS、JavaScript 還須要咱們理解其語言最新相關標準：HTML五、CSS3 和 ES6(ECMAScript6)。

• HTML 5 裏新增了許多特性：語義化和新的音頻、視頻支持等；
• CSS 3 被劃分爲模塊，解決了 CSS2 爲等待各個標準統一而耗費大量時間才能推動的不足之處，同時也提供了 2D、3D、動畫效果等新特性；
• ECMAScript6 等於 JavaScript - DOM - BOM，是 JavaScript 在 2015 年的最新標準，由於 ES6 對標準改動較大，前端開發者經常將一個前端項目是否支持 ES6 做爲推動前端新技術的重要橋樑之一。ES6 將箭頭函數、let 變量聲明命令、Promise 編程、模塊化編程等新特性歸入其標準中，獲得了各大瀏覽器最新版本的支持。

在 ES5 標準中，咱們須要第三方符合 AMD 標準的庫如 RequireJS、CommonJS 來支持 JS 模塊的導入，常見的能夠用如下代碼來實現：

var service = require('module.js')
console.log(service.port) // 3000

在 ES6 標準中，咱們可直接使用原生的 import、export 語句來實現模塊化編程，以下所示。這樣大大方便了使用 Node.js 等技術的前端項目的開發。

export var port = 3000
export function getAccounts(url) {
  ...
}

拓展閱讀

1. 《精通 CSS: 高級 Web 標準解決方案(第2版)》
2. 《衆妙之門: 精通 CSS3》
3. 《ES6 標準入門(第2版)》
4. 《深刻理解ES6》

3.3 熟練組件化開發、異步編程、虛擬 DOM相關編程能力(必修)

借鑑其餘編程領域如 Java GUI 的編程思想，前端組件化開發大大提升了開發效率並下降了維護成本。經過組件化開發，咱們能夠對前端頁面中重複的模塊進行「模塊化編程」，給每一個模塊賦予一個「類」的概念。最終根據具體頁面組裝其對應的前端 UI 組件。每一個組件間能夠經過數據流來交換數據，這也大大方便了單頁面應用的開發，相得益彰。下圖左側是一個前端頁面的原型圖，與之相對的有右側的組件代碼。

Ajax (異步的 JavaScript 與XML技術) 的出現讓用戶不用再經歷「提交表單等待服務器的漫長響應並經過刷新頁面來告訴本身哪裏輸入錯誤」的煩躁經歷，這樣作也節約了許多寬帶。爲了更好的掌握異步編程，咱們須要掌握 JavaScript 的「同步模式」和「異步模式」，並學會使用相應的回調函數來發布、訂閱、處理事件。

拋開單頁面應用，Web 頁面的性能鮮由 JavaScript 引發，經常是因過多的 DOM 操做引發。虛擬 DOM 隨着前端主流框架的更迭孕育而生。經過直接操做虛擬 DOM，間接操做真實 DOM，能夠優化不少性能。對虛擬 DOM 的深刻了解是見證一步步加入抽象層的前端開發的關鍵。

拓展閱讀：

1. 《JavaScript 異步編程:設計快速響應的網絡應用》
2. 《JavaScript DOM 編程藝術》
3. 《DOM 啓蒙》

3.4 掌握至少一門主流前端框架及其生態鏈、框架設計能力(必修)

前端框架層出不窮，前端開發領域儼然成了熱衷於造輪子的一帶。咱們能夠經過以下幾步來掌握至少一門主流前端框架及其生態鏈。

1. 瞭解各大前端框架的應用場景。
2. 進行前端開發框架的選型。
3. 掌握所選前端框架的思想。
4. 刻意練習所選前端框架的使用方法。
5. 時刻關注所選前端框架的生態鏈。

React、Vue 適合單頁面應用，擁有不少先進的前端開發思想；BootStrap、Ant Design 偏向 UI 開發，更多的提供 CSS 相關類庫。JQuery 經久不衰，極大的方便咱們操做真實 DOM 及其 CSS 屬性；D3.js、EChart 等框架使咱們能夠快速進行前端數據可視化的編程；RequireJS 在不支持 ES6 標準的 JS 開發環境下給咱們提供了一個良好的模塊化編程條件。數不勝數的前端框架都有各自的應用場景，咱們的前端項目能夠選擇其中一至多個框架進行快速開發。

同時，合格的前端工程師不能只會用成型的框架，還應該擁有必定自制框架的能力。咱們能夠先經過閱讀成型前端框架的源碼來學習框架設計的思想，有朝一日咱們便會根據本身的獨特需求造出獨一無二的框架輪子。

延伸閱讀：

1. 《JavaScript 開發框架權威指南》
2. 《深刻 React 技術棧》
3. 《Vue.js 權威指南》
4. 《Angular 權威教程》

3.5 掌握瀏覽器兼容、響應式佈局相關解決方案(必修)

早期佔據瀏覽器半壁江山的 IE 瀏覽器上存在的衆多瀏覽器兼容問題，耗費了當時前端開發者的大量開發時間。縱然如今的前端開發者已經不須要考慮太多的瀏覽器兼容問題，對其概念的瞭解有利於瞭解前端歷史包袱或在將來足以應對一些面向特殊羣體(早期 IE 瀏覽器使用者)的前端項目。

響應式佈局和單頁面應用是當代前端開發者的必備技能。從 Web Pages 到 Web App 時代，咱們開發的前端項目有愈來愈多的可能須要同時在電腦端和手機端進行訪問，一個有良好響應式佈局的前端項目能夠一個代碼運行在多種不一樣分辨率的平臺之上。

延伸閱讀：

1. 《響應式 Web 設計: HTML5 和 CSS3 實戰(第2版)》
2. 《響應式 Web 設計性能優化》

3.6 熟練 Node.js 環境、谷歌開發者工具使用方法(必修)

不一樣於 ReactJS、AngularJS 等 JavaScript 框架，Node.js 從誕生之初就是 JavaScript 的運行環境，基於 Chrome 的 V8 引擎打造，使用高效、輕量級的事件驅動、非阻塞 I/O 模型。

將以下的代碼運行在 NodeJS 上，即可經過純 JavaScript 代碼開啓服務器進程、鏈接非關係數據庫，不少服務端開發能作的事情，經過 Node.js 便能作到。而且在「技術基本功」裏提到的持續集成、持續交付、持續部署、敏捷開發等理念，經過 Node.js 社區都能找到相應的解決方案。

import express from 'express';
import mongoose from 'mongoose';

const app = express();
mongoose.connect('mongodb://localhost/');

app.listen(3000, function() {
  console.log('server started at http://localhost:3000');
});

經過谷歌開發者工具，咱們能夠快速定位頁面問題、斷點調試 JavaScript 代碼和進行前端頁面的 UI 效果預覽，最新的 Chrome 同時支持 ECMAScript6 的模塊化開發，一個微型 IDE 就藏在咱們的瀏覽器工具欄裏。

延伸閱讀：

1. 《深刻淺出 Node.js》
2. 《Chrome 擴展及應用開發》

3.7 掌握單頁面、移動 Web 、混合應用開發相關技術點(選修)

從門戶網站成羣的 Web 1.0 到以用戶爲中心的平臺/社交網站 Web 2.0，再到能進行個性化智能化推薦的 Web 3.0，每次 Web 時代的更迭背後都是 Web 技術發展上的一大飛躍。有了對 Web 1.0 到 3.0 發展史的宏觀瞭解，對掌握單頁面應用、移動 Web 開發和混合應用開發、離線 Web 等相關技術點將會有一個質的飛躍。

在單頁面 (SPA) 應用中，整個前端項目架構在一個網頁上，經過動態拉取服務端數據來提供一個和桌面應用程序類似的用戶體驗。同時，在單頁面應用的開發中，咱們須要着重注意組件、路由和跨域請求這幾個核心知識點。單頁面應用具體的優缺點以下：

• 優勢 1. ：無刷新體驗
• 優勢 2. ：徹底的前端組件化
• 優勢 3. ：API 共享
• 優勢 4. ：組件共享
• 缺點 1. ：首次加載大量資源
• 缺點 2. ：較高的前端開發門檻
• 缺點 3. ：不利於 SEO

熟悉了響應式佈局的開發，咱們就能夠嘗試步入移動 Web 領域。顧名思義，移動 Web 就是運行在移動端上，而移動端的設備配置不盡相同，這經常須要咱們去了解移動端的知識，如 pixel 像素基礎、Viewport 視圖、和 Tap 觸摸事件等，移動 Web 經常使用的 meta 標籤以下，其做用聲明該頁面寬度爲設備寬度，初始縮放比例爲 1 倍，並禁止用戶縮放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

到了混合應用開發，其常以 App 的形式出如今移動端上，相比原生移動端應用，混合 Web 應用可移植性強、開發成本低，還能夠經過必定的接口來直接使用手機硬件能力。固然，因爲混合應用對硬件的使用效率相比原生應用還有不足之處，再加上有些手機平臺不鼓勵使用過多的混合應用開發技術(能夠搜索「蘋果 熱更新」)。前端開發者能夠視具體業務來進行技術選型。

3.8 熟練前端包管理、構建工具、SEO、Web 性能優化(選修)

當咱們使用到的前端庫愈來愈多，須要一個前端包管理器來統一管理：Bower 便能作到這一點，經過給項目中引入 Bower 包管理器，咱們僅僅須要修改配置文件就能進行高效化的前端庫管理。熟練使用成型的包管理器，咱們也能夠很方便的解決前端依賴等問題。

前端構建工具能夠減小咱們不少的編程「機械運動」。經過使用成型的前端構建工具，簡單的幾行命令就能編譯並轉換 JavaScript 的不一樣版本、自動化壓縮代碼、自動化執行測試文件。

我曾在個人一次新項目中，架構了以下技術棧，各類工具各有所長，固然在個人這個項目最後，不少技術棧因爲時間問題並無實踐。

• Bower 作 JavaScript 的包依賴管理
• JQuery 封裝 DOM 操做並進行跨域請求
• NPM 作 Node.js 的包依賴管理
• ESLint 作代碼風格規範檢測
• Grunt 啓動 Karma 統一項目管理
• Istanbul 檢查單元測試代碼覆蓋率
• Jasmine 作單元測試
• JSDoc 規範代碼註釋風格
• Karma 自動化完成單元測試
• Webpack 最終打包整個項目文件
• Yeoman 最後封裝成一個項目原型模板

「掌握單頁面、移動 Web 、混合應用開發相關技術點(選修)」一節說到單頁面應用的缺點是不利於 SEO，那麼 SEO 究竟是什麼？維基百科作出了以下解釋。可見當咱們正式運營一個上線的 Web 項目時，就須要 SEO 來提供「曝光度」。

搜索引擎優化（英語：search engine optimization，縮寫爲SEO），是一種經過了解搜索引擎的運做規則來調整網站，以及提升目的網站在有關搜索引擎內排名的方式。

構建工具能夠自動化壓縮代碼文件，就涉及到了 Web 性能優化的一個環節。輔之以瀏覽器開發者工具的熟練使用，咱們能夠實地測試用戶加載首頁、加載各個圖片時的等待時間，來經過優化 Web 性能增進用戶體驗。

3.9 掌握至少一個靜態模板引擎、CSS 預處理、JS 超集(選修)

當頁面結構趨於一致性後，數據的動態填充就是咱們常常須要處理的事情。掌握一個前端模板引擎能動態的生成咱們所需的頁面，一個應用實例就是詳情頁和 Ajax 的組合。所謂靜態模板引擎，指的是在 Web 應用中，不經過與服務端進行交互，用來動態生成 HTML 的工具，常見的有 Jeklly、Hexo 等，這些知識點會在搭建本身的靜態站點時接觸到。

常見的 CSS 預處理有 SASS、LESS、Stylus 等，經過一門新的編程語言來動態化開發靜態的 CSS 代碼，並將 CSS 做爲目標生成文件；可讓咱們的 CSS 更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。

因爲 JavaScript 是一種弱類型（或稱動態類型）語言，即 JS 程序在生成變量時不須要指定其數據類型，相應的解決辦法就有使用例如 TypeScript 等強類型的、拓展於 JavaScript 的 JS 超集，最終將其編譯、轉化成合法的 JavaScript 代碼。這樣咱們能夠避免不少潛在的程序 BUG。

3.10 擁有瀏覽器插件、微信小程序、前端數據可視化編程能力(選修)

瀏覽器插件的開發/使用能力、微信小程序的開發能力以及和前端數據可視化的實戰能力身爲第三方平臺的表明，在不一樣的學習方向下有不一樣的側重點，咱們不可能所有都掌握。

但做爲選修，咱們能夠了解到大部分瀏覽器插件其實就是用前端語言實現的；微信小程序也可看作從在微信提供的前端框架下開發而來；前端數據可視化更多的使用一些主流可視化庫實現，可以快速入手將來的新項目。

4、計算機網絡

4.1 熟知經常使用計算機網絡協議(必修)

用戶在瀏覽器所能看到的前端界面其源碼經常放在 Web 服務器上，當咱們須要將項目部署到線上並向用戶提供可訪問的服務時，就須要咱們對 Web 開發的核心樞紐 —— 計算機網絡——有所瞭解。其中包含計算機網絡的造成與發展、定義與分類、組成與結構。

• TCP/IP 協議即傳輸控制協議/因特網互聯協議，是計算機網絡中使用最普遍的體系結構之一。TCP/IP 的四層結構從上到下分別爲：應用層、傳輸層、網絡層、連接層。
• 應用層直接與用戶打交道，負責傳送各類最終形態的數據，常見的有 SMTP (簡單郵件傳輸協議)、NNTP (網絡新聞傳輸協議)和 HTTP (超文本傳輸協議)。
• 傳輸層負責傳送文本數據，主要協議是 TCP 協議 —— 一個面向鏈接的、保證可靠傳輸的數據流服務的協議。
• 網絡層負責分配地址和傳送二進制數據，主要協議是 IP 協議，經過 IP 來找到網絡中的位移主機。
• 鏈接層負責創建電路鏈接，是整個網絡的物理基礎，典型的協議包括以太網、ASDL等。

這裏再提一下 WebSocket，一種在單個 TCP 鏈接上進行全雙工通信的協議。WebSocket 容許服務端主動向客戶端推送數據，在 WebSocket API 中，瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠建立持久性的鏈接，並進行雙向數據傳輸。WebSocket 避免了 Ajax 無心義的輪詢，在不少應用級 Web 項目中常常有所涉及。

延伸閱讀：

1. 《圖解 HTTP》
2. 《HTTP 權威指南》
3. 《圖解 TCP/IP》
4. 《HTML5 WebSocket 權威指南》

4.2 瞭解網絡體系結構、網絡拓撲模型(選修)

TCP/IP 協議的四層與 OSI 概念模型(開放式系統互聯通訊參考模型)的七層有必定的對應關係，後者並無提供一個能夠實現的方法，而是描述了一些概念，用來協調進程間通訊標準的制定，是概念性框架。咱們須要從宏觀角度來了解整個網絡體系結構。

計算機網絡的拓撲結構可分爲星型網、網型網、環型網、樹型網、總線網和混合拓撲，描述的是網絡中的各節點設備的鏈接狀況。深刻其中會更多的引出硬件、網絡工程等知識點，這裏做爲選修瞭解便可。

5、服務端應用開發

5.1 至少掌握一門服務端開發語言及其經常使用框架(必修)

在 Web 服務端架構的演進史中，咱們從單機到多機(集羣)、從應用和數據分離到邏輯與接口分離，服務端漸漸只提供接口，供前端 Web 應用來訪問。即使如此，瞭解傳統的服務端開發選型，並掌握現代化的服務端開發能力依然重要。在前端面試中，經常就會有相似的這麼一句話「至少掌握一門服務端開發語言及其經常使用框架」。

語言只是工具，只要有處理網絡請求、訪問操做數據庫的能力，任何編程語言均可以部署在服務器上，常見的服務端編程語言及其主流框架以下。

• PHP 語言：Laravel、Yii、CodeIgniter、ThinkPHP 框架等
• Python 語言：Flask、Django 框架等
• JavaScript 語言：Node.js 平臺
• Ruby 語言：Ruby on rails 框架等
• Java 語言：Spring、Struts、Hibernate 框架等

延伸閱讀：

1. 《PHP與MySQL程序設計(第4版)》
2. 《Python 核心編程(第3版)》
3. 《Ruby 元編程(第2版)》
4. 《Java 編程思想(第4版)》
5. 《Go 語言實戰》

5.2 熟練掌握 Web 服務器的搭建與部署(必修)

服務端應用開發的入門步驟的前兩步經常是選擇服務端語言及其框架、搭建相應的開發環境。傳統的 LAMP (Linux + Apache + MySQL + PHP) 架構和 全棧 MEAN (MongoDB + Express.js + Angular.js + Node.js ) 架構的 Web 流程圖分別以下所示。儘管每種語言的側重點不一樣，但其均對基礎的 Web 服務端環境提供支持，根據本身的發展方向或項目所需來進行技術選型。

• LAMP (Linux + Apache + MySQL + PHP) 示意圖：

• MEAN (MongoDB + Express.js + Angular.js + Node.js ) 示意圖：

Web 服務端的部署其實就是將本地環境搭建在遠程服務器上。首先咱們須要一臺遠程服務器，能夠在亞馬遜雲、新浪雲、騰訊雲等雲平臺進行雲主機租賃。其次，咱們的部署多爲純命令行形式，須要咱們對 Linux 文件系統、服務端配置等均有所熟知。部署服務端環境至線上狀況不一樣於直接部署到本地，須要考慮更多其餘需求，也是必不可少的服務端能力之一。

延伸閱讀：

1. 《鳥哥的Linux私房菜:服務器架設篇(第3版)》
2. 《圖解服務器端網絡架構》

5.3 擁有撰寫規範的數據字典、接口文檔能力(必修)

服務端開發人員的一條成長之路即是成爲架構師，在有足夠的能力進行架構設計前，先要了解 Rustful API，並會寫規範的數據字典和接口文檔。

一個典型的數據字典以下：

|字段|類型|空|鍵值|註釋|
|----|----|----|----|----|
|sId|int(10)|否|主鍵|惟一標識|
|sBarcode|varchar(20)|否|    |學生帳號(學號)|
|sPassword|varchar(20)|否|    |學生密碼|
|sName|varchar(15)|是|    |學生姓名|
|cId|varchar(15)|否|外鍵|班級號|
|sRegTime|date|否|    |學生註冊時間|

一個典型的接口以下：

### 單個學生登陸
---
**簡要描述：** 
- 學生登陸接口，帳號由教師一鍵生成，默認密碼 123456。
**請求URL：** 
- `https://`
**請求方式：**
- POST 
**參數：** 
|參數名|必選|類型|說明|
|:----    |:---|:----- |-----   |
|barcode |是  |string | 身份證號碼    |
|password   |是  |string | 密碼    |
**返回示例**
``
{
    'res': 1
}
``
**返回參數說明** 
|參數名|類型|說明|
|:-----|:-----|-----|
|res |int   |1 爲成功 0爲失敗  |
**備註**
此接口同時會返回 Cookie

延伸閱讀：

1. 《大型網站技術架構:核心原理與案例分析》
2. 《大型分佈式網站架構設計與實踐》

5.4 掌握 Linux 網絡編程、多線程應用開發、爬蟲能力(必修)

除了腳本語言，服務端開發對於 C 語言或 C++ 語言的掌握也十分重要。在 Linux 網絡編程上，首先須要瞭解網絡協議，再仿照示例來嘗試使用 C/C++ 進行網絡 Socket 編程，能將抽象的網絡知識生動化、形象化。

項目對搜索引擎的優化即是爲了方便搜索引擎的爬蟲來有效識別該網站信息，同時因爲不少互聯網數據沒有開放的接口供咱們使用，咱們也須要經過爬蟲技術來定製化咱們對網絡信息篩選後的服務，爬蟲也須要咱們掌握。

延伸閱讀：

1. 《Linux系統編程(第2版)》
2. 《UNIX網絡編程》
3. 《Linux多線程服務端編程》
4. 《用 Python 寫網絡爬蟲》

5.5 瞭解網絡安全、反向代理、HTTP 緩存優化(選修)

此處划水，拋磚引玉。

5.6 瞭解網站監測、運維、集羣、負載均衡(選修)

爲了及時跟蹤服務器運行狀態，咱們能夠選擇性的掌握網站監測的一些手段——或使用命令行或使用相關服務平臺。同時經過必定的運維能力，咱們能及時將不正常的服務器運行狀態拉入正規之中——DevOps 是運維開發的一種大趨勢。

當系統面臨大量用戶訪問，負載太高的時候，一般會使用增長服務器數量來進行橫向擴展，使用集羣和負載均衡提升整個系統的處理能力。初學者的項目通常並非很大，咱們將集羣和負載均衡列入選修。

6、數據庫與搜索引擎應用開發

6.1 熟知數據庫分類、數據庫範式等數據庫基本概念(必修)

本文將服務端應用開發與數據庫/搜索引擎應用開發分離開，也是考慮到單機負載問題。一般意義上初學者所學的服務端開發環境都是搭建在一臺機子上，也不太會出現負載太高的狀況。如今將數據庫與應用分開，咱們只是在應用的配置中把數據庫的地址從本機改到了另一臺機器上而已，對開發、測試、部署都沒有什麼影響，卻可以緩解當前的系統壓力，不過隨着時間的推移，訪問量繼續增大，該類系統仍是須要繼續演進的。

在數據庫的學習過程當中，咱們須要瞭解實體－聯繫模型、關係型數據庫(如 MySQL)、非關係型數據庫(如 MongDB)、關係模型、視圖、觸發器、數據庫範式等知識點，從而便於咱們真正理解 Web 應用究竟是如何訪問數據庫中的數據並展示到前臺界面中的。下圖是關係型數據庫的三層模式，兩級映像，對數據的起到很好的獨立性做用。

延伸閱讀：

1. 《數據庫系統概念》
2. 《大型網站系統與 Java 中間件實踐》

6.2 擁有良好的數據庫設計、操做和管理能力(必修)

說句題外話，前端培訓班今年來培養出大量的俗稱學員，經常就由於所學淺嘗輒止到數據的 CRUD (增刪改查) 上而飽受詬病。引覺得鑑，咱們在學習數據庫設計及其相關操做之時，能夠經過使用成型的數據庫設計工具和拜讀較權威的書籍來拓展知識面。下圖展現了使用數據庫設計工具時的界面，咱們能夠一鍵導出成可執行的語句或直接導出成圖片。

數據庫的管理就須要咱們掌握數據庫管理系統的使用。數據庫只是數據的集合，數據庫管理系統給咱們提供了數據定義功能、數據操縱功能、數據庫的運行管理和數據庫的創建與維護等功能，提升了整個數據庫系統的安全性與數據獨立性、數據完整性。

延伸閱讀：

1. 《SQL必知必會(第4版)》

6.3 掌握至少一個開源搜索引擎(選修)

數據庫與搜索引擎都服務於數據，前者核心是數據存儲和事務能力，後者關注信息採集和關聯的能力，各有千秋。依然以我這段時間所作的小項目爲例，咱們三人團隊是這樣分工的：Web 前端一人、PHP 微信開發一人、Java 搜索引擎一人；同時搜索引擎的接口供 PHP 微信端使用，PHP 微信端接口供 Web 前端使用。

使用成型的開源搜索引擎還有相應的數據展現和操做功能，須要咱們多加練習。

6.4 瞭解分佈式數據庫、大數據、機器學習(選修)

當咱們的應用日趨龐大，分佈式、大數據就孕育而生。而有了龐大的數據量，基於這些數據的機器學習領域也變得活躍起來。引用維基百科。

• 分佈式數據庫是用計算機網絡將物理上分散的多個數據庫單元鏈接起來組成的一個邏輯上統一的數據庫。每一個被鏈接起來的數據庫單元稱爲站點或節點。分佈式數據庫有一個統一的數據庫管理系統來進行管理，稱爲分佈式數據庫管理系統」。
• 大數據在總數據量相同的狀況下，與個別分析獨立的小型數據集（Data set）相比，將各個小型數據集合並後進行分析可得出許多額外的信息和數據關係性，可用來察覺商業趨勢、斷定研究質量、避免疾病擴散、打擊犯罪或測定即時交通路況等；這樣的用途正是大型數據集盛行的緣由。
• 機器學習算法是一類從數據中自動分析得到規律，並利用規律對未知數據進行預測的算法。由於學習算法中涉及了大量的統計學理論，機器學習與推斷統計學聯繫尤其密切，也被稱爲統計學習理論。算法設計方面，機器學習理論關注能夠實現的，行之有效的學習算法。

可見到了這一步，已經離 Web 開發有些許距離，但同爲計算機科學領域，衆多看似不相關的技術之間經常有意想不到的聯動效果。

7、編程軟技能

7.1 學會刻意練習、持續改進能力(必修)

刻意練習≠傳統的學習方法，須要咱們帶上學「一萬小時」的心態來刻意的強化咱們的能力。沒有人天生會編程，不少互聯網上厲害的技術人員要麼從小開始接觸到編程要麼接觸以後大部分時間都在編程。只要咱們利用好時間，刻意練習編程能力、刻意練習打字速度都能在必定的階段後有較大的長進。但願這不是簡單的方法論，結合咱們本身的性格特色來強化學習便可。

持續改進要求咱們在刻意練習的基礎上能隨時看到本身的成長。能夠經過寫總結、完成計劃任務來說本身在編程領域的成長可視化；也能夠經過和他人相約督促、結對面層、代碼重審等環節實現。

延伸閱讀：

1. 《刻意練習:如何重新手到大師》
2. 《精益思想(白金版)》

7.2 擁有必定的抗壓能力(必修)

縱然咱們不該該提倡加班文化，客觀存在的加班現象讓咱們時常得迴歸到開發狀態。咱們能夠經過培養良好的健身習慣、良好的飲食習慣、良好的做息習慣使本身的精神能隨時集中起來。高薪也是有代價的。

延伸閱讀：

1. 《頸椎病康復指南》，哈哈

7.3 擁有良好的中英文閱讀能力、寫做能力(選修)

基於互聯網的技術經常須要經過互聯網來追蹤最新改動。在線技術文檔的閱讀能力、各類技術框架書籍的閱讀能力的提升都是咱們快速學習到新知識的重要一步。英文閱讀能力，也必不可少。就像，中文程序開發者中厲害的那些人，每每都翻譯過英文技術書籍。

寫做是一種凝聚、再創做、分享的動態過程。在本文的寫做過程當中整理了本身大學兩年對 Web 開發的廣度認知，也經過 GitChat 知識付費分享給每個感興趣的人，使文章能取之社區還之社區，雙向成長。

7.4 擁有必定的人際交往能力、演講能力、影響力(選修)

影響力？就是即便在資本的寒冬中，也能把本身「賣」個好價錢~。

8、總結

本文經過對軟件工程專業所學知識點的總結與思考，從 Web 開發的技術基本功、前端、後端、計算機網絡和編程軟技能五個方面，解析出了整個大前端技術棧。依然如文章開頭所說，這篇文章不會具備太多的官方性質，但但願能達到拋磚引玉的效果，讓咱們在學習 Web 前端開發的道路上再也不迷茫。引用移動端開源框架 Phonegap 的一句話：

咱們相信 Web，是由於相信它是解決設備差別化的終極方案；咱們相信，當 Web 在今天作不到一件事的時候，是由於它還沒來得及去實現，而不是由於它作不到。而 Phonegap，它的終極目的就是消失在 Web 標準的背後。

社會的進步每每伴隨着技術的革新，咱們在前端行業的每個腳步，都會成爲下一代 Web 應用模型的墊腳石，就讓咱們一塊兒用最大的熱情投身前端行業中吧。

那麼以貫穿本文的以下導圖來結尾，期待咱們的再次相遇~。

---