前言

如果你正在進(jìn)行前端項(xiàng)目的技術(shù)選型，可能就會(huì)發(fā)現(xiàn)灿椅，你已經(jīng)跟不上前端生態(tài)的變化了，甚至令你眼花繚亂，因?yàn)楝F(xiàn)在有太多的技術(shù)棧供你選擇：React茫蛹、Flux操刀、Angular、Aurelia婴洼、Mocha骨坑、Jasmine、Babel窃蹋、TypeScript卡啰、Flow、Vue...這些技術(shù)棧的出現(xiàn)試圖前端開(kāi)發(fā)變得簡(jiǎn)單化警没、模塊化匈辱、工程化，但有一部分卻增加了學(xué)習(xí)成本和項(xiàng)目維護(hù)的不穩(wěn)定性杀迹，因?yàn)榧夹g(shù)棧的變化速度太快了亡脸。

由于 JavaScript 的語(yǔ)法很簡(jiǎn)單，前端入門比較簡(jiǎn)單树酪，基本上少則數(shù)周就可以開(kāi)發(fā)項(xiàng)目了浅碾，但要學(xué)習(xí)提升成為一名優(yōu)秀的前端的工程師又極其不易，因?yàn)樯婕暗募夹g(shù)點(diǎn)很多续语，如：grunt / gulp, npm, requre.js / seajs 等輔助性技術(shù)垂谢；學(xué)習(xí) prototype / _proto_等較晦澀的語(yǔ)法知識(shí)；掌握 MVC / MVP / MVVM 等設(shè)計(jì)模式疮茄；Backbone.js / Vue.js / React / AngularJS 等框架滥朱；jQuery / Protorype / lodash等庫(kù)。

所以力试，我們往往需要閱讀很多書(shū)籍才能理解前端技術(shù)的知識(shí)體系徙邻。本文將在前端知識(shí)體系上進(jìn)行總結(jié)和梳理，涵蓋了前端技術(shù)絕大部分的知識(shí)內(nèi)容畸裳，會(huì)講解前端技術(shù)的幾條重要的演進(jìn)路線缰犁，希望起到一個(gè)啟蒙作用，能幫助讀者快速把握前端技術(shù)的整個(gè)脈絡(luò)怖糊，培養(yǎng)更完善的體系化思維帅容。

疑惑

一些初學(xué)者大多都有這樣的想法：我現(xiàn)在可以用 JavaScript 編寫程序了，并且也正常上線了伍伤，而且運(yùn)行的也不錯(cuò)丰嘉，為什么我要再花額外的時(shí)間學(xué)習(xí)這些技術(shù)棧呢？

上述這些技術(shù)棧是為了彌補(bǔ) JavaScript 在開(kāi)發(fā)大型項(xiàng)目時(shí)的短板嚷缭。

JavaScript 作為前端開(kāi)發(fā)領(lǐng)域中最重要的語(yǔ)言，難道無(wú)法勝任現(xiàn)在的大型項(xiàng)目開(kāi)發(fā)嗎？如果要尋求這個(gè)答案阅爽，需要我們重新認(rèn)識(shí) JavaScript 的前世今生路幸。

前世

JavaScript 在創(chuàng)造初期用來(lái)（ 腳本形式 ）彌補(bǔ)網(wǎng)頁(yè)開(kāi)發(fā)的不足。在那個(gè)時(shí)代付翁，JavaScript 作為諸如： ASP / JSP 等開(kāi)發(fā)語(yǔ)言的輔助功能存在简肴，經(jīng)常使用的場(chǎng)景（ 之一 ） 就是 『表單驗(yàn)證』。雖然 JavaScript 的締造者 Brendan Eich 大神早已 『洞悉』了未來(lái)百侧，但也無(wú)法阻擋 JavaScript 只花 10天 創(chuàng)造出來(lái)的事實(shí)砰识。（ 第一版 ）那個(gè)時(shí)代，還沒(méi)有一個(gè)專門從事 JavaScript 開(kāi)發(fā)的職位佣渴，前端開(kāi)發(fā)先驅(qū)們將更多的精力放在了 『瀏覽器大戰(zhàn)』 之后的兼容性問(wèn)題上辫狼。

發(fā)展

瀏覽器大戰(zhàn)之后的另外一個(gè)影響，就是推動(dòng)了 JavaScript 成為國(guó)際化標(biāo)準(zhǔn)辛润，即：ECMAScript（歐洲標(biāo)準(zhǔn)化組織ECMA（European Computer Manufacturers Association））膨处，后者用來(lái)描述 JavaScript 的語(yǔ)法結(jié)構(gòu)，并推動(dòng)它的發(fā)展砂竖，前者只是后者的實(shí)現(xiàn)方案真椿。

備注：另外一個(gè) ECMAScript 實(shí)現(xiàn)方案是 ActionScript 3.0

今生

隨著 Chrome 這種現(xiàn)代瀏覽器的出現(xiàn)，其背后的 JavaScript 解析器（V8）大大增強(qiáng)了 JavaScript 的執(zhí)行速度/效率乎澄。（在 V8 的基礎(chǔ)上突硝，另外一位大神 Ryan Dahl 發(fā)明了 Node.js，將本來(lái)僅僅運(yùn)行在瀏覽器端的語(yǔ)言置济，發(fā)展到了后端開(kāi)發(fā)解恰。）jQuery 的誕生，使前端開(kāi)發(fā)先驅(qū)們抽離出『瀏覽器兼容性問(wèn)題的泥沼』舟肉，有更多的精力來(lái)思考 JavaScript 的未來(lái)修噪。網(wǎng)絡(luò)帶寬的增大以及 Ajax 技術(shù)的出現(xiàn)，使網(wǎng)頁(yè)具有異步更新的方式路媚，大大的加快了由傳統(tǒng) B/S 架構(gòu)向 C/S 架構(gòu)的探索黄琼，Google Gmail 的成功進(jìn)一步推動(dòng)此項(xiàng)技術(shù)成為大型項(xiàng)目的可能性。最終出現(xiàn)了SPA（ Single Page Application：?jiǎn)雾?yè)面應(yīng)用程序 ）整慎，至此使用 JavaScript 開(kāi)發(fā)大型項(xiàng)目成為一種趨勢(shì)和標(biāo)準(zhǔn)脏款。

短板

由于 ECMAScript 推動(dòng)著 JavaScript 的發(fā)展，即便 JavaScript 是上世紀(jì)的產(chǎn)物裤园，但使用它開(kāi)發(fā)一個(gè)小型的前端項(xiàng)目撤师，其實(shí)并不困難。但是拧揽，一個(gè)大型的 SPA 項(xiàng)目往往具有N個(gè)外部引用類庫(kù)剃盾，數(shù)十個(gè)（甚至更多）js/html/css/圖片 等資源組成腺占；多人參與長(zhǎng)時(shí)間維護(hù)，成千上萬(wàn)行的代碼的特點(diǎn)痒谴。顯然衰伯，這些都是 JavaScript 在最初時(shí)所沒(méi)有考慮過(guò)的情況。

正如前文描述积蔚，技術(shù)棧彌補(bǔ)了JavaScript 在開(kāi)發(fā)大型項(xiàng)目上的短板意鲸，所以為了更加清晰的分析技術(shù)棧的特點(diǎn)，先從問(wèn)題入手尽爆，一個(gè)大型的 JavaScript 項(xiàng)目通常需要解決哪些問(wèn)題怎顾？

1. JavaScript先天不具有包管理功能
   這并沒(méi)有阻礙我們偉大的前端開(kāi)發(fā)先驅(qū)們的探索，npm漱贱，bower 這類技術(shù)棧為我們解決了包管理問(wèn)題槐雾。

2. 過(guò)多的代碼導(dǎo)致的項(xiàng)目更新，迭代饱亿，重構(gòu)難題
   既然代碼過(guò)多蚜退，就需要使用諸如：封裝，繼承等現(xiàn)代化編程語(yǔ)言的面向?qū)ο缶幊谭绞奖肓ｋm然 JavaScript 締造初期并不是解決這些問(wèn)題的钻注，但 Brendan Eich 大神顯然預(yù)見(jiàn)了未來(lái)，即在初版的 JavaScript 語(yǔ)言中配猫，就包含了 OO 思想幅恋。換言之，JavaScript 是基于對(duì)象的開(kāi)發(fā)語(yǔ)言泵肄。
   雖然都是面向?qū)ο罄唬?JavaScript 與傳統(tǒng)的面向?qū)ο蟛惶粯樱褂昧?strong>更高級(jí)但晦澀的繼承鏈方式腐巢，這就是我們需要理解 prototype / _proto_ 這些技術(shù)棧的原因品追。

3. 多人參與，開(kāi)發(fā)的職責(zé)區(qū)分困難
   由于大型 SPA 項(xiàng)目的出現(xiàn)冯丙，頁(yè)面不僅承載了用戶行為肉瓦，更多的是將后端主導(dǎo)的邏輯開(kāi)發(fā)也帶到了前端。原本 MVC 中的 『M』比任何以往都要『重』胃惜，以至于在 『M』層泞莉，又形成了新的框架理論。因此了解并掌握 MVC / MVP / MVVM 等設(shè)計(jì)模式就變成了必要手段船殉，進(jìn)而前端框架開(kāi)始流行鲫趁。與其它語(yǔ)言一樣，選用現(xiàn)成的前端框架自然變成了趨勢(shì)利虫，這些現(xiàn)代化框架的『設(shè)計(jì)思想』包含了前端開(kāi)發(fā)新穎的理念挨厚， 如：操作虛擬 DOM（ Virtual DOM ）的 React堡僻；單純的踐行 MVC 理論的 Backbone.js；MVVM 風(fēng)格的 AngularJS疫剃；等苦始。學(xué)習(xí)并掌握前端框架可以更好的區(qū)分職責(zé)，而框架統(tǒng)一的 API 實(shí)現(xiàn)了長(zhǎng)時(shí)間多人開(kāi)發(fā)/維護(hù)的可能性慌申。

4. 雖然網(wǎng)絡(luò)帶寬得到了很大的提高，但頁(yè)面的加載速度仍是問(wèn)題
   由于SPA 是單頁(yè)面應(yīng)用理郑，因此頁(yè)面在加載的時(shí)候幾乎包含了全部功能蹄溉，但用戶往往卻只使用其中的一部分，所以網(wǎng)速的限制您炉，帶寬的浪費(fèi)柒爵，用戶的等待則是另一個(gè)難題。『模塊化開(kāi)發(fā)』 是解決這類難題的銀彈赚爵，而 AMD / CMD 的理論自然成為前端開(kāi)發(fā)者們掌握的必要知識(shí)棉胀，而 requre.js / seajs 則是這些理論的具體實(shí)現(xiàn)方式。由于 Http 的特性所致 ( 分散的冀膝，小的靜態(tài)資源在加載的時(shí)候更慢 )唁奢，因此 合并/壓縮 則是另外一個(gè)解決方案，因此也產(chǎn)生了一個(gè)新的問(wèn)題窝剖，即第五個(gè)問(wèn)題麻掸。

5. 靜態(tài)資源（ html/js/css/圖片等資源 ）過(guò)多導(dǎo)致上線時(shí)的重復(fù)性工作量增大
   當(dāng)這類靜態(tài)資源很少的時(shí)候，手動(dòng) 合并/壓縮 并沒(méi)有問(wèn)題赐纱，反之這些資源呈指數(shù)上升的時(shí)候脊奋，手動(dòng)方案顯示不是一個(gè)好辦法。自動(dòng)化方案 的引入勢(shì)在必行疙描，而其中踐行者：grunt / gulp / webpack 就需要掌握了诚隙。

不掌握這些技術(shù)也可以實(shí)現(xiàn) JavaScript 開(kāi)發(fā)，但掌握了這些技術(shù)椘鹨龋可以使我們從 『繁重 / 繁瑣』的事務(wù)中抽離出來(lái)久又，更加 『專注于業(yè)務(wù)邏輯』。所以待错，恭喜你籽孙，歡迎來(lái)到新世界！；鸲怼犯建！

歡迎來(lái)到新世界！９峡汀适瓦！

上述列舉的知識(shí)點(diǎn)僅僅屬于前端技術(shù)棧的一部分竿开，除此以外還包括了：調(diào)試/測(cè)試，性能優(yōu)化玻熙，CSS預(yù)編譯方式否彩，編碼規(guī)則，SEO嗦随，移動(dòng) Web 開(kāi)發(fā)等列荔。

掌握這些技術(shù)后就萬(wàn)事無(wú)憂了嗎？當(dāng)然不枚尼，隨著前端開(kāi)發(fā)的發(fā)展贴浙，總有一天，這些技術(shù)仍無(wú)法滿足開(kāi)發(fā)署恍。所以要了解這些技術(shù)棧背后的理論邏輯崎溃，以不變應(yīng)萬(wàn)變，方為制勝之道盯质！

技術(shù)全景

轉(zhuǎn)自《現(xiàn)代前端技術(shù)解析》一書(shū)

基礎(chǔ)技術(shù)

基礎(chǔ)技術(shù)

技術(shù)演進(jìn)

對(duì)于前端技術(shù)的演進(jìn)過(guò)程袁串，主要都是為了解決前端在大型項(xiàng)目開(kāi)發(fā)過(guò)程中遇到的問(wèn)題，比如：包管理呼巷、模塊開(kāi)發(fā)囱修、多人協(xié)作、資源管理朵逝、打包構(gòu)建蔚袍、頁(yè)面加載等方面的問(wèn)題，其演進(jìn)過(guò)程主要分為5條主線：JS編程語(yǔ)言配名、CSS編程語(yǔ)言啤咽、JavaScript模塊化、前端分層模式渠脉、前端自動(dòng)構(gòu)建宇整。

參考資料

1. 現(xiàn)代前端技術(shù)解析目錄
2. 現(xiàn)代前端開(kāi)發(fā)技術(shù)棧
3. 統(tǒng)一回復(fù)《怎么學(xué)JavaScript？》