您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“javascript庫(kù)是什么及有哪些庫(kù)”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
javascript庫(kù)有:jQuery、React、“D3.js”、Underscore、Lodash、Algolia Places、“Anime.js”、Animate On Scroll、“Bideo.js”、“Chart.js”等等。
本教程操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
什么是JavaScript庫(kù)?
JavaScript庫(kù)包含各種功能,方法或?qū)ο螅栽诰W(wǎng)頁或基于JS的應(yīng)用程序上執(zhí)行實(shí)際任務(wù)。您甚至可以使用它們構(gòu)建一個(gè)WordPress網(wǎng)站。
可以將它們視為一個(gè)圖書庫(kù),您可以在其中重新閱讀自己喜歡的書。您可能是一位作家,并且喜歡其他作家的書,獲得新的觀點(diǎn)或創(chuàng)新,并在生活中加以利用。
同樣,JavaScript庫(kù)具有開發(fā)人員可以重復(fù)使用和稍加改動(dòng)可用的代碼或功能。開發(fā)人員編寫JS庫(kù)代碼,其他開發(fā)人員重復(fù)使用相同的代碼來執(zhí)行某些任務(wù),例如準(zhǔn)備幻燈片,而不是從頭開始編寫。這為他們節(jié)省了大量時(shí)間和精力。
它們恰恰是創(chuàng)建JavaScript庫(kù)的動(dòng)機(jī),這就是為什么您可以在多個(gè)用例中找到數(shù)十個(gè)它們的原因。它們不僅可以節(jié)省您的時(shí)間,而且可以簡(jiǎn)化整個(gè)開發(fā)過程。
如何使用JavaScript庫(kù)
要在您的應(yīng)用中使用JavaScript庫(kù),請(qǐng)使用src引用庫(kù)源路徑或URL的屬性將其添加<script>到<head>元素中。
分享一些javascript庫(kù)
1、jQuery
jQuery是一個(gè)經(jīng)典的JavaScript庫(kù),具備快速,輕巧和功能豐富的特點(diǎn)。它由BarCamp NYC的John Resig于2006年建造。jQuery具有MIT許可的免費(fèi)開源軟件。
它使HTML文檔的操作和遍歷,動(dòng)畫,事件處理以及Ajax變得更加簡(jiǎn)單。
特點(diǎn)與優(yōu)勢(shì):
它具備易于使用的簡(jiǎn)約API。
它在處理樣式屬性和查找元素時(shí)使用CSS3選擇器。
jQuery是輕量級(jí)的,gzip和壓縮只需30kb,并支持AMD模塊。
由于其語法與CSS非常相似,也就是便于初學(xué)者學(xué)習(xí)。
可通過插件擴(kuò)展。
具有支持多種瀏覽器(包括Chrome和Firefox)的API的多功能性。
用例:
使用CSS選擇器的DOM操作,這些選擇器使用某些條件來選擇DOM中的節(jié)點(diǎn)。這些條件包括元素名稱及其屬性(如類和ID)。
使用Sizzle(開放源代碼,多瀏覽器選擇器引擎)在DOM中選擇元素。
創(chuàng)建效果,事件和動(dòng)畫。
JSON解析。
Ajax應(yīng)用程序開發(fā)。
特征檢測(cè)。
用Promise和Deferred對(duì)象控制異步處理。
2、React.js
React.js(也稱為ReactJS或React)是一個(gè)開放源代碼的前端JavaScript庫(kù)。它由曾在Facebook擔(dān)任軟件工程師Jordan Walke于2013年創(chuàng)建。
現(xiàn)在,它使用的是MIT許可證,但最初是根據(jù)Apache License 2.0發(fā)布的。React旨在使交互式UI的創(chuàng)建變得輕松自如。
只需為您的應(yīng)用中的各個(gè)狀態(tài)設(shè)計(jì)一個(gè)簡(jiǎn)單的視圖。接下來,它將根據(jù)數(shù)據(jù)更改有效地渲染和更新正確的組件。
特點(diǎn)與優(yōu)勢(shì):
React代碼包含需要在React DOM庫(kù)的幫助下渲染為DOM中特定元素的組件或?qū)嶓w。
它通過在數(shù)據(jù)結(jié)構(gòu)中創(chuàng)建內(nèi)存中的緩存,計(jì)算差異并有效地更新瀏覽器中的顯示DOM來使用虛擬DOM。
由于這種選擇性渲染,因此應(yīng)用程序性能得以提高,同時(shí)節(jié)省了開發(fā)人員重新計(jì)算頁面布局,CSS樣式和全頁面渲染的工作量。
它使用諸如render和componentDidMount之類的生命周期方法,以允許在實(shí)體生命周期中的特定點(diǎn)執(zhí)行代碼。
它支持結(jié)合了JS和HTML的JavaScript XML(JSX)。它有助于使用嵌套的元素,屬性,JS表達(dá)式和條件語句進(jìn)行組件渲染。
用例:
在開發(fā)移動(dòng)或單頁應(yīng)用程序時(shí)用作基礎(chǔ)。
將狀態(tài)呈現(xiàn)給DOM并進(jìn)行管理。
在開發(fā)Web應(yīng)用程序和交互式站點(diǎn)時(shí),構(gòu)建有效的用戶界面。
調(diào)試和測(cè)試更加容易。
眾所周知,F(xiàn)acebook,Instagram和Whatsapp都使用React。
3、D3.js
Data-Driven Documents(簡(jiǎn)稱為D3)或D3.js是另一個(gè)著名的JS庫(kù),開發(fā)人員可以使用它來對(duì)基于數(shù)據(jù)的文檔進(jìn)行操作。于2011年發(fā)布,使用的是BSD許可。
特點(diǎn)與優(yōu)勢(shì):
它強(qiáng)調(diào)Web標(biāo)準(zhǔn),并為您提供現(xiàn)代的瀏覽器功能,而不僅限于一個(gè)框架。
D3.js支持強(qiáng)大的數(shù)據(jù)可視化。
它支持HTML,CSS和SVG。
采用數(shù)據(jù)驅(qū)動(dòng)的方法,并將其應(yīng)用于操縱DOM。
D3.js速度很快,并支持多種動(dòng)態(tài)行為以及用于動(dòng)畫和交互的數(shù)據(jù)集。
它減少了開銷,從而允許在高幀速率下實(shí)現(xiàn)更大的圖形復(fù)雜度。
用例:
產(chǎn)生交互式和動(dòng)態(tài)數(shù)據(jù)可視化。
將數(shù)據(jù)綁定到DOM并對(duì)其執(zhí)行數(shù)據(jù)驅(qū)動(dòng)的轉(zhuǎn)換。例如,您可以從數(shù)字?jǐn)?shù)組中生成HTML表格,然后使用D3.js創(chuàng)建SVG條形圖或3D表面圖。
它的功能代碼使其可與大量模塊一起重用。
D3提供了多種模式來改變節(jié)點(diǎn),例如通過采用聲明性方法,添加,排序或刪除節(jié)點(diǎn),更改文本或HTML內(nèi)容等來更改樣式或?qū)傩浴?/p>
要?jiǎng)?chuàng)建動(dòng)畫過渡,請(qǐng)通過事件對(duì)復(fù)雜過渡進(jìn)行排序,執(zhí)行CSS3過渡等。
4、Underscore.js
Underscore是一個(gè)JavaScript實(shí)用程序庫(kù),可為典型的編程任務(wù)提供各種功能。它是由Jeremy Askenas于2009年創(chuàng)建的,并獲得了MIT許可?,F(xiàn)在,Lodash已經(jīng)超越了它。
特點(diǎn)與優(yōu)勢(shì):
它的功能類似于Prototype.js(另一個(gè)流行的實(shí)用程序庫(kù)),但是Underscore具有功能編程設(shè)計(jì),而不是對(duì)象原型擴(kuò)展。
根據(jù)它們操作的數(shù)據(jù)類型,它具有4種不同類型的100多種功能。這些是要操縱的功能:
對(duì)象
數(shù)組
對(duì)象和數(shù)組
其他功能
Underscore與Chrome,F(xiàn)irefox,Edge等兼容。
用例:
它支持諸如過濾器,地圖等功能性助手,以及諸如綁定,快速索引,JavaScript模板,質(zhì)量測(cè)試等特殊功能。
5、Lodash
Lodash還是一個(gè)JS實(shí)用程序庫(kù),可以更輕松地使用數(shù)字,數(shù)組,字符串,對(duì)象等。它于2013年發(fā)布,還使用了功能編程設(shè)計(jì),例如Underscore.js。
特點(diǎn)與優(yōu)勢(shì):
可以幫助您編寫可維護(hù)的簡(jiǎn)潔JavaScript代碼。
簡(jiǎn)化了常見的任務(wù),例如數(shù)學(xué)運(yùn)算,綁定事件,函數(shù)節(jié)流,修飾器,約束限制,去抖動(dòng)等。
修剪,駝峰和大寫等字符串函數(shù)都變得更加簡(jiǎn)單。
創(chuàng)建,修改,壓縮和排序數(shù)組。
對(duì)集合,對(duì)象和序列的其他操作。
用例:
它的模塊化方法可以幫助您:
迭代數(shù)組,字符串和對(duì)象。
制作復(fù)合功能。
操作和測(cè)試值。
6、Algolia Places
Algolia Places是一個(gè)JavaScript庫(kù),它提供了一種在站點(diǎn)上使用地址自動(dòng)填寫功能的簡(jiǎn)便且分布式的方法。這是一種非??焖偾揖_的工具,可以幫助您提高站點(diǎn)用戶的體驗(yàn)。Algolia Places利用OpenStreetMap令人印象深刻的開源數(shù)據(jù)庫(kù)來覆蓋全球各地。
例如,您可以使用它來提高產(chǎn)品頁面的轉(zhuǎn)化率。
特點(diǎn)與優(yōu)勢(shì):
通過同時(shí)填充多個(gè)輸入,它簡(jiǎn)化了結(jié)帳流程。
您可以輕松使用國(guó)家或城市選擇器。
您可以通過在地圖上實(shí)時(shí)顯示鏈接建議來快速查看結(jié)果。
Algolia Places可以處理鍵入錯(cuò)誤并相應(yīng)顯示結(jié)果。
通過將所有查詢自動(dòng)路由到最接近的服務(wù)器,它可以在幾毫秒內(nèi)提供結(jié)果。
用例:
允許您合并地圖以顯示非常有用的特定位置。
它使您可以有效地使用表單。
7、Anime.js
如果要向站點(diǎn)或應(yīng)用程序添加動(dòng)畫,Anime.js是您可以找到的最好的JavaScript庫(kù)之一。它于2019年發(fā)布,輕量級(jí)且具備強(qiáng)大而簡(jiǎn)單的API。
特點(diǎn)與優(yōu)勢(shì):
Anime.js與DOM屬性,CSS屬性,SVG,CSS轉(zhuǎn)換和JS對(duì)象一起運(yùn)行。
可與各種瀏覽器一起使用,例如Chrome,Safari,F(xiàn)irefox,Opera等。
它的源代碼可以輕松解密和使用。
復(fù)雜的動(dòng)畫方法(例如重疊和交錯(cuò)跟隨)變得更加容易。
用例:
您可以在屬性和時(shí)間上使用Anime.js的交錯(cuò)系統(tǒng)。
在一個(gè)HTML元素上同時(shí)創(chuàng)建具有多個(gè)定時(shí)的分層CSS轉(zhuǎn)換。
使用Anime.js回調(diào)和控件功能以同步方式播放,暫停,觸發(fā),倒退和控制事件。
8、Animate On Scroll (AOS)
Animate On Scroll非常適合單頁視差網(wǎng)站。這個(gè)JS庫(kù)是完全開源的,可以幫助您在頁面上添加不錯(cuò)的動(dòng)畫,當(dāng)您上下滾動(dòng)時(shí),它們看起來很漂亮。
通過幫助您添加淡入淡出效果,靜態(tài)錨點(diǎn)位置等來提升網(wǎng)站設(shè)計(jì)感和增強(qiáng)用戶滿意度。
特點(diǎn)與優(yōu)勢(shì):
該庫(kù)可以檢測(cè)元素位置,并在它們出現(xiàn)在視口中時(shí)添加合適的類。
除了輕松添加動(dòng)畫外,它還可以幫助您在視口中進(jìn)行更改。
它可以在不同的設(shè)備上無縫運(yùn)行,無論是手機(jī),平板電腦還是計(jì)算機(jī),
由于它是用純JavaScript編寫的,因此沒有依賴關(guān)系。
用例:
根據(jù)另一個(gè)元素的位置對(duì)元素進(jìn)行動(dòng)畫處理。
根據(jù)其屏幕位置對(duì)元素進(jìn)行動(dòng)畫處理。
在手機(jī)上禁用元素動(dòng)畫。
創(chuàng)建不同的動(dòng)畫,例如淡入淡出,翻轉(zhuǎn),滑動(dòng),縮放,錨點(diǎn)放置等。
9、Bideo.js
您想將全屏視頻納入網(wǎng)站的背景嗎?試試Bideo.js。
特點(diǎn)與優(yōu)勢(shì):
使用此JavaScript庫(kù),添加視頻背景非常容易。
此功能在不同比例和大小的屏幕上看起來很酷,并且可以正常工作。
添加的視頻可以根據(jù)使用的瀏覽器調(diào)整大小。
易于使用CSS / HTML實(shí)施。
用例:
在網(wǎng)站上添加響應(yīng)式全屏背景視頻。
10、Chart.js
您的網(wǎng)站或項(xiàng)目與數(shù)據(jù)分析領(lǐng)域相關(guān)嗎?
您是否需要提供大量統(tǒng)計(jì)數(shù)據(jù)?
Chart.js是一個(gè)出色的JavaScript庫(kù)。
Chart.js是面向設(shè)計(jì)人員和開發(fā)人員的靈活,簡(jiǎn)單的庫(kù),他們可以立即在其項(xiàng)目中添加精美的圖表。該JS庫(kù)是開源且提供MIT許可證。
特點(diǎn)與優(yōu)勢(shì):
優(yōu)雅,簡(jiǎn)單,可添加基本圖表。
產(chǎn)生響應(yīng)式網(wǎng)頁。
重量輕,易于學(xué)習(xí)和實(shí)施。
8種不同類型的圖表。
非常適合初學(xué)者。
動(dòng)畫功能使頁面更具交互性。
用例:
在混合圖表類型的幫助下使用不同的數(shù)據(jù)集時(shí),提供清晰的視覺表示。
以對(duì)數(shù),日期,時(shí)間或自定義比例繪制稀疏和復(fù)雜的數(shù)據(jù)集。
11、Cleave.js
如果您想格式化文本內(nèi)容,Cleave.js提供了一個(gè)有趣的解決方案。它的創(chuàng)建旨在通過格式化鍵入的數(shù)據(jù)來提供一種更簡(jiǎn)單的方法來提高輸入字段的可讀性。
這樣,您不再需要掩蓋模式或編寫正則表達(dá)式來格式化文本。
特點(diǎn)與優(yōu)勢(shì):
通過表單提交的一致數(shù)據(jù)來提高用戶體驗(yàn)。
您可以對(duì)信用卡號(hào),電話號(hào)碼,日期,時(shí)間和數(shù)字執(zhí)行不同的格式化類型。
格式化自定義塊,前綴和定界符。
支持ReactJS組件,以及更多。
用例:
使用CSS選擇器將cleave.js實(shí)現(xiàn)為多個(gè)DOM元素。
更新特定的原始值。
獲取文本字段的引用。
在Vue.js,jQuery和Playground中,它與Redux表單一起使用。
12、Choreographer.js
使用Chreographer.js有效地對(duì)復(fù)雜CSS進(jìn)行動(dòng)畫處理。它甚至可以添加更多可用于非CSS動(dòng)畫的自定義功能。
要使用此JavaScript庫(kù),請(qǐng)通過npm安裝其軟件包或添加其腳本文件。
特點(diǎn)與優(yōu)勢(shì):
它的Animation類管理單個(gè)動(dòng)畫數(shù)據(jù)。
animationConfig對(duì)象配置每個(gè)動(dòng)畫實(shí)例。
包括2個(gè)內(nèi)置的動(dòng)畫功能“更改”和“縮放”。
“比例”用于將逐步測(cè)量的值映射到節(jié)點(diǎn)的樣式屬性。
“更改”刪除或添加樣式屬性。
用例:
執(zhí)行即時(shí)滾動(dòng)動(dòng)畫。
根據(jù)鼠標(biāo)移動(dòng)創(chuàng)建動(dòng)畫。
13、Glimmer
Glimmer于2017年發(fā)布,具有輕量級(jí)和快速的UI組件。它使用了功能強(qiáng)大的Ember CLI,并且可以將EmberJS作為組件使用。
特點(diǎn)與優(yōu)勢(shì):
Glimmer是一個(gè)快速的DOM渲染引擎,可以為渲染和更新提供令人難以置信的性能。
它是多功能的,可以與您當(dāng)前的技術(shù)堆棧一起使用,而無需您重寫代碼。
用例:
您可以將其用作獨(dú)立組件,也可以將其添加為現(xiàn)有應(yīng)用程序中的Web組件。
DOM渲染。
它可以幫助您區(qū)分靜態(tài)內(nèi)容和動(dòng)態(tài)內(nèi)容。
當(dāng)您需要Ember的功能但包裝更輕時(shí),請(qǐng)使用Glimmer。
14、Granim.js
Granim.js是一個(gè)JS庫(kù),可幫助您創(chuàng)建流暢的交互式漸變動(dòng)畫。這樣,您可以使您的網(wǎng)站在彩色背景中脫穎而出。
特點(diǎn)與優(yōu)勢(shì):
漸變可以覆蓋圖像,獨(dú)立工作,在圖像蒙版下滑動(dòng)等。
您可以使用百分比或像素值來自定義漸變方向。
將漸變方向設(shè)置為對(duì)角線,上下,左右,徑向或自定義。
設(shè)置狀態(tài)變化的動(dòng)畫持續(xù)時(shí)間(以毫秒(ms)為單位)。
自定義漸變顏色和位置。
根據(jù)畫布的位置,來源,縮放比例等進(jìn)行圖像定制。
包括的其他選項(xiàng)包括設(shè)置回調(diào),發(fā)出事件,漸變控制方法等。
用例:
使用3種2種顏色的漸變來創(chuàng)建基本的漸變動(dòng)畫。
使用2種具有3種顏色的漸變的復(fù)雜漸變動(dòng)畫。
使用一種背景圖像,兩種顏色和一種混合模式對(duì)漸變進(jìn)行動(dòng)畫處理。
使用一個(gè)圖像蒙版在特定形狀下創(chuàng)建漸變動(dòng)畫。
創(chuàng)建響應(yīng)事件的漸變動(dòng)畫。
15、fullPage.js
開源JS庫(kù)fullPage.js可以幫助您輕松創(chuàng)建全屏滾動(dòng)網(wǎng)站或一頁網(wǎng)站。它使用簡(jiǎn)單,也可以在站點(diǎn)部分內(nèi)添加橫向滑塊。
特點(diǎn)與優(yōu)勢(shì):
提供多種自定義和配置選項(xiàng)。
支持JavaScript框架,例如react-fullpage,angular-fullpage和vue-fullpage。
啟用垂直和水平滾動(dòng)。
適應(yīng)性設(shè)計(jì),適合不同大小的屏幕以及多種瀏覽器。
頁面加載時(shí)自動(dòng)滾動(dòng)。
視頻/圖像延遲加載。
用例:
使用許多擴(kuò)展來改善默認(rèn)功能。
創(chuàng)建全屏滾動(dòng)站點(diǎn)。
建立一個(gè)單頁網(wǎng)站。
16、Leaflet
Leaflet是最好的JavaScript庫(kù)之一,可用于將交互式地圖包括到您的站點(diǎn)中。它是開源的且適合移動(dòng)設(shè)備,重約39kb。WordPress的MapPress Maps插件使用Leaflet為其交互式地圖提供動(dòng)力。
特點(diǎn)與優(yōu)勢(shì):
提供性能功能,例如移動(dòng)硬件加速和CSS功能。
獨(dú)特的圖層,包括平鋪圖層,彈出窗口,標(biāo)記,矢量圖層,GeoJSON和圖像疊加層。
交互功能,包括拖動(dòng)平移,縮放,鍵盤導(dǎo)航,事件等。
地圖控件,例如圖層切換器,屬性,比例和縮放按鈕。
支持瀏覽器,例如Chrome,Safari,F(xiàn)irefox,Edge等。
定制,包括OOP設(shè)施,基于HTML和圖像的標(biāo)記,CSS3控件和彈出窗口。
用例:
通過更好的縮放和平移,智能的多邊形/折線渲染,模塊化構(gòu)建以及點(diǎn)擊延遲移動(dòng)動(dòng)畫,將地圖添加到您的站點(diǎn)。
17、Multiple.js
Multiple.js使用CSS或HTML無需JavaScript坐標(biāo)處理,即可在各種元素之間共享背景圖像。
結(jié)果,它產(chǎn)生了驚人的視覺效果,以增加更多的用戶交互。
18、Moment.js
當(dāng)使用不同的時(shí)區(qū),API調(diào)用本地語言等時(shí),Moment.js可幫助您有效地管理時(shí)間和日期。
您可以通過驗(yàn)證,解析,格式化或操作日期和時(shí)間來簡(jiǎn)化它們。
19、Masonry
Masonry是一個(gè)很棒的JS網(wǎng)格布局庫(kù)。該庫(kù)可幫助您根據(jù)可用的垂直空間將網(wǎng)格元素放置在合適的位置。一些流行的畫廊WordPress插件甚至使用了它。
20、Omniscient
Omniscient.js是一個(gè)JS庫(kù),可提供React組件抽象以實(shí)現(xiàn)包含不可變數(shù)據(jù)的自上而下的快速渲染。
該庫(kù)可以優(yōu)化您的項(xiàng)目并提供有趣的功能,從而幫助您無縫構(gòu)建項(xiàng)目。
21、Parsley
您要向項(xiàng)目添加表單嗎?
如果是的話,Parsley對(duì)您可能會(huì)有用。它是一個(gè)簡(jiǎn)單但功能強(qiáng)大的JS庫(kù),可用于驗(yàn)證表單。
22、Popper.js
創(chuàng)建Popper.js的目的是使放置彈出式菜單,下拉菜單,工具提示和其他上下文元素(更靠近按鈕或其他類似元素)更容易。
Popper提供了一種很好的方式來排列它們,將它們粘貼到其他站點(diǎn)元素上,并使它們能夠在任何屏幕尺寸上無縫播放。
23、Three.js
Three.js可以使您的3D設(shè)計(jì)令人愉悅。它使用WebGL在現(xiàn)代瀏覽器上渲染場(chǎng)景。如果您使用的是IE 10及更低版本,請(qǐng)使用其他CSS3,CSS2和SVH渲染器。
24、Screenfull.js
使用Screenfull.js將全屏元素添加到您的項(xiàng)目中。由于其令人印象深刻的跨瀏覽器效率,因此使用此JavaScript庫(kù)不會(huì)遇到麻煩。
25、Polymer
Google開源JavaScript庫(kù) – Polymer,用于使用組件構(gòu)建Web應(yīng)用程序。
26、VOCA
創(chuàng)建Voca背后的想法是減輕使用JavaScript字符串時(shí)的痛苦。它帶有有用的功能,可以輕松地操作字符串,例如更改大小寫,填充,修剪,截?cái)嗟鹊取?/p>
“javascript庫(kù)是什么及有哪些庫(kù)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。