2018-8-10 博博
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
在所有可用于創(chuàng)建web應(yīng)用程序的語(yǔ)言中,JavaScript可能是最健壯的庫(kù)和框架選擇。事實(shí)上,有太多的東西,很難弄清楚該用哪一個(gè),尤其是當(dāng)你剛剛開(kāi)始的時(shí)候。
JavaScript庫(kù)和框架之間的關(guān)鍵區(qū)別在于,庫(kù)由應(yīng)用程序可以調(diào)用的函數(shù)組成,用于執(zhí)行任務(wù),而框架定義了開(kāi)發(fā)人員如何設(shè)計(jì)應(yīng)用程序。換句話說(shuō),框架調(diào)用應(yīng)用程序代碼,而不是反過(guò)來(lái)。當(dāng)然,開(kāi)發(fā)人員仍然需要庫(kù)來(lái)使用JavaScript完成web上的基本任務(wù)。
JavaScript Libraries
1. D3.js
許多現(xiàn)代網(wǎng)站都是數(shù)據(jù)驅(qū)動(dòng)的。例如,新聞?wù)军c(diǎn)必須不斷刷新它們的內(nèi)容,因此不可能每隔幾秒鐘重新配置設(shè)置以支持這些更改。數(shù)據(jù)驅(qū)動(dòng)文檔,或D3。庫(kù)的獨(dú)特之處在于它把數(shù)據(jù)放在首位。下面的截屏顯示了在D3中可以找到的許多數(shù)據(jù)演示中的一些。
單擊visual index中的一個(gè)條目,您將看到一個(gè)詳細(xì)頁(yè)面,在這個(gè)頁(yè)面中您可以看到數(shù)據(jù)表示的完整視圖(如下所示),以及用于創(chuàng)建表示的底層代碼和數(shù)據(jù):
該站點(diǎn)提供了完整的示例,旨在幫助您理解庫(kù)的功能。
這個(gè)庫(kù)的主要優(yōu)點(diǎn)是它對(duì)內(nèi)容的處理非常靈活。但另一方面是D3.js并沒(méi)有帶來(lái)太多的活力。例如,如果您是在一個(gè)電子商務(wù)網(wǎng)站工作,而不僅僅是提供信息,那么這個(gè)庫(kù)可能不是最好的選擇。除了極端的靈活性,D3.js的 relatively streamlined presentation幫助提高了速度。如果單單從圖表的功能來(lái)看,D3.js還是有點(diǎn)太龐大了。啊還不如去使用Chart.js短小精干的專門提供圖表功能的庫(kù)。
2. jQuery
大名鼎鼎的jQuery已經(jīng)贏得了長(zhǎng)期統(tǒng)治網(wǎng)頁(yè)的地位。許多網(wǎng)站仍然使用jQuery進(jìn)行基本的文檔對(duì)象模型(DOM)操作,原因有三個(gè):
jQuery非常容易學(xué)習(xí)。它提供的示例比大多數(shù)庫(kù)都多,所以您很有可能會(huì)找到一個(gè)示例來(lái)演示如何完成特定的任務(wù)。
jQuery非常快。因?yàn)樗鼘W⒂诔錾貓?zhí)行特定的任務(wù),所以jQuery使快速執(zhí)行這些任務(wù)成為可能。
jQuery擁有龐大的安裝基礎(chǔ)。它還擁有大量的社區(qū)支持和項(xiàng)目貢獻(xiàn)者。
我們可以預(yù)期這個(gè)庫(kù)肯定會(huì)長(zhǎng)期存在。額外的開(kāi)發(fā)時(shí)間也意味著文檔是非常完善的。如下所示,文檔將主題分解為容易理解的部分,然后您可以根據(jù)需要深入研究其他細(xì)節(jié):
當(dāng)然,沒(méi)有什么是完美的。例如,有時(shí)jQuery在多個(gè)瀏覽器上的工作方式并不完全相同。JQuery首先關(guān)注這些問(wèn)題,您可以在站點(diǎn)上找到有關(guān)瀏覽器支持的信息。
最后,與其他庫(kù)不同,jQuery并不是一個(gè)完整的解決方案。您需要另一個(gè)產(chǎn)品,如jQuery UI(參見(jiàn)下一個(gè)條目)來(lái)構(gòu)建一個(gè)完整的應(yīng)用程序。重要的是要認(rèn)識(shí)到,在使用jQuery時(shí),您的站點(diǎn)將更加模塊化,并且依賴于更多的庫(kù)(雖然這并不一定是壞事)。
3. jQuery UI
jQuery UI只是jQuery的眾多插件之一,但它是您最常看到的,這也是我們?cè)谶@里包含它的原因。在合并jQuery之后,使用jQuery UI向應(yīng)用程序添加基本的圖形元素。jQuery UI庫(kù)提供了各種有趣的小部件,如手風(fēng)琴、滑塊、工具提示和數(shù)據(jù)表,這些小部件使您可以配置應(yīng)用程序以提供有用的服務(wù)。
您可以深入到特定的小部件或其他控件來(lái)查看它們是如何工作的。頁(yè)面通常包含頂部的控件,然后是使用說(shuō)明和示例代碼。與jQuery一樣,您可以從一個(gè)簡(jiǎn)單的示例開(kāi)始,但可以根據(jù)需要深入了解添加的內(nèi)容。
這個(gè)庫(kù)Library 與眾不同有幾個(gè)原因。最重要的是,JQuery UI幾乎適用于任何瀏覽器,因此用戶不太可能抱怨應(yīng)用程序沒(méi)有按預(yù)期工作。jQuery UI還提供了大量的附加組件。例如,雖然jQuery UI缺乏時(shí)間選擇器,但您可以從trentrichardson.com/examples/timepicker等地方獲得執(zhí)行該任務(wù)的附加程序。
jQuery庫(kù)組的一個(gè)問(wèn)題是它們變得非常大。有時(shí)候,一個(gè)庫(kù)的特性太豐富了。JQuery庫(kù)的大小會(huì)使它們?cè)谳^小的設(shè)備上加載速度變慢。可以使用替代的第三方庫(kù),如Granim.js和Multiple.js的出現(xiàn)提供了jQuery特性的子集,有時(shí)還提供了一組有重點(diǎn)的附加功能特性,加載時(shí)間大大加快。
4. Parsley
表單驗(yàn)證是一項(xiàng)重要的任務(wù)。因?yàn)楝F(xiàn)在的數(shù)據(jù)經(jīng)常被機(jī)器分析,所以干凈的數(shù)據(jù)比以往任何時(shí)候都更重要。事后清理數(shù)據(jù)是費(fèi)時(shí)的,而且從沒(méi)有像讓用戶首先提供正確的信息那樣準(zhǔn)確。
與任何其他JavaScript庫(kù)相比,Parsley提供了更多的表單驗(yàn)證技術(shù)。你可以選擇你需要的驗(yàn)證級(jí)別,但它們可能會(huì)變得非常復(fù)雜:
甚至如下所示的簡(jiǎn)單驗(yàn)證也包含許多不同的驗(yàn)證類型,以及執(zhí)行任務(wù)所需的代碼。完成最常見(jiàn)的驗(yàn)證是多么容易。(除非嘗試驗(yàn)證復(fù)雜的數(shù)據(jù),否則不需要進(jìn)行繁重的編碼。)
5. QUnit
許多庫(kù)提供的測(cè)試功能有很多不足之處。即使您使用腳本,手動(dòng)測(cè)試復(fù)雜的應(yīng)用程序也會(huì)很麻煩,而且需要花費(fèi)大量的時(shí)間——如果它能找到所有的錯(cuò)誤的話。
QUnit是用于JavaScript的幾個(gè)單元測(cè)試庫(kù)之一。雖然有些人可能會(huì)認(rèn)為它有點(diǎn)過(guò)時(shí),但它是相對(duì)全面的,并且具有強(qiáng)大的社區(qū)支持和短的學(xué)習(xí)曲線。QUnit站點(diǎn)提供了豐富的入門信息,包括關(guān)于單元測(cè)試的完整教程。
6. React
通常被認(rèn)為是一個(gè)庫(kù),而React有時(shí)被稱為框架。在模型-視圖-控制器(MVC)方法的上下文中,React提供了視圖部分。它不假設(shè)您正在使用的基礎(chǔ)技術(shù)堆棧來(lái)建模或控制數(shù)據(jù)。所有的React興趣的就是在屏幕上顯示數(shù)據(jù)。考慮到這一點(diǎn),它不依賴于瀏覽器文檔對(duì)象模型(DOM),而是使用一個(gè)快速顯示信息的輕虛擬DOM。React最棒的一點(diǎn)是它是聲明性的,這意味著你要告訴框架你想做什么,而不是怎么做。
您為使用MVC的速度和能力付出的代價(jià)是增加了一定程度的復(fù)雜性。即使是一個(gè)小的組件也需要相當(dāng)多的代碼(如React網(wǎng)站上的例子所演示的)。當(dāng)你和真正的大型項(xiàng)目一起工作時(shí),你獲得的是靈活性和速度。
JavaScript Frameworks(框架)
1. Angular
Angular framewor框架使作為MVC的控制器部分?jǐn)U展HTML成為可能。控制器是DOM組件背后的行為。有了 Angular,就有可能以一種既自然又直接的方式創(chuàng)造新的行為。這些擴(kuò)展最終看起來(lái)像是HTML的附加部分,而不是固定的東西。 Angular 網(wǎng)站明確了使用該產(chǎn)品的兩個(gè)基本原因:“速度和性能”和“難以置信的工具”。
然而,編碼可能會(huì)變得復(fù)雜,這個(gè)框架可能更適合大企業(yè)而不是小創(chuàng)業(yè)公司。即使是 Angular 站點(diǎn)上的簡(jiǎn)單示例也依賴于快速創(chuàng)建復(fù)雜性的多個(gè)文件。值得注意的是, Angular framewor的版本也依賴于TypeScript,而不是純JavaScript,這增加了學(xué)習(xí)曲線,但提供了可擴(kuò)展性。
幸運(yùn)的是,該軟件附帶了大量教程,如本文所示,這將使有經(jīng)驗(yàn)的開(kāi)發(fā)人員更容易快速地開(kāi)始工作。
2. Ember.js
一個(gè)自稱為“有抱負(fù)的web開(kāi)發(fā)人員的框架”的框架確實(shí)有些嚴(yán)肅。像微軟、Netflix和LinkedIn這樣的知名公司都在使用Ember.js。因?yàn)樗褂媚P?視圖-視圖-模型(MVVM)模式,并將最佳實(shí)踐作為框架的一部分進(jìn)行合并。最重要的是,它的伸縮性非常好。有趣的是,Ember.js不僅可用于web開(kāi)發(fā),您也可以使用它來(lái)構(gòu)建移動(dòng)應(yīng)用程序和桌面應(yīng)用程序——它被用于構(gòu)建Apple Music。
與許多其他框架不同,您可以使用完整的基于ember的工具套件來(lái)創(chuàng)建高度兼容的開(kāi)發(fā)環(huán)境。Ember CLI(命令行接口)提供了對(duì)大量工具的訪問(wèn),您可以使用腳本自動(dòng)化。例如,,Ember.js數(shù)據(jù)通過(guò)對(duì)象關(guān)系映射(ORM)提供面向web的數(shù)據(jù)訪問(wèn)。與此同時(shí),Ember Inspector是Firefox和Chrome瀏覽器的一個(gè)插件,它可以使調(diào)試更加容易。
盡管有它這么給力,Ember.js的快速入門教程只需要5分鐘就可以完成。當(dāng)然,標(biāo)準(zhǔn)教程需要的時(shí)間要長(zhǎng)得多,但是能產(chǎn)生更多受人尊敬的結(jié)果,如下所示:
這個(gè)框架的文檔包含您需要的所有主題,包括對(duì)象模型、模板、組件、控制器和模型的討論。還有一個(gè)博客和Ember.js社區(qū)可以提供額外的幫助。
3. Node.js
Node.js是一個(gè)異步的、事件驅(qū)動(dòng)的JavaScript運(yùn)行時(shí),具有一些獨(dú)特的特性。首先,如果它沒(méi)有工作可做,它只是“去睡覺(jué)”。這聽(tīng)起來(lái)并不是什么大問(wèn)題,但是如果你在公共云上托管你的網(wǎng)站,“讓它休眠”可以幫你省下一大筆錢——可能是很多錢。此外,由于Node.js不需要鎖來(lái)完成它的工作,它不像其他框架那樣傾向于死鎖。這個(gè)產(chǎn)品更像jQuery而不是jQueryUI,因?yàn)槟皇褂盟鼇?lái)創(chuàng)建用戶界面。相反,您可以創(chuàng)建響應(yīng)事件的代碼——客戶端生成事件,服務(wù)器響應(yīng)這些事件。用戶界面是顯示任何結(jié)果的獨(dú)立元素。
因?yàn)镹ode.js是如此簡(jiǎn)單和快速,社區(qū)支持是首屈一指的,你可以在最不可能的地方找到它。有900萬(wàn)個(gè)實(shí)例運(yùn)行在超過(guò)5萬(wàn)個(gè)包上。換句話說(shuō),Node.jsjs構(gòu)成了您使用的許多包的基礎(chǔ)。
Node.js,開(kāi)發(fā)人員可以構(gòu)建:
后端應(yīng)用程序
博客
客戶管理系統(tǒng)
實(shí)時(shí)服務(wù),如聊天應(yīng)用和游戲
REST api
社交網(wǎng)絡(luò)應(yīng)用程序
實(shí)用程序和工具
4. Vue.js
Vue是一個(gè)多功能的開(kāi)源JavaScript框架,它是“漸進(jìn)的”,這意味著與“單一框架”不同,Vue是從底層設(shè)計(jì)的,以漸進(jìn)的方式采用。在庫(kù)和全功能框架之間擴(kuò)展,Vue使用“基于組件的開(kāi)發(fā)模型”,可以將Vue組件混合和匹配到項(xiàng)目中。
關(guān)鍵的Vue特性包括組件、模板、轉(zhuǎn)換和雙向數(shù)據(jù)綁定,但是它最顯著的特性可能是它的“反應(yīng)性”系統(tǒng)。基本上,reactivity指的是在Vue中自動(dòng)更新一個(gè)JavaScript對(duì)象,并且不引人注意地更新Vue模板。
Vue是為任何具有HTML、CSS和JavaScript工作知識(shí)的人而構(gòu)建的。
其他的選擇
別忘了還有更多的JavaScript庫(kù)、社區(qū)、集合和框架,通常都有特定的焦點(diǎn)區(qū)域。
例如,CodePen是一個(gè)免費(fèi)的在線社區(qū),用于測(cè)試和展示HTML、CSS和JavaScript的混合。可以把它看作是前端設(shè)計(jì)師和開(kāi)發(fā)人員的社會(huì)環(huán)境、在線開(kāi)發(fā)社區(qū)和具有統(tǒng)一界面的編輯器。每個(gè)代碼頁(yè)條目都被稱為鋼筆,您可以將它們作為集合的一部分來(lái)查看。有些收藏品很奇特,如anime.js(動(dòng)畫(huà)) ,而其他的,比如有趣的js,會(huì)有一些你在其他地方看不到的有趣的小部件。它也直接與反應(yīng)一起工作。
類似地,Jest是一個(gè)“零配置”的JavaScript測(cè)試解決方案,旨在使用React進(jìn)行開(kāi)箱即用的測(cè)試。
BIDEO.JS提供了一種顯示全屏背景視頻的方法,例如,如果您正在為旅行社構(gòu)建一個(gè)站點(diǎn),這將非常有用。
底線
現(xiàn)在應(yīng)該很清楚了,問(wèn)題不是找到一個(gè)JavaScript庫(kù)或框架來(lái)幫助您做一些有趣的事情——而是找到一個(gè)庫(kù)來(lái)幫助您完成您需要完成的任務(wù)。
此外,您還需要確保您所依賴的庫(kù)將在明天仍然存在。沒(méi)有人想要重新工作他們的應(yīng)用程序,因?yàn)樗褂玫腏avaScript庫(kù)不再可用。盡管現(xiàn)在大多數(shù)現(xiàn)代JavaScript庫(kù)和框架都非常可靠,但您仍然需要確保它們與用戶所依賴的所有設(shè)備和瀏覽器兼容。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.ssll180.com