本文首發(fā)于 GitChat惹盼，現(xiàn)免費放出~感謝大家的支持。

我們都知道茫蛹，大學幾乎是沒有 Web 前端課的猖吴。以我所在的大學為例憔恳，唯一引導我們了解 JavaScript 的也只是‘人機界面’和‘Web應用開發(fā)’選修課瓤荔。再者，由于這些選修課的課時短钥组、面向的主要群體是大部分大學生等原因输硝，其最終所涉及的內容層次也很難趕上近年來 Web 前端領域的快速變化。自學程梦，看起來是廣大前端學習者的普遍成長道路点把。本文嘗試結合軟件工程專業(yè)背景并貫穿軟件工程思想，開啟一個常秤旄剑“不為人所知”的大前端技術棧之旅郎逃。

P.S: 為了對這場 Chat 有一個背景了解，這里小提一句：筆者現(xiàn)為準大三學生挺份，前倆年的 Web 開發(fā)學習經(jīng)歷輔之以參與/組織線上線下開發(fā)者社區(qū)的技術分享活動褒翰，對整個 Web 開發(fā)有了一定程度上的宏觀認知。希望本文能通過一定程度的拋磚引玉填補不足~。

目錄

• 技術基本功
• 前端設計能力
• 前端開發(fā)能力
• 計算機網(wǎng)絡知識儲量
• 服務端應用開發(fā)能力
• 數(shù)據(jù)庫與搜索引擎開發(fā)能力
• 編程軟技能

1 技術基本功

標準搜索引擎搜到的优训，只是 4% 的互聯(lián)網(wǎng)數(shù)據(jù)朵你。引以為例，希望當我們談到“大前端”時揣非，前端初學者不再總被“HTML抡医、CSS、JavaScript 基礎”俘困于學習 Web 開發(fā)的瓶頸之中早敬，反之可以通過掌握以下技術基本功來拓展自己的編程視野忌傻、提高自己的編程能力，為成為合格的大前端工程師做出扎實的鋪墊搞监。所有章節(jié)通過“必修”水孩、“選修”來簡單標識其重要性。

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

我曾用整整一篇博客 (@強化你的打字速度) 來說明訓練出一個打字坐姿良好腺逛、打字速度標準的習慣其重要性荷愕。打字速度可以用 WPM - Word Per Minute - 每分鐘敲出的單詞個數(shù)(5 個字符被視為一個單詞)來進行衡量衡怀。初級棍矛、中級和高級的打字水平評判準分別是 20 WPM、40 WPM和 60 WPM抛杨。剛剛在注意打字手勢與打字坐姿的條件下够委，評測出我的最新打字速度是 51 WPM，不算太高怖现，但還可以茁帽。

在這里我們以打字速度達到 40 WPM 為一個奇點，合格的程序開發(fā)者都應該能達到這一水準的屈嗤。

延伸閱讀：

1. 常用的鍵盤布局為 QWERT 布局潘拨，可以選用更高效的 DVORAK 布局。

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

“工欲善其事饶号，必先利其器铁追。”對于主流代碼開發(fā)工具的掌握將會是我們高效開發(fā)的一個加分項茫船。就代碼編輯器和 IDE 的區(qū)別來說：

前者專注源代碼的開發(fā)琅束，常常會根據(jù)具體編程語言有語法高亮、代碼折疊等功能算谈，支持大多數(shù)編程語言的開發(fā)涩禀。通過一定的定制化，我們可以給簡易的編輯器加入風格迥異的插件然眼，組成一整套得心應手的開發(fā)流程艾船。一個典型的例子如跨平臺的 Sublime 編輯器，其支持 Python 語言編寫的插件，可通過包管理器擴充本身功能屿岂，大多數(shù)的包使用自由軟件授權發(fā)布礁蔗，并由社區(qū)建置維護。

后者的中文全稱是“集成開發(fā)環(huán)境”雁社，通俗來講可以當做一種編輯器的全家桶浴井，主要針對特定的編程語言而量身打造。IDE 在內部除了可以直接寫源代碼文本霉撵，還常常默認擁有打包并編譯為可用程序的功能磺浙，有些 IDE 還可以設計圖形界面。IDE 通常包括代碼編輯器徒坡、自動構建工具撕氧、調試器和版本控制系統(tǒng)。一個典型的例子如 WebStorm喇完，其支持圖片預覽伦泥，擁有內置命令行和版本控制系統(tǒng)，對于錯誤的前端 JavaScript 代碼還有相應的智能提醒和改正能力锦溪。WebStorm 良好的集成了編輯不脯、文件、管理刻诊、編譯防楷、調試、運行等功能则涯，大大的提高了開發(fā)者生產(chǎn)力复局。

身為大前端工程師，根據(jù)開發(fā)需要選擇自己偏愛的編輯器或 IDE 并刻意練習其使用方法粟判，在開發(fā)代碼時能達到工具熟練度與思維速度相匹配的境地亿昏，也就足夠勝任這項技術基本功。

延伸閱讀：

1. Web 開發(fā)推薦掌握的代碼編輯器或 IDE 有： VIM档礁、Sublime角钩、WebStorm、IDEA事秀、VSCode 以及一些在線 IDE 等彤断。

1.3 擁有良好的代碼規(guī)范、代碼質量易迹、代碼注釋能力(必修)

程序開發(fā)的真實情況是宰衙，代碼是給人看的，偶爾在機器上跑一跑睹欲。如何制定一個可執(zhí)行的代碼規(guī)范并使項目最終擁有較高代碼質量供炼，對于占據(jù)軟件開發(fā)成本比例很高的軟件維護工作起到了一個決定性的作用一屋。代碼規(guī)范、代碼質量袋哼、代碼注釋能力三者相輔相成冀墨。

代碼規(guī)范是一種持續(xù)的行為 ，良好的代碼規(guī)范可以依靠代碼規(guī)范文檔或成熟的規(guī)范工具進行統(tǒng)一——前者不應復雜涛贯，但應具有一些強制性诽嘉；后者例如在前端開發(fā)的環(huán)境下，可以使用 ESLint 來進行可定制化的代碼風格檢查弟翘，或使用持續(xù)集成(CI)理念并通過相匹配的 CI 服務器進行軟件交付虫腋，以確保高水平的代碼質量。下圖是 CI 的實際應用過程示例稀余。

基于 AWS Lambda 持續(xù)集成工具 LambCI - 取材@開源中國

在上述動圖中悦冀，當我們在搭建好的持續(xù)集成(CI)環(huán)境下使用 git push 提交代碼后，CI 服務器將根據(jù)相關配置自動化執(zhí)行代碼規(guī)范和代碼質量檢查過程(這里是自動運行的是測試代碼)睛琳，并輸出相應的檢查結果盒蟆。

其次，統(tǒng)一編碼規(guī)范师骗、統(tǒng)一語言版本历等、統(tǒng)一編輯器配置（tab和空格之類）、統(tǒng)一文件編碼丧凤，統(tǒng)一數(shù)據(jù)庫等等行為募闲，都是提高代碼質量步脓、盡力避免因為環(huán)境不同而導致 Bug 眾多的種種步驟愿待。

通俗易懂的代碼注釋其意義在程序員界想必“路人皆知”，前端可以使用
JSDoc 來規(guī)范注釋代碼靴患。除了簡單的注釋之外仍侥，JSDoc 還能做很多其他的事情，在 JSDoc 中文文檔中鸳君，這么介紹到农渊。

JSDoc是一個根據(jù) JavaScript 文件中注釋信息，生成 JavaScript 應用程序或庫或颊、模塊 API 文檔的工具砸紊。你可以使用他記錄如：命名空間，類囱挑，方法醉顽，方法參數(shù)等。類似 JavaDoc 和 PHPDoc∑教簦現(xiàn)在很多編輯器或IDE中還可以通過 JSDoc 直接或使用插件生成智能提示游添。從而使開發(fā)者很容易了解整個類和其中的屬性和方法系草，并且快速知道如何使用，從而提高開發(fā)效率唆涝，降低維護成本找都。

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

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

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

在編程范式上，我們需要理解編程語言的兩個分類——命令式編程和聲明式編程——的設計思想亡驰。其中嚎京，非命令式的編程都可歸為聲明式編程，命令式隐解、函數(shù)式和邏輯式是最核心的三種范式鞍帝。可以用下圖來表示煞茫。

命令式和聲明式編程

命令式編程和聲明式編程起源的不同決定了這兩大類范式代表著迥然不同的編程理念和風格：命令式編程是行動導向（ Action-Oriented ）的帕涌，因而算法是顯性而目標是隱性的；聲明式編程是目標驅動（ Goal-Driven ）的续徽，因而目標是顯性而算法是隱性的蚓曼。以階乘函數(shù)來示例，命令式钦扭、函數(shù)式和邏輯式的不同表現(xiàn)如下纫版。

C++(命令式)

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

Lisp(函數(shù)式)

(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.

縱然聲明式編程有諸多便捷之處其弊，但其在著重交互和業(yè)務邏輯的前端開發(fā)下就不那么得心應手。聲明式編程更擅長于數(shù)理邏輯的應用膀斋。因此我們能從編程范式角度理解前端開發(fā)將會大大提高我們的編程水平梭伐。

延伸閱讀：

1. 《JavaScript 函數(shù)式編程》

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

一般符合軟件工程要求的軟件項目要求我們擁有概要設計說明書、需求規(guī)格說明書和測試設計說明書仰担。其中糊识。

• 概要設計說明書包括程序系統(tǒng)的基本處理流程、程序系統(tǒng)的組織結構摔蓝、模塊劃分赂苗、功能分配、接口設計贮尉、運行設計拌滋、安全設計、數(shù)據(jù)結構設計和出錯處理設計等绘盟，為程序的詳細設計提供基礎鸠真。
• 軟件需求說明是軟件系統(tǒng)需求的規(guī)格化說明悯仙，是對將要開發(fā)系統(tǒng)的行為的說明。它包括功能性需求及非功能性需求吠卷，非功能性需求對設計和實現(xiàn)提出了限制锡垄，比如性能要求，質量標準祭隔，或者設計限制货岭。
• 測試說明書包括測試目標、測試范圍疾渴、性能要求千贯、測試資源、測試環(huán)境搞坝、測試策略搔谴。

延伸閱讀：

1. 《軟件工程》

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

數(shù)據(jù)結構的良好選擇可以提高算法效率敦第。從數(shù)據(jù)結構角度來說，需要我們熟知數(shù)組店量、堆棧芜果、隊列、鏈表融师、樹右钾、圖、堆和散列表的相關知識點旱爆，并能夠根據(jù)具體問題通過高級編程語言具體實現(xiàn)舀射；從算法角度來說，還需要我們熟知時間復雜度疼鸟、空間復雜度后控、深度優(yōu)先、廣度優(yōu)先空镜、圖論和動態(tài)規(guī)劃等算法思想。前端開發(fā)因為 JavaScript 語言封裝了很多操作數(shù)據(jù)的具體過程且更編程目標是開發(fā)應用邏輯捌朴，在算法層面要求并不是很高吴攒，但熟知算法思想可以提升每個前端開發(fā)者的計算機科學素養(yǎng)。在看重基礎的開發(fā)者面試中也能提高自己的競爭力砂蔽。

算法用來解決計算上的問題洼怔，設計模式用來解決“設計層次”的問題。在軟件工程中左驾，設計模式是對軟件設計中普遍存在（反復出現(xiàn)）的各種問題镣隶，所提出的解決方案极谊。JavaScript 就有很多的設計模式值得學習并掌握，如下所例安岂，這里就不一一介紹轻猖。通過使用設計模式，可以使我們的代碼更加的可復用域那，可擴展以及可測試咙边。

• 單例模式、簡單工廠模式次员、觀察者模式败许、適配器模式、代理模式淑蔚、橋接模式市殷、外觀模式、訪問者模式刹衫、策略模式被丧、模板方法模式、中介者模式绪妹、迭代器模式甥桂、組合模式、備忘錄模式邮旷、職責鏈模式黄选、享元模式、狀態(tài)模式婶肩“煜荩——參考《常用的Javascript設計模式》

延伸閱讀：

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

1.7 熟練使用三大操作系統(tǒng)之一及其開發(fā)者環(huán)境(必修)

軟件的開發(fā)活動離不開 Windows、Linux 和 Mac 三大操作系統(tǒng)所各自形成的生態(tài)鏈律歼。我們至少需要能夠在其中一個操作系統(tǒng)下進行高效開發(fā)民镜，并了解該環(huán)境下的應用軟件使用技巧和常用配置管理。

如在 Windows 下险毁，我們需要知道環(huán)境變量該在哪里修改制圈；在 Linux 下，我們需要知道 apt-get畔况、yum 等包管理器的使用方式鲸鹦；在 MacOS 下，我們需要知道 Mac 常用的開發(fā)工具等等跷跪。無論哪種馋嗜，都應該多理解 Linux 操作系統(tǒng)及其使用方式。前端使用的 Bower 管理器吵瞻、Node 環(huán)境以及自動化測試葛菇、版本控制等都離不開 Linux 命令行的設計思想甘磨。

深入操作系統(tǒng)的內核，我們可以了解計算機如何進行進程管理眯停、內存管理鱼鼓、文件管理以及網(wǎng)絡管理网持，從而在開發(fā)中遇到電腦卡頓、網(wǎng)絡不通暢等情景時能及時找到問題所在，對癥下藥贪壳。

enter image description here

延伸閱讀：

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

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

適當?shù)暮蛨F隊成員舉辦一場 Code Review(代碼審查)冗荸，有助于保證軟件質量父阻、促進團隊成長和避免團隊成員因缺席而導致軟件進度的“單點故障”。尤其在團隊沒有測試開發(fā)人員的情況下侄旬，我們很難達到令人滿意的測試覆蓋率肺蔚。來一場“說走就走”的代碼審查將對軟件質量做出巨大貢獻。

引用 《代碼審查與重構的5個層次》 的觀點儡羔，我們可以通過如下五個層次完成代碼審查與重構：

• 第一個層次：”業(yè)務架構“的代碼審查與代碼重構
• 第二個層次：”代碼架構“的代碼審查與代碼重構
• 第三個層次：”設計模式“的代碼審查與代碼重構
• 第四個層次：”最優(yōu)算法“的代碼審查與代碼重構
• 第五個層次：”語言與代碼規(guī)范“的代碼審查與代碼重構

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

著名代碼托管平臺 Github 中點贊量較高的常常是前端項目，JavaScript 編程語言也在 Github 中隨處可見汰蜘。身為前端工程師仇冯，我們需要擁有良好的版本控制意識，使項目代碼族操、配置文件的改動歷史隨時可被人工追蹤苛坚、被自動化追蹤，以便進行 Bug 追溯色难、代碼審查泼舱、自動化測試。Github 正如其名枷莉，采用的是分布式版本控制系統(tǒng)——Git娇昙。

軟件工程誕生的重要因素就是為了解決日益復雜的軟件開發(fā)活動而產(chǎn)生的“軟件危機”，擁有良好的項目管理意識可以方便我們對日趨龐大的軟件項目進行效率化管理笤妙，以應對未來需求的變更冒掌。Trello、Teambition 都是不錯的選擇危喉，我們可以通過任務版的用戶故事將附件宋渔、文檔、工作進度有機的組合起來辜限，讓用戶和開發(fā)者團隊合作更加密切。

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

白盒測試严蓖、黑盒測試薄嫡、單元測試氧急、集成測試、測試驅動開發(fā)

在“擁有良好的代碼規(guī)范毫深、代碼質量吩坝、代碼注釋能力”一節(jié)的動圖中我們看到了編寫測試代碼并自動化執(zhí)行測試的一個應用場景。軟件測試一般分為白箱測試和黑箱測試哑蔫。通俗來講钉寝，黑箱測試測試應用程序的功能，而不是其內部結構或運作闸迷，適合集成測試以及系統(tǒng)測試等嵌纲；白箱測試測試應用程序的內部結構或運作，而不是應用程序的功能腥沽，可應用于單元測試逮走、集成測試中。單元測試的目的是檢驗基本組成單位（函數(shù)）的正確性今阳。

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

以前端開發(fā)中常接觸到的單元測試框架 Jasmine 為例师溅，為開發(fā)上述代碼中驗證手機號格式的函數(shù) checkLoginPhone(phone)，我們可以先編寫相應的單元測試代碼盾舌，每個 describe 用來測試一個函數(shù)墓臭，其中的多個 it 分別測試該函數(shù)在不同條件下的不同結果是否為期待的結果。如下妖谴。

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

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

軟件測試常由專業(yè)測試工程師完成窿锉，但我們在開發(fā)中小型軟件時完全可以自己勝任這份工作。愈發(fā)偏向業(yè)務邏輯的前端對測試的需求愈發(fā)凸顯窖维。這同時需要我們了解測試驅動開發(fā)榆综、敏捷開發(fā)、極限編程的知識點铸史。

1.11 熟練繪制概念圖鼻疮、思維導圖、流程圖琳轿、網(wǎng)絡拓撲圖等(選修)

我的另一篇博客 《概念圖圖解 Web Cookie》 中曾介紹過概念圖與思維導圖這兩大概念繪制工具判沟。概念圖的廣泛應用發(fā)揚了其發(fā)明者約瑟夫·D·諾瓦克(Novak)的那句總結——“有意義的學習涉及到新概念和命題納入現(xiàn)有的認知結構的同化”。以我在學習過程中繪制的“HTTP”概念圖為例崭篡，如下所示挪哄。

前端工程師常在視覺上有更高的敏銳度，也需要繪制較多的圖來輔助開發(fā)琉闪，在寫博客迹炼、寫文檔時熟練掌握概念圖、思維導圖、流程圖斯入、網(wǎng)絡拓撲圖砂碉、UML 圖等的繪制將是表達思想的一大利器。

1.12 掌握持續(xù)集成刻两、持續(xù)交付增蹭、持續(xù)部署相關編程能力(選修)

在“擁有良好的代碼規(guī)范、代碼質量磅摹、代碼注釋能力”一節(jié)我們介紹過通過持續(xù)集成可以保證良好的代碼規(guī)范程度滋迈。持續(xù)交付可以看作持續(xù)集成的下一步，指的是頻繁地將軟件的新版本户誓，交付給質量團隊或者用戶饼灿，以供評審；持續(xù)部署是持續(xù)交付的下一步厅克，指的是代碼通過評審以后赔退，自動部署到生產(chǎn)環(huán)境。如下圖所示证舟，最終通過 DevOps 將軟件工程硕旗、技術運營和質量保障（QA）三者做交集，使整個軟件項目在開發(fā)過程中的變更范圍更少女责，發(fā)布協(xié)調更強漆枚，自動化過程更穩(wěn)健。

同時相比服務端開發(fā)抵知，前端開發(fā)因需求的變更其改動量更大墙基，因此在前端開發(fā)的過程中使用“精益思想”完成對持續(xù)集成、持續(xù)交付刷喜、持續(xù)部署的實戰(zhàn)工作意義非凡残制。

2 前端設計能力

前端分為前端設計和前端開發(fā)。前者曾在 Web Pages 時代占據(jù)了前端的主流掖疮，那時 JavaScript 默認被瀏覽器禁用初茶，網(wǎng)頁間多依靠超鏈接形式相互鏈接。那時的前端工程師常常要求擁有一定的制圖浊闪、切圖能力恼布。縱然現(xiàn)在 JavaScript 在 Web 領域已從前端拓展到后端 Node.js搁宾，一個合格的大前端工程師還是應該多多注重拓展前端設計方面的知識點折汞，以備不時之需。

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

無論是懂前端的設計還是懂設計的前端在任何互聯(lián)網(wǎng)公司都是很受歡迎的爽待。良好的用戶界面及其交互氛圍能讓用戶產(chǎn)生舒適的體驗，在一些功能性較弱的軟件項目中，當因用戶界面及其氛圍不足導致用戶體驗的下降常會對軟件產(chǎn)生致命一擊的效果堕伪。交互設計要求我們能夠進行用戶調研揖庄、概念設計以及創(chuàng)建用戶模型栗菜、界面流程并能開發(fā)項目原型欠雌。

拓展閱讀：

1. 《簡約至上》
2. 《用戶體驗的要素》
3. 《人人都是產(chǎn)品經(jīng)理》

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

擁有了足夠的用戶界面設計與人際交互知識，我們可以選擇一個主流平面設計工具來強化我們的設計能力疙筹。常見的平面設計軟件有 PS富俄、CDR、AI而咆、InDesign 等霍比。

前端開發(fā)中的一些繪圖技術也常與平面設計工具設計出的圖片有共性。舉例來說：HTML 5 中的 Canvas 是像素級別的暴备，可以對應 PS 處理出的圖片悠瞬； SVG 又是矢量級的，無論如何放大也不會看到像素塊涯捻，可以對應 AI 處理出的圖片浅妆。熟練一個主流平面設計工具將是前端開發(fā)者和設計工程師之間重要的溝通橋梁。

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

主流原型設計工具常痴习可以分別制作 Web 端凌外、PC 端和 APP 端的原型，也有很多原型設計工具專為一個平臺打造涛浙。原型設計工具往往不像平面設計工具一樣面面俱到康辑，但能清晰的展現(xiàn)出各頁面內的主體組件和各頁面間的邏輯關系。

我們在開發(fā)中小型前端項目時往往不需要專業(yè)的原型設計師(常被產(chǎn)品經(jīng)理一職所包攬)轿亮，熟練使用至少一個主流原型設計工具能使我們在正式編寫前端代碼前快速開發(fā)出一個直觀的原型參考系疮薇。

下圖展現(xiàn)了我在最近一次編程競賽 - 中國軟件杯中快速開發(fā)出的原型預覽。我們團隊只有 3 個人我注，其他兩人分別負責 PHP 微信端和 Java 搜索引擎的應用開發(fā)按咒，快速迭代出一個產(chǎn)品原型很有助于前端人員拆分重復組件并快速開發(fā)，和服務端人員確定自己需要開發(fā)的接口仓手。

詳見 《“消失”的這倆個月里胖齐，我的前端項目如何從零開始》

3 前端開發(fā)能力

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

HTML 是標簽語言嗽冒，可以構建前端頁面的骨架呀伙；CSS 是層疊樣式控制表，可以構建前端頁面的外貌添坊；JavaScript 是前端編程語言剿另，可以規(guī)范前端頁面的事件行為。掌握 HTML、CSS雨女、JavaScript 是前端開發(fā)三大基石谚攒，缺一不可。

偏向 HTML 和 CSS 的開發(fā)氛堕，我們可以走出一條會設計的前端工程師的道路馏臭；偏向 CSS 和 JavaScript 的開發(fā)，我們可以走出一條會服務端編程的前端工程師的道路讼稚。當然括儒，CSS 之所以也可以算作偏向服務端編程的道路之一，在于我們可以使用 SASS锐想、LESS 等 CSS 預處理語言進行 CSS 的動態(tài)化開發(fā)帮寻。

拓展閱讀：

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

3.2 理解前端語言新標準 HTML5、CSS3赠摇、ES6 及其特性(必修)

熟練使用 HTML固逗、CSS、JavaScript 還需要我們理解其語言最新相關標準：HTML5藕帜、CSS3 和 ES6(ECMAScript6)烫罩。

• HTML 5 里新增了許多特性：語義化和新的音頻、視頻支持等耘戚；
• CSS 3 被劃分為模塊嗡髓，解決了 CSS2 為等待各個標準統(tǒng)一而耗費大量時間才能推進的不足之處，同時也提供了 2D收津、3D饿这、動畫效果等新特性；
• ECMAScript6 等于 JavaScript - DOM - BOM撞秋，是 JavaScript 在 2015 年的最新標準长捧，因為 ES6 對標準改動較大，前端開發(fā)者常常將一個前端項目是否支持 ES6 作為推進前端新技術的重要橋梁之一吻贿。ES6 將箭頭函數(shù)串结、let 變量聲明命令、Promise 編程舅列、模塊化編程等新特性納入其標準中肌割，得到了各大瀏覽器最新版本的支持。

在 ES5 標準中帐要，我們需要第三方符合 AMD 標準的庫如 RequireJS把敞、CommonJS 來支持 JS 模塊的導入，常見的可以用以下代碼來實現(xiàn)：

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

在 ES6 標準中榨惠，我們可直接使用原生的 import奋早、export 語句來實現(xiàn)模塊化編程盛霎，如下所示。這樣大大方便了使用 Node.js 等技術的前端項目的開發(fā)耽装。

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

拓展閱讀

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

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

借鑒其他編程領域如 Java GUI 的編程思想掉奄，前端組件化開發(fā)大大提高了開發(fā)效率并降低了維護成本规个。通過組件化開發(fā)，我們可以對前端頁面中重復的模塊進行“模塊化編程”挥萌，給每個模塊賦予一個“類”的概念绰姻。最終根據(jù)具體頁面組裝其對應的前端 UI 組件。每個組件間可以通過數(shù)據(jù)流來交換數(shù)據(jù)引瀑，這也大大方便了單頁面應用的開發(fā)，相得益彰榨馁。下圖左側是一個前端頁面的原型圖憨栽，與之相對的有右側的組件代碼。

Ajax (異步的 JavaScript 與XML技術) 的出現(xiàn)讓用戶不用再經(jīng)歷“提交表單等待服務器的漫長響應并通過刷新頁面來告訴自己哪里輸入錯誤”的煩躁經(jīng)歷翼虫，這樣做也節(jié)約了許多寬帶屑柔。為了更好的掌握異步編程，我們需要掌握 JavaScript 的“同步模式”和“異步模式”珍剑，并學會使用相應的回調函數(shù)來發(fā)布掸宛、訂閱、處理事件招拙。

拋開單頁面應用唧瘾，Web 頁面的性能鮮由 JavaScript 引起，常常是因過多的 DOM 操作引起别凤。虛擬 DOM 隨著前端主流框架的更迭孕育而生饰序。通過直接操作虛擬 DOM，間接操作真實 DOM规哪，可以優(yōu)化很多性能求豫。對虛擬 DOM 的深入了解是見證一步步加入抽象層的前端開發(fā)的關鍵。

拓展閱讀：

1. 《JavaScript 異步編程:設計快速響應的網(wǎng)絡應用》
2. 《JavaScript DOM 編程藝術》
3. 《DOM 啟蒙》

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

前端框架層出不窮蝠嘉，前端開發(fā)領域儼然成了熱衷于造輪子的一帶。我們可以通過如下幾步來掌握至少一門主流前端框架及其生態(tài)鏈杯巨。

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

React蚤告、Vue 適合單頁面應用，擁有很多先進的前端開發(fā)思想舔箭；BootStrap罩缴、Ant Design 偏向 UI 開發(fā)蚊逢，更多的提供 CSS 相關類庫。JQuery 經(jīng)久不衰箫章，極大的方便我們操作真實 DOM 及其 CSS 屬性烙荷；D3.js、EChart 等框架使我們可以快速進行前端數(shù)據(jù)可視化的編程檬寂；RequireJS 在不支持 ES6 標準的 JS 開發(fā)環(huán)境下給我們提供了一個良好的模塊化編程條件终抽。。數(shù)不勝數(shù)的前端框架都有各自的應用場景桶至，我們的前端項目可以選擇其中一至多個框架進行快速開發(fā)昼伴。

同時，合格的前端工程師不能只會用成型的框架镣屹，還應該擁有一定自制框架的能力圃郊。我們可以先通過閱讀成型前端框架的源碼來學習框架設計的思想，有朝一日我們便會根據(jù)自己的獨特需求造出獨一無二的框架輪子女蜈。

延伸閱讀：

1. 《JavaScript 開發(fā)框架權威指南》
2. 《深入 React 技術棾钟撸》
3. 《Vue.js 權威指南》
4. 《Angular 權威教程》

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

早期占據(jù)瀏覽器半壁江山的 IE 瀏覽器上存在的眾多瀏覽器兼容問題伪窖，耗費了當時前端開發(fā)者的大量開發(fā)時間逸寓。縱然現(xiàn)在的前端開發(fā)者已經(jīng)不需要考慮太多的瀏覽器兼容問題覆山，對其概念的了解有利于了解前端歷史包袱或在未來足以應對一些面向特殊群體(早期 IE 瀏覽器使用者)的前端項目竹伸。

響應式布局和單頁面應用是當代前端開發(fā)者的必備技能。從 Web Pages 到 Web App 時代簇宽，我們開發(fā)的前端項目有越來越多的可能需要同時在電腦端和手機端進行訪問勋篓，一個有良好響應式布局的前端項目可以一個代碼運行在多種不同分辨率的平臺之上。

延伸閱讀：

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

3.6 熟練 Node.js 環(huán)境晦毙、谷歌開發(fā)者工具使用方法(必修)

不同于 ReactJS生巡、AngularJS 等 JavaScript 框架，Node.js 從誕生之初就是 JavaScript 的運行環(huán)境见妒，基于 Chrome 的 V8 引擎打造孤荣，使用高效、輕量級的事件驅動须揣、非阻塞 I/O 模型盐股。

將如下的代碼運行在 NodeJS 上，便可通過純 JavaScript 代碼開啟服務器進程耻卡、連接非關系數(shù)據(jù)庫疯汁，很多服務端開發(fā)能做的事情，通過 Node.js 便能做到卵酪。并且在“技術基本功”里提到的持續(xù)集成幌蚊、持續(xù)交付谤碳、持續(xù)部署、敏捷開發(fā)等理念溢豆，通過 Node.js 社區(qū)都能找到相應的解決方案蜒简。

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');
});

通過谷歌開發(fā)者工具，我們可以快速定位頁面問題漩仙、斷點調試 JavaScript 代碼和進行前端頁面的 UI 效果預覽搓茬，最新的 Chrome 同時支持 ECMAScript6 的模塊化開發(fā)，一個微型 IDE 就藏在我們的瀏覽器工具欄里队他。

延伸閱讀：

1. 《深入淺出 Node.js》
2. 《Chrome 擴展及應用開發(fā)》

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

從門戶網(wǎng)站成群的 Web 1.0 到以用戶為中心的平臺/社交網(wǎng)站 Web 2.0麸折，再到能進行個性化智能化推薦的 Web 3.0锡凝，每次 Web 時代的更迭背后都是 Web 技術發(fā)展上的一大飛躍。有了對 Web 1.0 到 3.0 發(fā)展史的宏觀了解磕谅，對掌握單頁面應用私爷、移動 Web 開發(fā)和混合應用開發(fā)、離線 Web 等相關技術點將會有一個質的飛躍膊夹。

在單頁面 (SPA) 應用中，整個前端項目架構在一個網(wǎng)頁上捌浩，通過動態(tài)拉取服務端數(shù)據(jù)來提供一個和桌面應用程序相似的用戶體驗放刨。同時，在單頁面應用的開發(fā)中尸饺，我們需要著重注意組件进统、路由和跨域請求這幾個核心知識點熊赖。單頁面應用具體的優(yōu)缺點如下：

• 優(yōu)點 1. ：無刷新體驗
• 優(yōu)點 2. ：完全的前端組件化
• 優(yōu)點 3. ：API 共享
• 優(yōu)點 4. ：組件共享
• 缺點 1. ：首次加載大量資源
• 缺點 2. ：較高的前端開發(fā)門檻
• 缺點 3. ：不利于 SEO

熟悉了響應式布局的開發(fā)策州，我們就可以嘗試步入移動 Web 領域。顧名思義鲸拥，移動 Web 就是運行在移動端上迹栓，而移動端的設備配置不盡相同掉分，這常常需要我們去了解移動端的知識，如 pixel 像素基礎克伊、Viewport 視圖酥郭、和 Tap 觸摸事件等，移動 Web 常用的 meta 標簽如下愿吹，其作用聲明該頁面寬度為設備寬度不从，初始縮放比例為 1 倍，并禁止用戶縮放犁跪。

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

到了混合應用開發(fā)椿息，其常以 App 的形式出現(xiàn)在移動端上歹袁，相比原生移動端應用，混合 Web 應用可移植性強寝优、開發(fā)成本低条舔，還可以通過一定的接口來直接使用手機硬件能力。當然倡勇，由于混合應用對硬件的使用效率相比原生應用還有不足之處逞刷，再加上有些手機平臺不鼓勵使用過多的混合應用開發(fā)技術(可以搜索“蘋果 熱更新”)。前端開發(fā)者可以視具體業(yè)務來進行技術選型妻熊。

混合開發(fā)層次結構圖

3.8 熟練前端包管理夸浅、構建工具、SEO扔役、Web 性能優(yōu)化(選修)

當我們使用到的前端庫越來越多帆喇，需要一個前端包管理器來統(tǒng)一管理：Bower 便能做到這一點，通過給項目中引入 Bower 包管理器亿胸，我們僅僅需要修改配置文件就能進行高效化的前端庫管理坯钦。熟練使用成型的包管理器，我們也可以很方便的解決前端依賴等問題侈玄。

前端構建工具可以減少我們很多的編程“機械運動”婉刀。通過使用成型的前端構建工具，簡單的幾行命令就能編譯并轉換 JavaScript 的不同版本序仙、自動化壓縮代碼突颊、自動化執(zhí)行測試文件。

我曾在我的一次新項目中潘悼，架構了如下技術棧律秃，各種工具各有所長，當然在我的這個項目最后治唤，很多技術棧由于時間問題并沒有實踐棒动。

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

“掌握單頁面、移動 Web 宾添、混合應用開發(fā)相關技術點(選修)”一節(jié)說到單頁面應用的缺點是不利于 SEO船惨，那么 SEO 到底是什么？維基百科做出了如下解釋辞槐≈朗可見當我們正式運營一個上線的 Web 項目時，就需要 SEO 來提供“曝光度”榄檬。

搜索引擎優(yōu)化（英語：search engine optimization卜范，縮寫為SEO），是一種通過了解搜索引擎的運作規(guī)則來調整網(wǎng)站鹿榜，以及提高目的網(wǎng)站在有關搜索引擎內排名的方式海雪。

構建工具可以自動化壓縮代碼文件锦爵，就涉及到了 Web 性能優(yōu)化的一個環(huán)節(jié)。輔之以瀏覽器開發(fā)者工具的熟練使用奥裸，我們可以實地測試用戶加載首頁险掀、加載各個圖片時的等待時間，來通過優(yōu)化 Web 性能增進用戶體驗湾宙。

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

當頁面結構趨于一致性后侠鳄，數(shù)據(jù)的動態(tài)填充就是我們經(jīng)常需要處理的事情埠啃。掌握一個前端模板引擎能動態(tài)的生成我們所需的頁面，一個應用實例就是詳情頁和 Ajax 的組合伟恶。所謂靜態(tài)模板引擎碴开，指的是在 Web 應用中，不通過與服務端進行交互博秫，用來動態(tài)生成 HTML 的工具潦牛，常見的有 Jeklly、Hexo 等挡育，這些知識點會在搭建自己的靜態(tài)站點時接觸到巴碗。

常見的 CSS 預處理有 SASS、LESS即寒、Stylus 等良价，通過一門新的編程語言來動態(tài)化開發(fā)靜態(tài)的 CSS 代碼，并將 CSS 作為目標生成文件蒿叠；可以讓我們的 CSS 更加簡潔、適應性更強蚣常、可讀性更佳市咽，更易于代碼的維護等諸多好處。

由于 JavaScript 是一種弱類型（或稱動態(tài)類型）語言抵蚊，即 JS 程序在生成變量時不需要指定其數(shù)據(jù)類型施绎，相應的解決辦法就有使用例如 TypeScript 等強類型的、拓展于 JavaScript 的 JS 超集谷醉，最終將其編譯俱尼、轉化成合法的 JavaScript 代碼。這樣我們可以避免很多潛在的程序 BUG萎攒。

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

瀏覽器插件的開發(fā)/使用能力货矮、微信小程序的開發(fā)能力以及和前端數(shù)據(jù)可視化的實戰(zhàn)能力身為第三方平臺的代表斯够，在不同的學習方向下有不同的側重點读规，我們不可能全部都掌握掖桦。

但作為選修枪汪，我們可以了解到大部分瀏覽器插件其實就是用前端語言實現(xiàn)的雀久；微信小程序也可看做從在微信提供的前端框架下開發(fā)而來赖捌；前端數(shù)據(jù)可視化更多的使用一些主流可視化庫實現(xiàn)越庇，能夠快速入手未來的新項目卤唉。

4 計算機網(wǎng)絡

4.1 熟知常用計算機網(wǎng)絡協(xié)議(必修)

用戶在瀏覽器所能看到的前端界面其源碼常常放在 Web 服務器上桑驱，當我們需要將項目部署到線上并向用戶提供可訪問的服務時痊硕，就需要我們對 Web 開發(fā)的核心樞紐 —— 計算機網(wǎng)絡——有所了解岔绸。其中包含計算機網(wǎng)絡的形成與發(fā)展亭螟、定義與分類预烙、組成與結構扁掸。

• TCP/IP 協(xié)議即傳輸控制協(xié)議/因特網(wǎng)互聯(lián)協(xié)議谴分，是計算機網(wǎng)絡中使用最廣泛的體系結構之一牺蹄。TCP/IP 的四層結構從上到下分別為：應用層氓奈、傳輸層舀奶、網(wǎng)絡層育勺、鏈接層涧至。
• 應用層直接與用戶打交道化借，負責傳送各種最終形態(tài)的數(shù)據(jù)铐炫，常見的有 SMTP (簡單郵件傳輸協(xié)議)倒信、NNTP (網(wǎng)絡新聞傳輸協(xié)議)和 HTTP (超文本傳輸協(xié)議)。
• 傳輸層負責傳送文本數(shù)據(jù)优妙，主要協(xié)議是 TCP 協(xié)議 —— 一個面向連接的、保證可靠傳輸?shù)臄?shù)據(jù)流服務的協(xié)議邪意。
• 網(wǎng)絡層負責分配地址和傳送二進制數(shù)據(jù)雾鬼，主要協(xié)議是 IP 協(xié)議策菜，通過 IP 來找到網(wǎng)絡中的位移主機又憨。
• 連接層負責建立電路連接，是整個網(wǎng)絡的物理基礎浪秘，典型的協(xié)議包括以太網(wǎng)耸携、ASDL等夺衍。

這里再提一下 WebSocket，一種在單個 TCP 連接上進行全雙工通訊的協(xié)議矛紫。WebSocket 允許服務端主動向客戶端推送數(shù)據(jù)颊咬，在 WebSocket API 中喳篇，瀏覽器和服務器只需要完成一次握手挺尿，兩者之間就直接可以創(chuàng)建持久性的連接票髓，并進行雙向數(shù)據(jù)傳輸洽沟。WebSocket 避免了 Ajax 無意義的輪詢，在很多應用級 Web 項目中經(jīng)常有所涉及踪区。

延伸閱讀：

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

4.2 了解網(wǎng)絡體系結構缎岗、網(wǎng)絡拓撲模型(選修)

TCP/IP 協(xié)議的四層與 OSI 概念模型(開放式系統(tǒng)互聯(lián)通信參考模型)的七層有一定的對應關系，后者并沒有提供一個可以實現(xiàn)的方法眷细，而是描述了一些概念溪椎，用來協(xié)調進程間通信標準的制定，是概念性框架地熄。我們需要從宏觀角度來了解整個網(wǎng)絡體系結構。

計算機網(wǎng)絡的拓撲結構可分為星型網(wǎng)却特、網(wǎng)型網(wǎng)裂明、環(huán)型網(wǎng)、樹型網(wǎng)仙蛉、總線網(wǎng)和混合拓撲荠瘪，描述的是網(wǎng)絡中的各節(jié)點設備的連接情況。深入其中會更多的引出硬件篮绰、網(wǎng)絡工程等知識點吠各，這里作為選修了解即可。

5 服務端應用開發(fā)

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

在 Web 服務端架構的演進史中磕瓷，我們從單機到多機(集群)、從應用和數(shù)據(jù)分離到邏輯與接口分離硕盹，服務端漸漸只提供接口瘩例，供前端 Web 應用來訪問焰坪。即便如此某饰，了解傳統(tǒng)的服務端開發(fā)選型，并掌握現(xiàn)代化的服務端開發(fā)能力依然重要炬守。在前端面試中劳较，常常就會有類似的這么一句話“至少掌握一門服務端開發(fā)語言及其常用框架”。

語言只是工具墓捻，只要有處理網(wǎng)絡請求、訪問操作數(shù)據(jù)庫的能力梧兼，任何編程語言都可以部署在服務器上羽杰，常見的服務端編程語言及其主流框架如下。

• 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 語言實戰(zhàn)》

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

服務端應用開發(fā)的入門步驟的前兩步常常是選擇服務端語言及其框架、搭建相應的開發(fā)環(huán)境府瞄。傳統(tǒng)的 LAMP (Linux + Apache + MySQL + PHP) 架構和 全棧 MEAN (MongoDB + Express.js + Angular.js + Node.js ) 架構的 Web 流程圖分別如下所示。盡管每種語言的側重點不同货邓，但其均對基礎的 Web 服務端環(huán)境提供支持，根據(jù)自己的發(fā)展方向或項目所需來進行技術選型复隆。

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

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

Web 服務端的部署其實就是將本地環(huán)境搭建在遠程服務器上骨饿。首先我們需要一臺遠程服務器，可以在亞馬遜云、新浪云峻汉、騰訊云等云平臺進行云主機租賃。其次瘤礁，我們的部署多為純命令行形式，需要我們對 Linux 文件系統(tǒng)赡盘、服務端配置等均有所熟知。部署服務端環(huán)境至線上情況不同于直接部署到本地霉咨，需要考慮更多其他需求，也是必不可少的服務端能力之一喷斋。

延伸閱讀：

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

5.3 擁有撰寫規(guī)范的數(shù)據(jù)字典、接口文檔能力(必修)

服務端開發(fā)人員的一條成長之路便是成為架構師，在有足夠的能力進行架構設計前抄肖，先要了解 Rustful API裙士，并會寫規(guī)范的數(shù)據(jù)字典和接口文檔腿椎。

• 一個典型的數(shù)據(jù)字典如下。

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

• 一個典型的接口如下咖驮。

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

延伸閱讀：

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

5.4 掌握 Linux 網(wǎng)絡編程、多線程應用開發(fā)如绸、爬蟲能力(必修)

除了腳本語言，服務端開發(fā)對于 C 語言或 C++ 語言的掌握也十分重要。在 Linux 網(wǎng)絡編程上谎势，首先需要了解網(wǎng)絡協(xié)議猖毫，再仿照示例來嘗試使用 C/C++ 進行網(wǎng)絡 Socket 編程，能將抽象的網(wǎng)絡知識生動化须喂、形象化吁断。

項目對搜索引擎的優(yōu)化便是為了方便搜索引擎的爬蟲來有效識別該網(wǎng)站信息，同時由于很多互聯(lián)網(wǎng)數(shù)據(jù)沒有開放的接口供我們使用坞生，我們也需要通過爬蟲技術來定制化我們對網(wǎng)絡信息篩選后的服務仔役，爬蟲也需要我們掌握是己。

延伸閱讀：

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

5.5 了解網(wǎng)絡安全又兵、反向代理、HTTP 緩存優(yōu)化(選修)

此處劃水卒废，拋磚引玉沛厨。

5.6 了解網(wǎng)站監(jiān)測、運維摔认、集群逆皮、負載均衡(選修)

為了及時跟蹤服務器運行狀態(tài)，我們可以選擇性的掌握網(wǎng)站監(jiān)測的一些手段——或使用命令行或使用相關服務平臺参袱。同時通過一定的運維能力电谣，我們能及時將不正常的服務器運行狀態(tài)拉入正規(guī)之中——DevOps 是運維開發(fā)的一種大趨勢。

當系統(tǒng)面臨大量用戶訪問抹蚀，負載過高的時候剿牺，通常會使用增加服務器數(shù)量來進行橫向擴展，使用集群和負載均衡提高整個系統(tǒng)的處理能力环壤。初學者的項目一般并不是很大牢贸，我們將集群和負載均衡列入選修。

6 數(shù)據(jù)庫與搜索引擎應用開發(fā)

6.1 熟知數(shù)據(jù)庫分類镐捧、數(shù)據(jù)庫范式等數(shù)據(jù)庫基本概念(必修)

本文將服務端應用開發(fā)與數(shù)據(jù)庫/搜索引擎應用開發(fā)分離開潜索，也是考慮到單機負載問題。通常意義上初學者所學的服務端開發(fā)環(huán)境都是搭建在一臺機子上懂酱，也不太會出現(xiàn)負載過高的情況≈裣埃現(xiàn)在將數(shù)據(jù)庫與應用分開，我們只是在應用的配置中把數(shù)據(jù)庫的地址從本機改到了另外一臺機器上而已列牺，對開發(fā)整陌、測試、部署都沒有什么影響，卻能夠緩解當前的系統(tǒng)壓力泌辫，不過隨著時間的推移随夸，訪問量繼續(xù)增大，該類系統(tǒng)還是需要繼續(xù)演進的震放。

在數(shù)據(jù)庫的學習過程中宾毒，我們需要了解實體－聯(lián)系模型、關系型數(shù)據(jù)庫(如 MySQL)殿遂、非關系型數(shù)據(jù)庫(如 MongDB)诈铛、關系模型、視圖墨礁、觸發(fā)器幢竹、數(shù)據(jù)庫范式等知識點，從而便于我們真正理解 Web 應用到底是如何訪問數(shù)據(jù)庫中的數(shù)據(jù)并展現(xiàn)到前臺界面中的恩静。下圖是關系型數(shù)據(jù)庫的三層模式焕毫，兩級映像，對數(shù)據(jù)的起到很好的獨立性作用驶乾。

延伸閱讀：

1. 《數(shù)據(jù)庫系統(tǒng)概念》
2. 《大型網(wǎng)站系統(tǒng)與 Java 中間件實踐》

6.2 擁有良好的數(shù)據(jù)庫設計咬荷、操作和管理能力(必修)

說句題外話，前端培訓班今年來培養(yǎng)出大量的俗稱學員轻掩，常常就因為所學淺嘗輒止到數(shù)據(jù)的 CRUD (增刪改查) 上而飽受詬病。引以為鑒懦底，我們在學習數(shù)據(jù)庫設計及其相關操作之時唇牧，可以通過使用成型的數(shù)據(jù)庫設計工具和拜讀較權威的書籍來拓展知識面。下圖展示了使用數(shù)據(jù)庫設計工具時的界面聚唐，我們可以一鍵導出成可執(zhí)行的語句或直接導出成圖片丐重。

數(shù)據(jù)庫的管理就需要我們掌握數(shù)據(jù)庫管理系統(tǒng)的使用。數(shù)據(jù)庫只是數(shù)據(jù)的集合杆查，數(shù)據(jù)庫管理系統(tǒng)給我們提供了數(shù)據(jù)定義功能扮惦、數(shù)據(jù)操縱功能、數(shù)據(jù)庫的運行管理和數(shù)據(jù)庫的建立與維護等功能亲桦，提高了整個數(shù)據(jù)庫系統(tǒng)的安全性與數(shù)據(jù)獨立性崖蜜、數(shù)據(jù)完整性。

延伸閱讀：

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

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

數(shù)據(jù)庫與搜索引擎都服務于數(shù)據(jù)客峭，前者核心是數(shù)據(jù)存儲和事務能力豫领，后者關注信息采集和關聯(lián)的能力，各有千秋舔琅。依然以我這段時間所做的小項目為例等恐，我們三人團隊是這樣分工的：Web 前端一人、PHP 微信開發(fā)一人、Java 搜索引擎一人课蔬；同時搜索引擎的接口供 PHP 微信端使用囱稽，PHP 微信端接口供 Web 前端使用。

使用成型的開源搜索引擎還有相應的數(shù)據(jù)展示和操作功能二跋，需要我們多加練習战惊。

6.4 了解分布式數(shù)據(jù)庫、大數(shù)據(jù)同欠、機器學習(選修)

當我們的應用日趨龐大样傍，分布式、大數(shù)據(jù)就孕育而生铺遂。而有了龐大的數(shù)據(jù)量衫哥，基于這些數(shù)據(jù)的機器學習領域也變得活躍起來。引用維基百科襟锐。

• 分布式數(shù)據(jù)庫是用計算機網(wǎng)絡將物理上分散的多個數(shù)據(jù)庫單元連接起來組成的一個邏輯上統(tǒng)一的數(shù)據(jù)庫撤逢。每個被連接起來的數(shù)據(jù)庫單元稱為站點或節(jié)點。分布式數(shù)據(jù)庫有一個統(tǒng)一的數(shù)據(jù)庫管理系統(tǒng)來進行管理粮坞，稱為分布式數(shù)據(jù)庫管理系統(tǒng)”
• 大數(shù)據(jù)在總數(shù)據(jù)量相同的情況下蚊荣，與個別分析獨立的小型數(shù)據(jù)集（Data set）相比，將各個小型數(shù)據(jù)集合并后進行分析可得出許多額外的信息和數(shù)據(jù)關系性莫杈，可用來察覺商業(yè)趨勢互例、判定研究質量、避免疾病擴散筝闹、打擊犯罪或測定即時交通路況等媳叨；這樣的用途正是大型數(shù)據(jù)集盛行的原因。
• 機器學習算法是一類從數(shù)據(jù)中自動分析獲得規(guī)律关顷，并利用規(guī)律對未知數(shù)據(jù)進行預測的算法糊秆。因為學習算法中涉及了大量的統(tǒng)計學理論，機器學習與推斷統(tǒng)計學聯(lián)系尤為密切议双，也被稱為統(tǒng)計學習理論痘番。算法設計方面，機器學習理論關注可以實現(xiàn)的平痰，行之有效的學習算法汞舱。

可見到了這一步，已經(jīng)離 Web 開發(fā)有些許距離宗雇，但同為計算機科學領域兵拢，眾多看似不相關的技術之間常常有意想不到的聯(lián)動效果。

7 編程軟技能

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

刻意練習≠傳統(tǒng)的學習方法说铃，需要我們帶上學“一萬小時”的心態(tài)來刻意的強化我們的能力访惜。沒有人天生會編程，很多互聯(lián)網(wǎng)上厲害的技術人員要么從小開始接觸到編程要么接觸之后大部分時間都在編程腻扇。只要我們利用好時間债热，刻意練習編程能力、刻意練習打字速度都能在一定的階段后有較大的長進幼苛。希望這不是簡單的方法論窒篱，結合我們自己的性格特點來強化學習即可。

持續(xù)改進要求我們在刻意練習的基礎上能隨時看到自己的成長舶沿∏奖可以通過寫總結、完成計劃任務來講自己在編程領域的成長可視化括荡；也可以通過和他人相約督促高镐、結對面層、代碼重審等環(huán)節(jié)實現(xiàn)畸冲。

延伸閱讀：

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

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

縱然我們不應該提倡加班文化嫉髓，客觀存在的加班現(xiàn)象讓我們時常得回歸到開發(fā)狀態(tài)。我們可以通過培養(yǎng)良好的健身習慣邑闲、良好的飲食習慣算行、良好的作息習慣使自己的精神能隨時集中起來。高薪也是有代價的苫耸。

延伸閱讀：

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

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

基于互聯(lián)網(wǎng)的技術常常需要通過互聯(lián)網(wǎng)來追蹤最新改動褪子。在線技術文檔的閱讀能力量淌、各種技術框架書籍的閱讀能力的提高都是我們快速學習到新知識的重要一步。英文閱讀能力褐筛，也必不可少。就像叙身，中文程序開發(fā)者中厲害的那些人渔扎，往往都翻譯過英文技術書籍。

寫作是一種凝聚信轿、再創(chuàng)作晃痴、分享的動態(tài)過程。在本文的寫作過程中整理了自己大學兩年對 Web 開發(fā)的廣度認知财忽，也通過 GitChat 知識付費分享給每一個感興趣的人倘核，使文章能取之社區(qū)還之社區(qū)，雙向成長即彪。

7.4 擁有一定的人際交往能力紧唱、演講能力活尊、影響力(選修)

影響力锌钮？就是即使在資本的寒冬中饲常，也能把自己“賣”個好價錢~。

8 總結

本文通過對軟件工程專業(yè)所學知識點的總結與思考熔脂，從 Web 開發(fā)的技術基本功绰疤、前端铜犬、后端、計算機網(wǎng)絡和編程軟技能五個方面轻庆，解析出了整個大前端技術棧癣猾。依然如文章開頭所說，這篇文章不會具有太多的官方性質余爆，但希望能達到拋磚引玉的效果纷宇，讓我們在學習 Web 前端開發(fā)的道路上不再迷茫。引用移動端開源框架 Phonegap 的一句話：

我們相信 Web龙屉，是因為相信它是解決設備差異化的終極方案呐粘；我們相信，當 Web 在今天做不到一件事的時候转捕，是因為它還沒來得及去實現(xiàn)作岖，而不是因為它做不到。而 Phonegap五芝，它的終極目的就是消失在 Web 標準的背后痘儡。

社會的進步往往伴隨著技術的革新，我們在前端行業(yè)的每一個腳步枢步，都會成為下一代 Web 應用模型的墊腳石沉删，就讓我們一起用最大的熱情投身前端行業(yè)中吧。

那么以貫穿本文的如下導圖來結尾醉途，期待我們的再次相遇~矾瑰。

• Hello，我是韓亦樂隘擎，現(xiàn)任本科軟工男一枚殴穴。軟件工程專業(yè)的一路學習中，我有很多感悟货葬，也享受持續(xù)分享的過程采幌。如果想了解更多或能及時收到我的最新文章，歡迎訂閱我的個人微信號：韓亦樂震桶。我的簡書個人主頁中休傍，有我的訂閱號二維碼和 Github 主頁地址；我的知乎主頁 中也會堅持產(chǎn)出蹲姐，歡迎關注磨取。
• 本文內部編號經(jīng)由我的 Github 相關倉庫統(tǒng)一管理人柿；本文可能發(fā)布在多個平臺但僅在上述倉庫中長期維護；本文同時采用【知識共享署名-非商業(yè)性使用-禁止演繹 4.0 國際許可協(xié)議】進行許可寝衫。