現(xiàn)在的框架和庫(kù)已經(jīng)從蠻荒時(shí)代崛起了,很多老舊的技術(shù)紛紛開(kāi)始將功能分離成模塊。現(xiàn)在不再需要在整個(gè)核心語(yǔ)言中支持所有特性了,開(kāi)發(fā)者允許所有用戶創(chuàng)建庫(kù)和框架來(lái)增強(qiáng)核心語(yǔ)言的功能。這樣,語(yǔ)言的靈活性獲得了顯著提高。
如果在已經(jīng)在使用 JavaScript (以及 JQuery) 來(lái)支持 HTML,那么你肯定知道開(kāi)發(fā)和維護(hù)一個(gè)大型應(yīng)用需要付出多大的努力以及編寫(xiě)多么復(fù)雜的代碼,而 JavaScript 框架可以幫助你快速的構(gòu)建交互式 Web 應(yīng)用 (包含單頁(yè)面應(yīng)用或者多頁(yè)面應(yīng)用)。
當(dāng)一個(gè)新手開(kāi)發(fā)者想要學(xué)習(xí) JavaScript時(shí),他常常會(huì)被各種 JavaScript 框架所吸引,也幸虧有為數(shù)眾多的社區(qū),任何開(kāi)發(fā)者都可以輕易地通過(guò)在線教程或者其他資源來(lái)學(xué)習(xí)。
但是,唉!多數(shù)的程序員都很難決定學(xué)習(xí)和使用哪一個(gè)框架。因此在本文中,我將為大家推薦 6 個(gè)值得好好學(xué)習(xí)的 JavaScript 框架。讓我們開(kāi)始吧。
1.AngularJS
無(wú)論你是何時(shí)聽(tīng)說(shuō)的 JavaScript,很可能你早就聽(tīng)過(guò) AngularJS,因?yàn)檫@是在JavaScript 社區(qū)中最為廣泛使用的框架了。它發(fā)布于 2009 年,由 Google 開(kāi)發(fā) (這夠有說(shuō)服力讓你使用了吧) ,它是一個(gè)開(kāi)源項(xiàng)目,這意味著你可以閱讀、編輯和修改其源代碼以便更加符合自身的需求,并且不用向其開(kāi)發(fā)者支付一分錢(qián) (這不是很酷嗎?)。
如果說(shuō)你覺(jué)得通過(guò)純粹的 JavaScript 代碼編寫(xiě)一個(gè)復(fù)雜的 Web 應(yīng)用比較困難的話,那么你肯定會(huì)興奮的跳起來(lái),因?yàn)樗鼘@著地減輕你的編碼負(fù)擔(dān)。它符合支持雙向數(shù)據(jù)綁定的 MVC (模型-視圖-控制Model–view–controller) 設(shè)計(jì)典范。假如你不熟悉 MVC,你只需要知道它代表著無(wú)論何時(shí)探測(cè)到某些變化,它將自動(dòng)更新前端 (比如,用戶界面端) 和后端 (代碼或者服務(wù)器端) 數(shù)據(jù)。
MVC 可以大大減少構(gòu)建復(fù)雜應(yīng)用程序所需的時(shí)間和精力,所以你只需要集中精力于一處即可 (DOM 編程接口會(huì)自動(dòng)同步更新視圖和模型)。由于 視圖組件 與 模型組件 是分離的,你可以很容易的創(chuàng)建一個(gè)可復(fù)用的組件,使得用戶界面的效果非常好看。
如果因?yàn)槟承┰?,你已?jīng)使用了 Type (一種與 JavaScript 非常相似的語(yǔ)言),那么你可以很容易就上手 AngularJS,因?yàn)檫@兩者的語(yǔ)法高度相似。與 Type 相似這一特點(diǎn)在一定程度上提升了 AngularJS 的受歡迎程度。
目前,Angular 2.0 已經(jīng)發(fā)布,并且提升了移動(dòng)端的性能,這也足以向一個(gè)新的開(kāi)發(fā)者證明,該框架的開(kāi)發(fā)活躍度夠高并且定期更新。
AngularJS 有著大量的用戶,包括 (但不限于) Udemy、Forbes、GoDaddy、Ford、NBA 和 Oscars。
對(duì)于那些想要一個(gè)高效的 MVC 框架,用來(lái)開(kāi)發(fā)面面俱到、包含健壯且現(xiàn)代化的基礎(chǔ)架構(gòu)的單頁(yè)應(yīng)用的用戶來(lái)說(shuō),我極力的推薦這個(gè)框架。這是為無(wú)經(jīng)驗(yàn) JavaScript 開(kāi)發(fā)者設(shè)計(jì)的首選框架。
2.React
與 AngularJS 相似,React 也是一個(gè) MVC (模型-視圖-控制Model–view–controller) 類型的框架,但不同的是,它完全針對(duì)于視圖組件 (因?yàn)樗菫?nbsp;UI 特別定制的) ,并且可與任何架構(gòu)進(jìn)行無(wú)縫銜接。這意味著你可以馬上將它運(yùn)用到你的網(wǎng)站中去。
它從核心功能中抽象出 DOM 編程接口 (并且因此使用了虛擬 DOM),所以你可以快速渲染 UI,這使得你能夠通過(guò) node.js 將它作為一個(gè)客戶端框架來(lái)使用。它是由 Facebook 開(kāi)發(fā)的開(kāi)源項(xiàng)目,還有其它的開(kāi)發(fā)者為它貢獻(xiàn)了代碼。
假如說(shuō)你見(jiàn)到過(guò)并喜歡 Facebook 和 Instagram 的界面,那么你將會(huì)愛(ài)上 React。通過(guò) React,你可以給你的應(yīng)用的每個(gè)狀態(tài)設(shè)計(jì)一個(gè)簡(jiǎn)單的視圖,當(dāng)數(shù)據(jù)改變的時(shí)候,視圖也自動(dòng)隨之改變。只要你想的話,可以創(chuàng)建各種的復(fù)雜 UI,也可以在任何應(yīng)用中復(fù)用它。在服務(wù)器端,React 同樣支持通過(guò) node.js 來(lái)進(jìn)行渲染。對(duì)于其他的接口,React 也一樣表現(xiàn)得足夠靈活。
除 Facebook 和 Instagram 外,還有好多公司也在使用 React,包括 Whatsapp、BBC、PayPal、Netflix 和 Dropbox 等。
如果你只需要一個(gè)前端開(kāi)發(fā)框架來(lái)構(gòu)建一個(gè)非常復(fù)雜且界面極好的強(qiáng)大視圖層,那我極力向你推薦這個(gè)框架,但你需要有足夠的經(jīng)驗(yàn)來(lái)處理各種類型的 JavaScript 代碼,而且你再也不需要其他的組件了 (因?yàn)槟憧梢宰约杭伤鼈?。
3.Vue.js
這是一個(gè)開(kāi)源的 JavaScript 框架,發(fā)布于 2014 年,它有個(gè)極為簡(jiǎn)單的 API,用來(lái)為現(xiàn)代 Web 界面Modern Web Interface開(kāi)發(fā)交互式組件Reactive components。其設(shè)計(jì)著重于簡(jiǎn)單易用。與 Ember 相似,它使用的是 MVVM (模型-視圖-視圖模型Model–view–viewmodel) 設(shè)計(jì)范例,這樣簡(jiǎn)化了設(shè)計(jì)。
這個(gè)框架最有吸引力的一點(diǎn)是,你可以根據(jù)自身需求來(lái)選擇使用的模塊。比如,你需要編寫(xiě)簡(jiǎn)單的 HTML 代碼,抓取 JSON,然后創(chuàng)建一個(gè) Vue 實(shí)例來(lái)完成可以復(fù)用的小特效。
與之前的那些 JavaScript 框架相似,它使用雙路數(shù)據(jù)綁定來(lái)更新模型和視圖,同時(shí)也使用連接器來(lái)完成視圖和數(shù)據(jù)連接器的通信。這是一個(gè)還未完全成熟的框架,因?yàn)樗康年P(guān)注點(diǎn)都在視圖層,所以你需要自己處理其它組件。
如果你熟悉 AngularJS,那你會(huì)感覺(jué)很順手,因?yàn)樗罅壳度肓?AngularJS 的架構(gòu),如果你懂得 JavaScript 的基礎(chǔ)用法,那你的許多項(xiàng)目都可以輕易地遷移到該框架之下。
假如你只想把任務(wù)完成,或者想提升你自身的 JavaScript 編程經(jīng)驗(yàn),又或者你需要學(xué)習(xí)不同的 JavaScript 框架的本質(zhì),我極力推薦這個(gè)。
4.Ember
這個(gè) JavaScript 框架在 2011 年正式發(fā)布,是由 Yehuda Katz 開(kāi)發(fā)的開(kāi)源項(xiàng)目。它有一個(gè)龐大且活躍的在線社區(qū),所以在有任何問(wèn)題時(shí),你都可以在社區(qū)中提問(wèn)。該框架吸收融合了非常多的通用的 JavaScript 風(fēng)格和經(jīng)驗(yàn),以便確保開(kāi)發(fā)者能最快地做到開(kāi)箱即用。
它使用了 MVVM (模型-視圖-視圖模型Model–view–viewmodel) 的設(shè)計(jì)模式,這使得它與 MVC 有些不一樣,因?yàn)樗梢粋€(gè) 連接器 (binder) 幫助視圖和數(shù)據(jù)連接器進(jìn)行通信。
對(duì)于 DOM 編程接口的快速服務(wù)端渲染,它借助了 Fastboot.js,這能夠讓那些復(fù)雜 UI 的性能得到極大提高。
它的現(xiàn)代化路由模式和模型引擎還支持 RESTful API,這確保你可以使用到這種最新的技術(shù)。它支持句柄集成模板Handlebars integrated template,用來(lái)自動(dòng)更新數(shù)據(jù)。
早在 2015 年間,它的風(fēng)頭曾一度蓋過(guò) AngularJS 和 React,被稱為最好的 JavaScript 框架,對(duì)于它在 JavaScript 社區(qū)中的可用性和吸引力,這樣的說(shuō)服力該是足夠了的。
對(duì)于不追求高靈活性和大型架構(gòu)的用戶,并且僅僅只是為了趕赴工期、完成任務(wù)的話,我個(gè)人非常推薦這個(gè) JavaScript 框架。
5.Adonis
如果你曾使用過(guò) Laravel 和 NodeJS,那么你在使用這一個(gè)框架之時(shí)會(huì)覺(jué)得相當(dāng)順手,因?yàn)樗羌狭诉@兩個(gè)平臺(tái)的優(yōu)點(diǎn)而形成的一個(gè)框架,對(duì)于任何種類的現(xiàn)代應(yīng)用來(lái)說(shuō),它都顯得非常專業(yè)、圓潤(rùn)和精致。
它使用了 NodeJS,所以是一個(gè)很好的后端框架,同時(shí)還附帶有一些前端特性 (與前面提到那些更多地注重前端的框架不同),所以想要進(jìn)入后端開(kāi)發(fā)的新手開(kāi)發(fā)者會(huì)發(fā)覺(jué)這個(gè)框架相當(dāng)迷人。
相比于 NoSQL,很多的開(kāi)發(fā)者都比較喜歡使用 SQL 數(shù)據(jù)庫(kù) (因?yàn)樗麄冃枰鰪?qiáng)和數(shù)據(jù)以及其它特性的交互性),這一現(xiàn)象在這個(gè)框架中得到了很好的體現(xiàn),這使得它更接近標(biāo)準(zhǔn),開(kāi)發(fā)者也更容易使用。
如果你混跡于各類 PHP 社區(qū),那你一定很熟悉 服務(wù)提供者Service Providers,也由于 Adonis 其中包含相應(yīng)的 PHP 風(fēng)格,所以在使用它的時(shí)候,你會(huì)覺(jué)得似曾相識(shí)。
在它所有的特性中,最好的便是那個(gè)極為強(qiáng)大的路由引擎,支持使用函數(shù)來(lái)組織和管理應(yīng)用的所有狀態(tài)、支持錯(cuò)誤處理機(jī)制、支持通過(guò) SQL ORM 來(lái)進(jìn)行數(shù)據(jù)庫(kù)查詢、支持生成器、支持箭頭函數(shù)arrow functions、支持代理等等。
如果喜歡使用無(wú)狀態(tài) REST API 來(lái)構(gòu)建服務(wù)器端應(yīng)用,我比較推薦它,你會(huì)愛(ài)上這個(gè)框架的。
6.Backbone.js
這個(gè)框架可以很容易的集成到任何第三方的模板引擎中,默認(rèn)使用的是 Underscore 模板引擎,而且該框架僅有一個(gè)依賴項(xiàng) (JQuery),因此它以輕量而聞名。它支持帶有 RESTful JSON 接口的 MVC (模型-視圖-控制Model–view–controller) (可以自動(dòng)更新前端和后端) 設(shè)計(jì)范例。
假如你曾經(jīng)使用過(guò)著名的社交新聞網(wǎng)絡(luò)服務(wù) reddit,那么你肯定聽(tīng)說(shuō)過(guò)它在幾個(gè)單頁(yè)面應(yīng)用中使用了Backbone.js。Backbone.js 的原作者為之建立了與 Coffe 旗鼓相當(dāng)?shù)?Underscore 模板引擎,所以你可以放心,開(kāi)發(fā)者知道該做什么。
該框架在一個(gè)軟件包中提供了鍵值對(duì)key-value 模型、視圖以及幾個(gè)打包的模塊,所以你不需要額外下載其他的外部包,這樣可以節(jié)省不少時(shí)間。框架的源碼可以在 GitHub 進(jìn)行查看,你可以根據(jù)需求進(jìn)行深度定制。
至此,我已經(jīng)在本文著重說(shuō)明了 6 個(gè)值得好好學(xué)習(xí)的 JavaScript 框架,希望你讀完本文后能夠決定使用哪個(gè)框架來(lái)完成自己的任務(wù)。
如果說(shuō)對(duì)于選擇框架,你還是不知所措,請(qǐng)記住,這個(gè)世界是實(shí)踐出真知而非教條主義的。最好就是從列表中挑選一個(gè)來(lái)使用,看看最后是否滿足你的需求和興趣,如果還是不行,接著試試另一個(gè)。你也盡管放心好了,列表中的框架肯定是足夠了的。