每當 JavaScript 發布重大(dà)更新，我們都會重複相同的(de)經曆。最開始的(de)時(shí)候，開發人(rén)員會因爲(wéi / wèi)新功能的(de)發布而(ér)感到(dào)高興。他(tā)們會直接使用 JavaScript 編寫代碼，框架的(de)流行度會下降。接着，在(zài)較長一(yī / yì ／yí)段時(shí)間内都沒有新的(de)發布時(shí)，框架就(jiù)會提供各種新功能，從而(ér)吸引開發人(rén)員。然後，再次重複這(zhè)個(gè)過程。

此次的(de) ES6 據說(shuō)是(shì) JavaScript 最大(dà)的(de)一(yī / yì ／yí)次變化，所以(yǐ)我們又開始了(le／liǎo)新一(yī / yì ／yí)輪的(de)循環。當 ES6 剛發布的(de)時(shí)候，框架的(de)流行度下降了(le／liǎo)，而(ér)JavaScript 則變得更強大(dà)。但是(shì)，我想提出(chū)一(yī / yì ／yí)個(gè)更大(dà)膽的(de)預測：随着開發人(rén)員越來(lái)越熟悉 ES6 的(de)功能，最終我們将打破這(zhè)個(gè)循環。将來(lái) JavaScript 開發人(rén)員不(bù)會再使用任何框架。

我知道(dào)很多人(rén)對此表示懷疑，但請聽我說(shuō)完。我并不(bù)是(shì)說(shuō) JavaScript 的(de)使用會變窄，事實上(shàng)，如今很多公司都在(zài)招聘 JavaScript開發人(rén)員。相反，我認爲(wéi / wèi) ES6 的(de)兩個(gè)關鍵特性（特别是(shì)模塊和(hé / huò)類）會淘汰掉許多流行的(de)框架。換句話說(shuō)，JavaScript 框架都會逐漸消亡，就(jiù)像當年的(de) Flash 一(yī / yì ／yí)樣：主要(yào / yāo)原因還是(shì)因爲(wéi / wèi)沒有需求了(le／liǎo)，而(ér)且其固有的(de)安全漏洞導緻使用非常危險。
請先不(bù)要(yào / yāo)着急爲(wéi / wèi)你喜歡的(de)框架辯駁，讓我來(lái)解釋一(yī / yì ／yí)下爲(wéi / wèi)什麽我認爲(wéi / wèi)會發生這(zhè)種轉變。

JavaScript框架的(de)問題

JavaScript框架是(shì)面向開發人(rén)員的(de)一(yī / yì ／yí)種工具，抽象出(chū)了(le／liǎo)前端應用程序開發的(de)一(yī / yì ／yí)些複雜性。雖然毫無疑問這(zhè)些框架非常實用，但 JavaScript 的(de) Web 組件規範的(de)進步使得即使不(bù)使用框架也(yě)可以(yǐ)輕松地(dì / de)開發新的(de)前端應用程序（例如單頁應用程序）。那麽，問題就(jiù)來(lái)了(le／liǎo)，使用這(zhè)些框架還有必要(yào / yāo)嗎？

讓我們來(lái)看看當今最流行的(de) JavaScript 框架，反思一(yī / yì ／yí)下它們的(de)不(bù)足之(zhī)處。其實，這(zhè)種例子(zǐ)比比皆是(shì)，因爲(wéi / wèi)如今的(de)大(dà)多數框架都存在(zài)許多根本性的(de)缺陷。

大(dà)多數使用 JavaScript 框架的(de)人(rén)（我也(yě)是(shì)其中一(yī / yì ／yí)位）可能并沒有注意到(dào)這(zhè)些缺陷，因爲(wéi / wèi)我們已經習慣了(le／liǎo)。這(zhè)就(jiù)像是(shì)與魔鬼的(de)交易：抽象爲(wéi / wèi)我們帶來(lái)了(le／liǎo)開發的(de)便利性，但沒有重視它們帶來(lái)的(de)混亂。然而(ér)，事實在(zài)于(yú)我們使用的(de)大(dà)多數框架都非常臃腫，它們管理着 JavaScript 本身并不(bù)支持的(de)複雜流程，而(ér)且提供的(de)捷徑隻會讓調試變得更困難。

除了(le／liǎo)這(zhè)些之(zhī)外，還有一(yī / yì ／yí)個(gè)更重要(yào / yāo)的(de)問題：關于(yú) JavaScript 框架的(de)構成，我們并沒有一(yī / yì ／yí)個(gè)良好的(de)定義。這(zhè)就(jiù)導緻我們陷入了(le／liǎo)一(yī / yì ／yí)種有點荒謬的(de)境地(dì / de)，比如最流行的(de) JavaScript “框架”之(zhī)一(yī / yì ／yí)React 實際上(shàng)根本不(bù)是(shì)真正的(de)框架。它隻不(bù)過是(shì)開發人(rén)員構建的(de)一(yī / yì ／yí)個(gè)高度專業化的(de) JavaScript 庫。

當前所有流行的(de)框架都存在(zài)這(zhè)些問題。但也(yě)有許多具體的(de)問題隻影響了(le／liǎo)個(gè)别框架。下面，我們就(jiù)來(lái)快速地(dì / de)浏覽一(yī / yì ／yí)下。

AngularJS與 Angular

說(shuō)起 JavaScript 框架中存在(zài)的(de)問題，就(jiù)不(bù)得不(bù)提 AngularJS，雖然這(zhè)個(gè)框架會過時(shí)，但人(rén)們不(bù)一(yī / yì ／yí)定會停止使用。許多開發人(rén)員仍然會告訴你 AngularJS 是(shì)編寫 JavaScript 代碼的(de)“最佳”方式，盡管該框架已被棄用，而(ér)且不(bù)花幾年的(de)時(shí)間認真研究就(jiù)很難掌握。

第二個(gè)問題是(shì)，AngularJS 的(de)代碼幾乎無法理解，而(ér)且 Angular 2 也(yě)繼承了(le／liǎo)這(zhè)個(gè)問題。雖然有些人(rén)認爲(wéi / wèi)這(zhè)是(shì)後端開發人(rén)員收入更高的(de)原因，但實際上(shàng)會導緻開發人(rén)員的(de)負擔加重。舉個(gè)例子(zǐ)，Angular 2 包含區分大(dà)小寫的(de) HTML 實例，這(zhè)不(bù)僅違反了(le／liǎo) HTML 本身的(de)原則，而(ér)且迫使許多人(rén)不(bù)得不(bù)實現解析器，隻爲(wéi / wèi)了(le／liǎo)清理 Angular 2 生成的(de) HTML。

React
React是(shì)另一(yī / yì ／yí)款非常流行的(de) JavaScript “框架”，該庫也(yě)面臨着一(yī / yì ／yí)系列不(bù)同的(de)問題。回想起來(lái)，似乎 React 的(de)發展正是(shì)爲(wéi / wèi)了(le／liǎo)應對 Angular 的(de)晦澀難懂。React 向用戶承諾該庫簡單易用。

雖然從某種程度上(shàng)來(lái)說(shuō)，React 确實做到(dào)了(le／liǎo)，然而(ér)問題在(zài)于(yú) React 并不(bù)是(shì)一(yī / yì ／yí)個(gè)真正的(de)集成框架，它隻不(bù)過是(shì)一(yī / yì ／yí)組模塊和(hé / huò)組件，且無法很好地(dì / de)協同工作。雖然你可以(yǐ)利用 React 實現複雜的(de)功能，比如實現浏覽器指紋識别，但這(zhè)也(yě)意味着你構建了(le／liǎo)一(yī / yì ／yí)個(gè)非常複雜的(de)組件棧，而(ér)且必須持續維護和(hé / huò)管理這(zhè)些組件。

有人(rén)可能會指出(chū)在(zài) Redux 和(hé / huò) Flux 等系統的(de)幫助下，就(jiù)連初學者也(yě)可以(yǐ)使用複雜的(de) React 技術棧。但我認爲(wéi / wèi)，如果你需要(yào / yāo)通過框架來(lái)編寫 JavaScript 代碼，那麽表示你真的(de)有麻煩了(le／liǎo)。話雖如此，但 React 并不(bù)是(shì)真正的(de)框架，因此這(zhè)樣的(de)比較不(bù)公平。

Ember、Vue 以(yǐ)及Aurelia

最後，簡要(yào / yāo)介紹一(yī / yì ／yí)些鮮爲(wéi / wèi)人(rén)知且使用較少的(de)框架。相信大(dà)多數開發人(rén)員都沒有過多地(dì / de)接觸過這(zhè)三個(gè)框架，原因很簡單，這(zhè)些框架的(de)應用非常小衆，并沒有得到(dào)廣泛的(de)使用。

這(zhè)三個(gè)框架中的(de)每一(yī / yì ／yí)個(gè)都有自己的(de)特質，但是(shì)主要(yào / yāo)問題還在(zài)于(yú)應用非常小衆。這(zhè)些框架都沒有達到(dào)與更廣泛的(de) JavaScript 社區建立關系所需的(de)市場份額（盡管根據 StackOverflow 的(de)統計，Vue 目前的(de)受歡迎程度直逼jQuery）。因此，喜歡這(zhè)些框架的(de)開發人(rén)員往往需要(yào / yāo)在(zài)讨論的(de)時(shí)候多費口舌。

這(zhè)裏還需要(yào / yāo)快速說(shuō)明一(yī / yì ／yí)下爲(wéi / wèi)什麽這(zhè)些框架都沒有流行起來(lái)，尤其是(shì)從許多方面來(lái)看它們都是(shì)“功能齊全”的(de)系統。例如，Ember 可能是(shì)三者之(zhī)中“最像框架”的(de)框架，但它也(yě)存在(zài)一(yī / yì ／yí)系列的(de)問題，比如性能、下載量最大(dà)、API 占用空間最大(dà)，而(ér)且學習曲線也(yě)最爲(wéi / wèi)陡峭。

仔細想一(yī / yì ／yí)想，你會發現一(yī / yì ／yí)個(gè)很奇怪的(de)現象：許多開發人(rén)員認爲(wéi / wèi)我們需要(yào / yāo)一(yī / yì ／yí)個(gè)框架來(lái)編寫 JavaScript 代碼，但是(shì)當真的(de)有一(yī / yì ／yí)個(gè)完整的(de)框架時(shí)，我們卻更喜歡使用像React 這(zhè)樣的(de)臨時(shí)解決方案。鑒于(yú)此，也(yě)許我們應該重新評估我們是(shì)否真的(de)需要(yào / yāo)框架。

ES6的(de)前景

上(shàng)述便是(shì) ES6 發布的(de)背景。ES6（也(yě)稱爲(wéi / wèi)ECMAScript2015）是(shì) JavaScript 的(de)最新版本。它改變了(le／liǎo)我們使用 JavaScript 的(de)一(yī / yì ／yí)些基本方式，并引入了(le／liǎo)多年來(lái)社區一(yī / yì ／yí)直在(zài)呼籲的(de)許多新功能。

雖然你可能覺得 ES6 的(de)發布會導緻各種 JavaScript 框架被淘汰的(de)說(shuō)法很荒謬，因爲(wéi / wèi) ES6 中所做的(de)更改隻不(bù)過是(shì)語法上(shàng)的(de)調整，但是(shì)我覺得重點不(bù)僅限于(yú)語法上(shàng)的(de)變化。

這(zhè)是(shì)因爲(wéi / wèi)框架提供的(de)大(dà)部分“額外功能”都出(chū)自同一(yī / yì ／yí)個(gè)目的(de)：通過改變語法，爲(wéi / wèi) JavaScript 提供一(yī / yì ／yí)些捷徑。我們已經非常熟悉其中一(yī / yì ／yí)些語法捷徑，以(yǐ)至于(yú)我們将它們視爲(wéi / wèi)單獨的(de)功能，但其實它們隻不(bù)過是(shì)對 JavaScript 現有做法的(de)自動化而(ér)已。

我并不(bù)是(shì)想低估句法創新的(de)作用。事實上(shàng)，ES6 中的(de)大(dà)部分新特性本質上(shàng)都是(shì)語法快捷方式，其中包括：

• 默認參數

• 模闆字面量

• 多行字符串

• 解構賦值

• 增強的(de)對象字面量

• 箭頭函數

但這(zhè)些功能之(zhī)所以(yǐ)會加速框架的(de)淘汰，是(shì)因爲(wéi / wèi)在(zài)它們進入 JavaScript 核心之(zhī)前，隻有框架才支持。因此，這(zhè)些功能的(de)引入會減少對框架的(de)需求。還有其他(tā)的(de)一(yī / yì ／yí)些功能（包括 promise 和(hé / huò)塊作用域）标準化了(le／liǎo)我們使用框架實現需求的(de)方式。以(yǐ)前使用不(bù)同框架的(de)開發人(rén)員如今可以(yǐ)相互交流了(le／liǎo)。

此外，ES6 的(de)另外兩個(gè)新特性則标志着框架的(de)終結，或者至少會暫停 JavaScript 框架的(de)發展。這(zhè)兩個(gè)新特性就(jiù)是(shì)實現類和(hé / huò)函數的(de)新方式。

類

許多開發人(rén)員都将面向對象作爲(wéi / wèi)标準，因此多年來(lái)一(yī / yì ／yí)直在(zài) JavaScript 中實現對象。到(dào)目前爲(wéi / wèi)止，我們一(yī / yì ／yí)直在(zài)使用框架和(hé / huò)自己開發的(de)解決方案，因爲(wéi / wèi)在(zài) ES5 中類的(de)使用非常痛苦。其實，我對這(zhè)一(yī / yì ／yí)點一(yī / yì ／yí)直非常不(bù)解，因爲(wéi / wèi)很明顯 ES5 支持類，關鍵字“CLASS”是(shì)保留字。

這(zhè)引發了(le／liǎo)很多争論。每個(gè)人(rén)都會選擇自己喜歡的(de)框架來(lái)創建面向對象接口。除了(le／liǎo)作者本身之(zhī)外，很難與其他(tā)人(rén)展開合作，而(ér)且也(yě)無法協同工作。

現在(zài)有了(le／liǎo) ES6，我們終于(yú)有了(le／liǎo)處理類的(de)标準化方式。ES6 類使用原型，而(ér)不(bù)是(shì)函數工廠方法，如果我們有一(yī / yì ／yí)個(gè)類 baseModel，則可以(yǐ)定義一(yī / yì ／yí)個(gè)構造函數和(hé / huò)一(yī / yì ／yí)個(gè) getName() 方法。

模塊

模塊的(de)情況也(yě)大(dà)緻類似。事實上(shàng)，當發現 ES5 默認爲(wéi / wèi)不(bù)支持原生模塊時(shí)，很多開發人(rén)員都感到(dào)非常驚訝。隻不(bù)過我們習慣了(le／liǎo)使用AMD、RequireJS、CommonJS 和(hé / huò)其他(tā)工具實現的(de)變通方法，以(yǐ)至于(yú)忘記了(le／liǎo)這(zhè)些其實都不(bù)屬于(yú) JavaScript。

現在(zài)有了(le／liǎo) ES6，我們就(jiù)可以(yǐ)使用簡單的(de) import 和(hé / huò) export 命令處理模塊了(le／liǎo)。至少有人(rén)會在(zài)一(yī / yì ／yí)些情況下采用這(zhè)種方式，但也(yě)有人(rén)可能會再次将目光轉向框架，因爲(wéi / wèi) ES6 引入模塊的(de)方式真的(de)很混亂。ES6 并沒有采用 Node.js 處理模塊的(de)方式，但很多人(rén)都比較喜歡 Node.js 的(de)處理方式。

總結

簡而(ér)言之(zhī)，ES6 爲(wéi / wèi) JavaScript 帶來(lái)了(le／liǎo)大(dà)量的(de)語法變化，大(dà)大(dà)減少了(le／liǎo)我們對大(dà)多數框架的(de)需求。再加上(shàng)我們目前使用的(de)大(dà)多數框架都導緻 JavaScript 更爲(wéi / wèi)晦澀，而(ér)且還有額外的(de)依賴項。因此，我認爲(wéi / wèi)在(zài)接下來(lái)幾年中這(zhè)些框架的(de)使用将減少，乃至完全消失。

但也(yě)有可能 ES6 也(yě)隻是(shì)一(yī / yì ／yí)次曆史重演，我們會再次使用框架，但在(zài)這(zhè)之(zhī)前我們還有幾年的(de)時(shí)間學習如何編寫更好的(de) JavaScript。