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