javascript有哪些庫 - tw511教學網

javascript庫有：jQuery、React、「D3.js」、Underscore、Lodash、Algolia Places、「Anime.js」、Animate On Scroll、「Bideo.js」、「Chart.js」等等。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

什麼是JavaScript庫？

JavaScript庫包含各種功能，方法或物件，以在網頁或基於JS的應用程式上執行實際任務。您甚至可以使用它們構建一個WordPress網站。

可以將它們視為一個圖書庫，您可以在其中重新閱讀自己喜歡的書。您可能是一位作家，並且喜歡其他作家的書，獲得新的觀點或創新，並在生活中加以利用。

同樣，JavaScript庫具有開發人員可以重複使用和稍加改動可用的程式碼或功能。開發人員編寫JS庫程式碼，其他開發人員重複使用相同的程式碼來執行某些任務，例如準備幻燈片，而不是從頭開始編寫。這為他們節省了大量時間和精力。

它們恰恰是建立JavaScript庫的動機，這就是為什麼您可以在多個用例中找到數十個它們的原因。它們不僅可以節省您的時間，而且可以簡化整個開發過程。

如何使用JavaScript庫

要在您的應用中使用JavaScript庫，請使用src參照庫源路徑或URL的屬性將其新增<script>到<head>元素中。

閱讀您打算使用的JavaScript庫的檔案以獲取更多資訊，並按照此處提供的步驟進行操作。

分享一些javascript庫

1、jQuery

jQuery是一個經典的JavaScript庫，具備快速，輕巧和功能豐富的特點。它由BarCamp NYC的John Resig於2006年建造。jQuery具有MIT許可的免費開源軟體。

它使HTML檔案的操作和遍歷，動畫，事件處理以及Ajax變得更加簡單。

特點與優勢：

它具備易於使用的簡約API。
它在處理樣式屬性和查詢元素時使用CSS3選擇器。
jQuery是輕量級的，gzip和壓縮只需30kb，並支援AMD模組。
由於其語法與CSS非常相似，也就是便於初學者學習。
可通過外掛擴充套件。
具有支援多種瀏覽器（包括Chrome和Firefox）的API的多功能性。

用例：

使用CSS選擇器的DOM操作，這些選擇器使用某些條件來選擇DOM中的節點。這些條件包括元素名稱及其屬性（如類和ID）。
使用Sizzle（開放原始碼，多瀏覽器選擇器引擎）在DOM中選擇元素。
建立效果，事件和動畫。
JSON解析。
Ajax應用程式開發。
特徵檢測。
用Promise和Deferred物件控制非同步處理。

2、React.js

React.js（也稱為ReactJS或React）是一個開放原始碼的前端JavaScript庫。它由曾在Facebook擔任軟體工程師Jordan Walke於2013年建立。

現在，它使用的是MIT許可證，但最初是根據Apache License 2.0釋出的。React旨在使互動式UI的建立變得輕鬆自如。

只需為您的應用中的各個狀態設計一個簡單的檢視。接下來，它將根據資料更改有效地渲染和更新正確的元件。

特點與優勢：

React程式碼包含需要在React DOM庫的幫助下渲染為DOM中特定元素的元件或實體。
它通過在資料結構中建立記憶體中的快取，計算差異並有效地更新瀏覽器中的顯示DOM來使用虛擬DOM。
由於這種選擇性渲染，因此應用程式效能得以提高，同時節省了開發人員重新計算頁面佈局，CSS樣式和全頁面渲染的工作量。
它使用諸如render和componentDidMount之類的生命週期方法，以允許在實體生命週期中的特定點執行程式碼。
它支援結合了JS和HTML的JavaScript XML（JSX）。它有助於使用巢狀的元素，屬性，JS表示式和條件語句進行元件渲染。

用例：

在開發移動或單頁應用程式時用作基礎。
將狀態呈現給DOM並進行管理。
在開發Web應用程式和互動式站點時，構建有效的使用者介面。
偵錯和測試更加容易。

眾所周知，Facebook，Instagram和Whatsapp都使用React。

3、D3.js

Data-Driven Documents（簡稱為D3）或D3.js是另一個著名的JS庫，開發人員可以使用它來對基於資料的檔案進行操作。於2011年釋出，使用的是BSD許可。

特點與優勢：

它強調Web標準，併為您提供現代的瀏覽器功能，而不僅限於一個框架。
D3.js支援強大的資料視覺化。
它支援HTML，CSS和SVG。
採用資料驅動的方法，並將其應用於操縱DOM。
D3.js速度很快，並支援多種動態行為以及用於動畫和互動的資料集。
它減少了開銷，從而允許在高幀速率下實現更大的圖形複雜度。

用例：

產生互動式和動態資料視覺化。
將資料繫結到DOM並對其執行資料驅動的轉換。例如，您可以從數位陣列中生成HTML表格，然後使用D3.js建立SVG條形圖或3D表面圖。
它的功能程式碼使其可與大量模組一起重用。
D3提供了多種模式來改變節點，例如通過採用宣告性方法，新增，排序或刪除節點，更改文字或HTML內容等來更改樣式或屬性。
要建立動畫過渡，請通過事件對複雜過渡進行排序，執行CSS3過渡等。

4、Underscore.js

Underscore是一個JavaScript實用程式庫，可為典型的程式設計任務提供各種功能。它是由Jeremy Askenas於2009年建立的，並獲得了MIT許可。現在，Lodash已經超越了它。

特點與優勢：

它的功能類似於Prototype.js（另一個流行的實用程式庫），但是Underscore具有功能程式設計設計，而不是物件原型擴充套件。
根據它們操作的資料型別，它具有4種不同型別的100多種功能。這些是要操縱的功能：
- 物件
- 陣列
- 物件和陣列
- 其他功能
Underscore與Chrome，Firefox，Edge等相容。

用例：

它支援諸如過濾器，地圖等功能性助手，以及諸如繫結，快速索引，JavaScript模板，品質測試等特殊功能。

5、Lodash

Lodash還是一個JS實用程式庫，可以更輕鬆地使用數位，陣列，字串，物件等。它於2013年釋出，還使用了功能程式設計設計，例如Underscore.js。

特點與優勢：

可以幫助您編寫可維護的簡潔JavaScript程式碼。
簡化了常見的任務，例如數學運算，繫結事件，函數節流，修飾器，約束限制，去抖動等。
修剪，駝峰和大寫等字串函數都變得更加簡單。
建立，修改，壓縮和排序陣列。
對集合，物件和序列的其他操作。

用例：

它的模組化方法可以幫助您：

迭代陣列，字串和物件。
製作複合功能。
操作和測試值。

6、Algolia Places

Algolia Places是一個JavaScript庫，它提供了一種在站點上使用地址自動填寫功能的簡便且分散式的方法。這是一種非常快速且精確的工具，可以幫助您提高站點使用者的體驗。Algolia Places利用OpenStreetMap令人印象深刻的開源資料庫來覆蓋全球各地。

例如，您可以使用它來提高產品頁面的轉化率。

特點與優勢：

通過同時填充多個輸入，它簡化了結帳流程。
您可以輕鬆使用國家或城市選擇器。
您可以通過在地圖上實時顯示連結建議來快速檢視結果。
Algolia Places可以處理鍵入錯誤並相應顯示結果。
通過將所有查詢自動路由到最接近的伺服器，它可以在幾毫秒內提供結果。

用例：

允許您合併地圖以顯示非常有用的特定位置。
它使您可以有效地使用表單。

7、Anime.js

如果要向站點或應用程式新增動畫，Anime.js是您可以找到的最好的JavaScript庫之一。它於2019年釋出，輕量級且具備強大而簡單的API。

特點與優勢：

Anime.js與DOM屬性，CSS屬性，SVG，CSS轉換和JS物件一起執行。
可與各種瀏覽器一起使用，例如Chrome，Safari，Firefox，Opera等。
它的原始碼可以輕鬆解密和使用。
複雜的動畫方法（例如重疊和交錯跟隨）變得更加容易。

用例：

您可以在屬性和時間上使用Anime.js的交錯系統。
在一個HTML元素上同時建立具有多個定時的分層CSS轉換。
使用Anime.js回撥和控制元件功能以同步方式播放，暫停，觸發，倒退和控制事件。

8、Animate On Scroll (AOS)

Animate On Scroll非常適合單頁視差網站。這個JS庫是完全開源的，可以幫助您在頁面上新增不錯的動畫，當您上下捲動時，它們看起來很漂亮。

通過幫助您新增淡入淡出效果，靜態錨點位置等來提升網站設計感和增強使用者滿意度。

特點與優勢：

該庫可以檢測元素位置，並在它們出現在視口中時新增合適的類。
除了輕鬆新增動畫外，它還可以幫助您在視口中進行更改。
它可以在不同的裝置上無縫執行，無論是手機，平板電腦還是計算機，
由於它是用純JavaScript編寫的，因此沒有依賴關係。

用例：

根據另一個元素的位置對元素進行動畫處理。
根據其螢幕位置對元素進行動畫處理。
在手機上禁用元素動畫。
建立不同的動畫，例如淡入淡出，翻轉，滑動，縮放，錨點放置等。

9、Bideo.js

您想將全螢幕視訊納入網站的背景嗎？試試Bideo.js。

特點與優勢：

使用此JavaScript庫，新增視訊背景非常容易。
此功能在不同比例和大小的螢幕上看起來很酷，並且可以正常工作。
新增的視訊可以根據使用的瀏覽器調整大小。
易於使用CSS / HTML實施。

用例：

在網站上新增響應式全螢幕背景視訊。

10、Chart.js

您的網站或專案與資料分析領域相關嗎？

您是否需要提供大量統計資料？

Chart.js是一個出色的JavaScript庫。

Chart.js是面向設計人員和開發人員的靈活，簡單的庫，他們可以立即在其專案中新增精美的圖表。該JS庫是開源且提供MIT許可證。

特點與優勢：

優雅，簡單，可新增基本圖表。
產生響應式網頁。
重量輕，易於學習和實施。
8種不同型別的圖表。
非常適合初學者。
動畫功能使頁面更具互動性。

用例：

在混合圖表型別的幫助下使用不同的資料集時，提供清晰的視覺表示。
以對數，日期，時間或自定義比例繪製稀疏和複雜的資料集。

11、Cleave.js

如果您想格式化文字內容，Cleave.js提供了一個有趣的解決方案。它的建立旨在通過格式化鍵入的資料來提供一種更簡單的方法來提高輸入欄位的可讀性。

這樣，您不再需要掩蓋模式或編寫正規表示式來格式化文字。

特點與優勢：

通過表單提交的一致資料來提高使用者體驗。
您可以對信用卡號，電話號碼，日期，時間和數位執行不同的格式化型別。
格式化自定義塊，字首和定界符。
支援ReactJS元件，以及更多。

用例：

使用CSS選擇器將cleave.js實現為多個DOM元素。
更新特定的原始值。
獲取文字欄位的參照。
在Vue.js，jQuery和Playground中，它與Redux表單一起使用。

12、Choreographer.js

使用Chreographer.js有效地對複雜CSS進行動畫處理。它甚至可以新增更多可用於非CSS動畫的自定義功能。

要使用此JavaScript庫，請通過npm安裝其軟體包或新增其指令碼檔案。

特點與優勢：

它的Animation類管理單個動畫資料。
animationConfig物件設定每個動畫範例。
包括2個內建的動畫功能「更改」和「縮放」。
「比例」用於將逐步測量的值對映到節點的樣式屬性。
「更改」刪除或新增樣式屬性。

用例：

執行即時捲動動畫。
根據滑鼠移動建立動畫。

13、Glimmer

Glimmer於2017年釋出，具有輕量級和快速的UI元件。它使用了功能強大的Ember CLI，並且可以將EmberJS作為元件使用。

特點與優勢：

Glimmer是一個快速的DOM渲染引擎，可以為渲染和更新提供令人難以置信的效能。
它是多功能的，可以與您當前的技術堆疊一起使用，而無需您重寫程式碼。

用例：

您可以將其用作獨立元件，也可以將其新增為現有應用程式中的Web元件。
DOM渲染。
它可以幫助您區分靜態內容和動態內容。
當您需要Ember的功能但包裝更輕時，請使用Glimmer。

14、Granim.js

Granim.js是一個JS庫，可幫助您建立流暢的互動式漸變動畫。這樣，您可以使您的網站在彩色背景中脫穎而出。

特點與優勢：

漸變可以覆蓋影象，獨立工作，在影象蒙版下滑動等。
您可以使用百分比或畫素值來自定義漸變方向。
將漸變方向設定為對角線，上下，左右，徑向或自定義。
設定狀態變化的動畫持續時間（以毫秒（ms）為單位）。
自定義漸變顏色和位置。
根據畫布的位置，來源，縮放比例等進行影象客製化。
包括的其他選項包括設定回撥，發出事件，漸變控制方法等。

用例：

使用3種2種顏色的漸變來建立基本的漸變動畫。
使用2種具有3種顏色的漸變的複雜漸變動畫。
使用一種背景影象，兩種顏色和一種混合模式對漸變進行動畫處理。
使用一個影象蒙版在特定形狀下建立漸變動畫。
建立響應事件的漸變動畫。

15、fullPage.js

開源JS庫fullPage.js可以幫助您輕鬆建立全螢幕捲動網站或一頁網站。它使用簡單，也可以在站點部分內新增橫向滾軸。

特點與優勢：

提供多種自定義和設定選項。
支援JavaScript框架，例如react-fullpage，angular-fullpage和vue-fullpage。
啟用垂直和水平捲動。
適應性設計，適合不同大小的螢幕以及多種瀏覽器。
頁面載入時自動捲動。
視訊/影象延遲載入。

用例：

使用許多擴充套件來改善預設功能。
建立全螢幕捲動站點。
建立一個單頁網站。

16、Leaflet

Leaflet是最好的JavaScript庫之一，可用於將互動式地圖包括到您的站點中。它是開源的且適合移動裝置，重約39kb。WordPress的MapPress Maps外掛使用Leaflet為其互動式地圖提供動力。

特點與優勢：

提供效能功能，例如移動硬體加速和CSS功能。
獨特的圖層，包括平鋪圖層，彈出視窗，標記，向量圖層，GeoJSON和影象疊加層。
互動功能，包括拖動平移，縮放，鍵盤導航，事件等。
地圖控制元件，例如圖層切換器，屬性，比例和縮放按鈕。
支援瀏覽器，例如Chrome，Safari，Firefox，Edge等。
客製化，包括OOP設施，基於HTML和影象的標記，CSS3控制元件和彈出視窗。

用例：

通過更好的縮放和平移，智慧的多邊形/折線渲染，模組化構建以及點選延遲移動動畫，將地圖新增到您的站點。

17、Multiple.js

Multiple.js使用CSS或HTML無需JavaScript座標處理，即可在各種元素之間共用背景影象。

結果，它產生了驚人的視覺效果，以增加更多的使用者互動。

18、Moment.js

當使用不同的時區，API呼叫本地語言等時，Moment.js可幫助您有效地管理時間和日期。

您可以通過驗證，解析，格式化或操作日期和時間來簡化它們。

19、Masonry

Masonry是一個很棒的JS網格佈局庫。該庫可幫助您根據可用的垂直空間將網格元素放置在合適的位置。一些流行的畫廊WordPress外掛甚至使用了它。

20、Omniscient

Omniscient.js是一個JS庫，可提供React元件抽象以實現包含不可變資料的自上而下的快速渲染。

該庫可以優化您的專案並提供有趣的功能，從而幫助您無縫構建專案。

21、Parsley

您要向專案新增表單嗎？

如果是的話，Parsley對您可能會有用。它是一個簡單但功能強大的JS庫，可用於驗證表單。

22、Popper.js

建立Popper.js的目的是使放置彈出式選單，下拉式選單，工具提示和其他上下文元素（更靠近按鈕或其他類似元素）更容易。

Popper提供了一種很好的方式來排列它們，將它們貼上到其他站點元素上，並使它們能夠在任何螢幕尺寸上無縫播放。

23、Three.js

Three.js可以使您的3D設計令人愉悅。它使用WebGL在現代瀏覽器上渲染場景。如果您使用的是IE 10及更低版本，請使用其他CSS3，CSS2和SVH渲染器。

24、Screenfull.js

使用Screenfull.js將全螢幕元素新增到您的專案中。由於其令人印象深刻的跨瀏覽器效率，因此使用此JavaScript庫不會遇到麻煩。

25、Polymer

Google開源JavaScript庫 – Polymer，用於使用元件構建Web應用程式。

26、VOCA

建立Voca背後的想法是減輕使用JavaScript字串時的痛苦。它帶有有用的功能，可以輕鬆地操作字串，例如更改大小寫，填充，修剪，截斷等等。

【相關推薦：】

以上就是javascript有哪些庫的詳細內容，更多請關注TW511.COM其它相關文章！