JavaScript庫和框架具有廣泛的特性和功能，從而使網站和應用程式的開發更加容易，這一切都要歸功於JavaScript的動態，靈活和強大的功能。根據2020年StackOverflow的一項調查，JavaScript仍然是最常用的程式語言（第8年），有67.7％的受訪者使用它。
除了測試之外，它的多功能性還有利於後端和前端開發。您可以找到許多服務於各種目的的JavaScript庫和框架。因此，在為他們的專案選擇合適的JS庫或者框架時，這可能會使開發人員感到困惑。
本文將介紹40個JavaScript庫和框架，以及它們的功能，優勢和用例。希望為你解惑，找到最合適您的專案的JS框架和庫。
- 什麼是JavaScript庫？
- 最受歡迎的JavaScript庫
- 什麼是JavaScript框架?
- 最受歡迎的JavaScript框架
- 一些有用的JavaScript工具
- JavaScript庫和框架如何協同工作
什麼是JavaScript庫？
JavaScript庫包含各種功能，方法或物件，以在網頁或基於JS的應用程式上執行實際任務。您甚至可以使用它們構建一個WordPress網站。
可以將它們視為一個圖書庫，您可以在其中重新閱讀自己喜歡的書。您可能是一位作家，並且喜歡其他作家的書，獲得新的觀點或創新，並在生活中加以利用。
同樣，JavaScript庫具有開發人員可以重複使用和稍加改動可用的程式碼或功能。開發人員編寫JS庫程式碼，其他開發人員重複使用相同的程式碼來執行某些任務，例如準備幻燈片，而不是從頭開始編寫。這為他們節省了大量時間和精力。
它們恰恰是建立JavaScript庫的動機，這就是為什麼您可以在多個用例中找到數十個它們的原因。它們不僅可以節省您的時間，而且可以簡化整個開發過程。
如何使用JavaScript庫
要在您的應用中使用JavaScript庫，請使用src引用庫源路徑或URL的屬性將其新增<script>到<head>元素中。
閱讀您打算使用的JavaScript庫的文件以獲取更多資訊，並按照此處提供的步驟進行操作。
JavaScript庫有什麼用？
如前所述，JavaScript庫用於執行特定功能。它們大約有83個，每個都是為實現特定目的而建立的，我們將在本節中介紹它們的某些可用性。
您可以將JavaScript庫用於：
- 地圖和圖表的資料視覺化
應用程式中的資料視覺化對於使用者在管理面板，儀表盤，效能指標等中清晰地檢視統計資料至關重要。
在圖表和地圖中顯示這些資料可幫助您輕鬆分析該資料並做出明智的業務決策。
範例： Chart.js，Apexcharts，Algolia Places
- DOM操作
文件物件模型（DOM）將網頁（文件）表示為可以使用JavaScript修改的物件和節點。您可以更改其內容，樣式和結構。
示例： jQuery，Umbrella JS
- 資料處理
隨著企業現在每天處理的海量資料，正確處理和管理它們至關重要。使用JavaScript庫可以更輕鬆地根據內容處理文件，同時增加互動性。
範例： D3.js
- 資料庫
要讀取，建立，刪除，編輯和排序資料，必須進行有效的資料庫管理。您還可以使用複雜的查詢，自動建立表，同步和驗證資料等等。
示例： TaffyDB，ActiveRecord.js
- 表單
使用JS庫簡化表單功能，包括表單驗證，同步，處理，條件功能，欄位控制元件，轉換佈局等。
示例： wForms，LiveValidation，Validanguage，qForms
- 動畫
人們喜歡動畫，您可以利用它們使您的網頁更具互動性和吸引力。通過使用JavaScript庫，新增微互動和動畫很容易。
示例： Anime.js，JSTweener
- 圖片效果
使用者可以使用JS庫為影象新增效果並使它們脫穎而出。效果包括模糊，變亮，浮雕，銳化，灰度，飽和度，色相，調整對比度，翻轉，反轉，反射等。為WordPress圖片增加滑鼠懸停效果一文中，所介紹的外掛就是利用JS庫實現新增圖片效果。
示例： ImageFX，Reflection.js
- 字型
使用者可以根據自己的內容型別新增任何字型，以使其網頁更具吸引力。
示例： typeface.js
- 數學和字串函式
新增數學表示式，日期，時間和字串可能很棘手。例如，日期包含許多格式，斜槓和點，使您的事情變得複雜。關於矩陣和向量，也是如此。
除了輕鬆地處理和處理URL外，使用JavaScript庫還可以簡化這些複雜性。
示例： Date.js，Sylvester，JavaScript URL庫
- 使用者介面及其元件
通過使網頁更具響應性和動態性，減少DOM運算元，提高頁面速度等，可以通過網頁提供更好的使用者體驗。
示例： ReactJS，Glimmer.js
這些只是最常見的用例。JavaScript庫的其他用途包括：
- 建立一個自定義對話方塊
- 建立鍵盤快捷鍵
- 交換平臺
- 建立圓角
- 影響資料檢索/ AJAX
- 對齊頁面佈局
- 建立導航和路由
- 記錄和除錯
- 很多很多。
最受歡迎的JavaScript庫
jQuery
jQuery是一個經典的JavaScript庫，具備快速，輕巧和功能豐富的特點。它由BarCamp NYC的John Resig於2006年建造。jQuery具有MIT許可的免費開源軟體。
它使HTML文件的操作和遍歷，動畫，事件處理以及Ajax變得更加簡單。
根據W3Techs的統計，截至2021年2月23日，所有網站中有77.6％使用jQuery。
jQuery庫
特點與優勢：
- 它具備易於使用的簡約API。
- 它在處理樣式屬性和查詢元素時使用CSS3選擇器。
- jQuery是輕量級的，gzip和壓縮只需30kb，並支援AMD模組。
- 由於其語法與CSS非常相似，也就是便於初學者學習。
- 可通過外掛擴充套件。
- 具有支援多種瀏覽器（包括Chrome和Firefox）的API的多功能性。
用例：
- 使用CSS選擇器的DOM操作，這些選擇器使用某些條件來選擇DOM中的節點。這些條件包括元素名稱及其屬性（如類和ID）。
- 使用Sizzle（開放原始碼，多瀏覽器選擇器引擎）在DOM中選擇元素。
- 建立效果，事件和動畫。
- JSON解析。
- Ajax應用程式開發。
- 特徵檢測。
- 用Promise和Deferred物件控制非同步處理。
React.js
React.js（也稱為ReactJS或React）是一個開放原始碼的前端JavaScript庫。它由曾在Facebook擔任軟體工程師Jordan Walke於2013年建立。
現在，它使用的是MIT許可證，但最初是根據Apache License 2.0釋出的。React旨在使互動式UI的建立變得輕鬆自如。
只需為您的應用中的各個狀態設計一個簡單的檢視。接下來，它將根據資料更改有效地渲染和更新正確的元件。
React庫
特點與優勢：
- React程式碼包含需要在React DOM庫的幫助下渲染為DOM中特定元素的元件或實體。
- 它通過在資料結構中建立記憶體中的快取，計算差異並有效地更新瀏覽器中的顯示DOM來使用虛擬DOM。
- 由於這種選擇性渲染，因此應用程式效能得以提高，同時節省了開發人員重新計算頁面佈局，CSS樣式和全頁面渲染的工作量。
- 它使用諸如render和componentDidMount之類的生命週期方法，以允許在實體生命週期中的特定點執行程式碼。
- 它支援結合了JS和HTML的JavaScript XML（JSX）。它有助於使用巢狀的元素，屬性，JS表示式和條件語句進行元件渲染。
用例：
- 在開發移動或單頁應用程式時用作基礎。
- 將狀態呈現給DOM並進行管理。
- 在開發Web應用程式和互動式站點時，構建有效的使用者介面。
- 除錯和測試更加容易。
眾所周知，Facebook，Instagram和Whatsapp都使用React。
D3.js
Data-Driven Documents（簡稱為D3）或D3.js是另一個著名的JS庫，開發人員可以使用它來對基於資料的文件進行操作。於2011年釋出，使用的是BSD許可。
D3.js庫
特點與優勢：
- 它強調Web標準，併為您提供現代的瀏覽器功能，而不僅限於一個框架。
- D3.js支援強大的資料視覺化。
- 它支援HTML，CSS和SVG。
- 採用資料驅動的方法，並將其應用於操縱DOM。
- D3.js速度很快，並支援多種動態行為以及用於動畫和互動的資料集。
- 它減少了開銷，從而允許在高幀速率下實現更大的圖形複雜度。
用例：
- 產生互動式和動態資料視覺化。
- 將資料繫結到DOM並對其執行資料驅動的轉換。例如，您可以從數字陣列中生成HTML表格，然後使用D3.js建立SVG條形圖或3D表面圖。
- 它的功能程式碼使其可與大量模組一起重用。
- D3提供了多種模式來改變節點，例如通過採用宣告性方法，新增，排序或刪除節點，更改文字或HTML內容等來更改樣式或屬性。
- 要建立動畫過渡，請通過事件對複雜過渡進行排序，執行CSS3過渡等。
Underscore.js
Underscore是一個JavaScript實用程式庫，可為典型的程式設計任務提供各種功能。它是由Jeremy Askenas於2009年建立的，並獲得了MIT許可。現在，Lodash已經超越了它。
Underscore庫
特點與優勢：
- 它的功能類似於Prototype.js（另一個流行的實用程式庫），但是Underscore具有功能程式設計設計，而不是物件原型擴充套件。
- 根據它們操作的資料型別，它具有4種不同型別的100多種功能。這些是要操縱的功能：
-
- 物件
- 陣列
- 物件和陣列
- 其他功能
- Underscore與Chrome，Firefox，Edge等相容。
用例：
它支援諸如過濾器，地圖等功能性助手，以及諸如繫結，快速索引，JavaScript模板，質量測試等特殊功能。
Lodash
Lodash還是一個JS實用程式庫，可以更輕鬆地使用數字，陣列，字串，物件等。它於2013年釋出，還使用了功能程式設計設計，例如Underscore.js。
Lodash庫
特點與優勢：
- 可以幫助您編寫可維護的簡潔JavaScript程式碼。
- 簡化了常見的任務，例如數學運算，繫結事件，函式節流，修飾器，約束限制，去抖動等。
- 修剪，駝峰和大寫等字串函式都變得更加簡單。
- 建立，修改，壓縮和排序陣列。
- 對集合，物件和序列的其他操作。
用例：
它的模組化方法可以幫助您：
- 迭代陣列，字串和物件。
- 製作複合功能。
- 操作和測試值。
Algolia Places
Algolia Places是一個JavaScript庫，它提供了一種在站點上使用地址自動填寫功能的簡便且分散式的方法。這是一種非常快速且精確的工具，可以幫助您提高站點使用者的體驗。Algolia Places利用OpenStreetMap令人印象深刻的開源資料庫來覆蓋全球各地。
例如，您可以使用它來提高產品頁面的轉化率。
Algolia Places庫
特點與優勢：
- 通過同時填充多個輸入，它簡化了結帳流程。
- 您可以輕鬆使用國家或城市選擇器。
- 您可以通過在地圖上實時顯示連結建議來快速檢視結果。
- Algolia Places可以處理鍵入錯誤並相應顯示結果。
- 通過將所有查詢自動路由到最接近的伺服器，它可以在幾毫秒內提供結果。
用例：
- 允許您合併地圖以顯示非常有用的特定位置。
- 它使您可以有效地使用表單。
Anime.js
如果要向站點或應用程式新增動畫，Anime.js是您可以找到的最好的JavaScript庫之一。它於2019年釋出，輕量級且具備強大而簡單的API。
Anime.js庫
特點與優勢：
- Anime.js與DOM屬性，CSS屬性，SVG，CSS轉換和JS物件一起執行。
- 可與各種瀏覽器一起使用，例如Chrome，Safari，Firefox，Opera等。
- 它的原始碼可以輕鬆解密和使用。
- 複雜的動畫方法（例如重疊和交錯跟隨）變得更加容易。
用例：
- 您可以在屬性和時間上使用Anime.js的交錯系統。
- 在一個HTML元素上同時建立具有多個定時的分層CSS轉換。
- 使用Anime.js回撥和控制元件功能以同步方式播放，暫停，觸發，倒退和控制事件。
Animate On Scroll (AOS)
Animate On Scroll非常適合單頁視差網站。這個JS庫是完全開源的，可以幫助您在頁面上新增不錯的動畫，當您上下滾動時，它們看起來很漂亮。
通過幫助您新增淡入淡出效果，靜態錨點位置等來提升網站設計感和增強使用者滿意度。
Animate On Scroll庫
特點與優勢：
- 該庫可以檢測元素位置，並在它們出現在視口中時新增合適的類。
- 除了輕鬆新增動畫外，它還可以幫助您在視口中進行更改。
- 它可以在不同的裝置上無縫執行，無論是手機，平板電腦還是計算機，
- 由於它是用純JavaScript編寫的，因此沒有依賴關係。
用例：
- 根據另一個元素的位置對元素進行動畫處理。
- 根據其螢幕位置對元素進行動畫處理。
- 在手機上禁用元素動畫。
- 建立不同的動畫，例如淡入淡出，翻轉，滑動，縮放，錨點放置等。
Bideo.js
您想將全屏視訊納入網站的背景嗎？試試Bideo.js。
Bideo.js庫
特點與優勢：
- 使用此JavaScript庫，新增視訊背景非常容易。
- 此功能在不同比例和大小的螢幕上看起來很酷，並且可以正常工作。
- 新增的視訊可以根據使用的瀏覽器調整大小。
- 易於使用CSS / HTML實施。
用例：
在網站上新增響應式全屏背景視訊。
Chart.js
您的網站或專案與資料分析領域相關嗎？
您是否需要提供大量統計資料？
Chart.js是一個出色的JavaScript庫。
Chart.js是面向設計人員和開發人員的靈活，簡單的庫，他們可以立即在其專案中新增精美的圖表。該JS庫是開源且提供MIT許可證。
Chart.js庫
特點與優勢：
- 優雅，簡單，可新增基本圖表。
- 產生響應式網頁。
- 重量輕，易於學習和實施。
- 8種不同型別的圖表。
- 非常適合初學者。
- 動畫功能使頁面更具互動性。
用例：
- 在混合圖表型別的幫助下使用不同的資料集時，提供清晰的視覺表示。
- 以對數，日期，時間或自定義比例繪製稀疏和複雜的資料集。
Cleave.js
如果您想格式化文字內容，Cleave.js提供了一個有趣的解決方案。它的建立旨在通過格式化鍵入的資料來提供一種更簡單的方法來提高輸入欄位的可讀性。
這樣，您不再需要掩蓋模式或編寫正規表示式來格式化文字。
Cleave.js庫
特點與優勢：
- 通過表單提交的一致資料來提高使用者體驗。
- 您可以對信用卡號，電話號碼，日期，時間和數字執行不同的格式化型別。
- 格式化自定義塊，字首和定界符。
- 支援ReactJS元件，以及更多。
用例：
- 使用CSS選擇器將cleave.js實現為多個DOM元素。
- 更新特定的原始值。
- 獲取文字欄位的引用。
- 在Vue.js，jQuery和Playground中，它與Redux表單一起使用。
Choreographer.js
使用Chreographer.js有效地對複雜CSS進行動畫處理。它甚至可以新增更多可用於非CSS動畫的自定義功能。
要使用此JavaScript庫，請通過npm安裝其軟體包或新增其指令碼檔案。
Choreographer.js庫
特點與優勢：
- 它的Animation類管理單個動畫資料。
- animationConfig物件配置每個動畫例項。
- 包括2個內建的動畫功能“更改”和“縮放”。
- “比例”用於將逐步測量的值對映到節點的樣式屬性。
- “更改”刪除或新增樣式屬性。
用例：
- 執行即時滾動動畫。
- 根據滑鼠移動建立動畫。
Glimmer
Glimmer於2017年釋出，具有輕量級和快速的UI元件。它使用了功能強大的Ember CLI，並且可以將EmberJS作為元件使用。
Glimmer庫
特點與優勢：
- Glimmer是一個快速的DOM渲染引擎，可以為渲染和更新提供令人難以置信的效能。
- 它是多功能的，可以與您當前的技術堆疊一起使用，而無需您重寫程式碼。
用例：
- 您可以將其用作獨立元件，也可以將其新增為現有應用程式中的Web元件。
- DOM渲染。
- 它可以幫助您區分靜態內容和動態內容。
- 當您需要Ember的功能但包裝更輕時，請使用Glimmer。
Granim.js
Granim.js是一個JS庫，可幫助您建立流暢的互動式漸變動畫。這樣，您可以使您的網站在彩色背景中脫穎而出。
Granim.js庫
- 漸變可以覆蓋影象，獨立工作，在影象蒙版下滑動等。
- 您可以使用百分比或畫素值來自定義漸變方向。
- 將漸變方向設定為對角線，上下，左右，徑向或自定義。
- 設定狀態變化的動畫持續時間（以毫秒（ms）為單位）。
- 自定義漸變顏色和位置。
- 根據畫布的位置，來源，縮放比例等進行影象定製。
- 包括的其他選項包括設定回撥，發出事件，漸變控制方法等。
用例：
- 使用3種2種顏色的漸變來建立基本的漸變動畫。
- 使用2種具有3種顏色的漸變的複雜漸變動畫。
- 使用一種背景影象，兩種顏色和一種混合模式對漸變進行動畫處理。
- 使用一個影象蒙版在特定形狀下建立漸變動畫。
- 建立響應事件的漸變動畫。
fullPage.js
開源JS庫fullPage.js可以幫助您輕鬆建立全屏滾動網站或一頁網站。它使用簡單，也可以在站點部分內新增橫向滑塊。
fullpage.js庫
特點與優勢：
- 提供多種自定義和配置選項。
- 支援JavaScript框架，例如react-fullpage，angular-fullpage和vue-fullpage。
- 啟用垂直和水平滾動。
- 適應性設計，適合不同大小的螢幕以及多種瀏覽器。
- 頁面載入時自動滾動。
- 視訊/影象延遲載入。
用例：
- 使用許多擴充套件來改善預設功能。
- 建立全屏滾動站點。
- 建立一個單頁網站。
Leaflet
Leaflet是最好的JavaScript庫之一，可用於將互動式地圖包括到您的站點中。它是開源的且適合移動裝置，重約39kb。WordPress的MapPress Maps外掛使用Leaflet為其互動式地圖提供動力。
Leaflet庫
特點與優勢：
- 提供效能功能，例如移動硬體加速和CSS功能。
- 獨特的圖層，包括平鋪圖層，彈出視窗，標記，向量圖層，GeoJSON和影象疊加層。
- 互動功能，包括拖動平移，縮放，鍵盤導航，事件等。
- 地圖控制元件，例如圖層切換器，屬性，比例和縮放按鈕。
- 支援瀏覽器，例如Chrome，Safari，Firefox，Edge等。
- 定製，包括OOP設施，基於HTML和影象的標記，CSS3控制元件和彈出視窗。
用例：
通過更好的縮放和平移，智慧的多邊形/折線渲染，模組化構建以及點選延遲移動動畫，將地圖新增到您的站點。
Multiple.js
Multiple.js使用CSS或HTML無需JavaScript座標處理，即可在各種元素之間共享背景影象。
結果，它產生了驚人的視覺效果，以增加更多的使用者互動。
Multiple.js庫
特點與優勢：
- 支援多種背景。
- 漸變不透明度支援。
- 支援許多移動和Web瀏覽器。
用例：
- 共享背景圖片。
Moment.js
當使用不同的時區，API呼叫本地語言等時，Moment.js可幫助您有效地管理時間和日期。
您可以通過驗證，解析，格式化或操作日期和時間來簡化它們。
Moment.js庫
特點與優勢：
- 它支援許多國際語言。
- 物件可變性。
- 多個內部屬性，例如時代轉移，檢索本機Date物件等。
- 為了正確使用其解析器，有一些準則，例如嚴格模式，日期格式，寬容模式等。
用例：
- 在發表的文章中顯示時間。
- 與世界各地的人們以當地語言進行交流。
Masonry
Masonry是一個很棒的JS網格佈局庫。該庫可幫助您根據可用的垂直空間將網格元素放置在合適的位置。一些流行的畫廊WordPress外掛甚至使用了它。
Masonry庫
特點與優勢：
- Masonry的網格佈局基於列，並且沒有固定的行高。
- 通過消除不必要的間隙來優化網頁上的空間。
- 在不影響佈局結構的情況下對元素進行排序和過濾。
- 動畫效果。
- 動態元素可自動調整佈局以實現最佳結構。
用例：
- 建立具有不同影象尺寸的影象庫。
- 即使它們的摘要長度不同，也可以在保持一致性的同時，在多列中列出最新的部落格文章。
- 為了表示組合專案如影象，設計，專案，等等。
Omniscient
Omniscient.js是一個JS庫，可提供React元件抽象以實現包含不可變資料的自上而下的快速渲染。
該庫可以優化您的專案並提供有趣的功能，從而幫助您無縫構建專案。
Omniscient庫
特點與優勢：
- 記憶無狀態的React元件。
- 使用者介面的功能程式設計。
- 自上而下的元件渲染。
- 使用Immutable.js支援不可變資料。
- 使用mixin啟用具有共享功能的小型可組合元件。
用例：
- 提供元件金鑰。
- 使用輔助函式或構造對父程式碼進行對講。
- 覆蓋元件。
- 過濾和除錯。
Parsley
您要向專案新增表單嗎？
如果是的話，Parsley對您可能會有用。它是一個簡單但功能強大的JS庫，可用於驗證表單。
Parsley庫
特點與優勢：
- 其直觀的DOM API直接從HTML標記獲取輸入，而無需您編寫JS行
- 通過動態檢測表單修改來進行動態表單驗證
- 12個以上的內建驗證器，Ajax驗證器和其他擴充套件
- 您可以覆蓋Parsley的預設行為，並提供針對UI和UX的體驗
- 免費，開源且超級可靠，可與許多瀏覽器一起使用
用例：
- 建立一個簡單的表格
- 進行復雜的驗證
- 建立多步驟表單
- 驗證多個輸入
- 處理promise和Ajax請求
- 設定輸入樣式以建立精美的浮動錯誤標籤
Popper.js
建立Popper.js的目的是使放置彈出式選單，下拉選單，工具提示和其他上下文元素（更靠近按鈕或其他類似元素）更容易。
Popper提供了一種很好的方式來排列它們，將它們貼上到其他站點元素上，並使它們能夠在任何螢幕尺寸上無縫播放。
Popper.js庫
特點與優勢：
- 輕量級的庫，大約3kb
- 當您在滾動容器中滾動時，確保工具提示繼續與參考元素保持一致
- 先進的可配置性
- 使用諸如Angular或React之類的強大庫來編寫UI，從而實現無縫整合
用例：
- 從頭開始構建工具提示。
- 為了平穩地放置這些元素。
Three.js
Three.js可以使您的3D設計令人愉悅。它使用WebGL在現代瀏覽器上渲染場景。如果您使用的是IE 10及更低版本，請使用其他CSS3，CSS2和SVH渲染器。
Three.js庫
特點與優勢：
- 支援Chrome 9 +，Opera 15 +，Firefox 4 +，IE 11，Edge和Safari 5.1
- 支援JS功能，例如型別陣列，Blob，Promise，URL API，Fetch等
- 您可以建立不同的幾何，物件，光源，陰影，載入器，材料，數學元素，紋理等。
用例：
- 建立幾何立方體，球體等
- 建立相機或場景
Screenfull.js
使用Screenfull.js將全屏元素新增到您的專案中。由於其令人印象深刻的跨瀏覽器效率，因此使用此JavaScript庫不會遇到麻煩。
Screenfull.js庫
特點與優勢：
- 全屏頁面或元素
- 在手機上隱藏導航UI
- 使用jQuery和Angular新增全屏元素。
- 檢測全屏修改，錯誤等。
用例：
- 在網頁上新增全屏元素
- 在文件中匯入Screenfull.js
- 退出和切換全屏模式
- 處理事件
Polymer
Google開源JavaScript庫 – Polymer，用於使用元件構建Web應用程式。
Polymer庫
特點與優勢：
- 建立自定義元素的簡單方法。
- 計算屬性。
- 同時支援資料繫結：單向和雙向。
- 手勢事件。
用例：
- 使用JS，CSS和HTTP使用自定義Web元件建立互動式Web應用程式。
- 領先的網站和服務（例如YouTube，Google地球和Play等）都使用它。
VOCA
建立Voca背後的想法是減輕使用JavaScript字串時的痛苦。它帶有有用的功能，可以輕鬆地操作字串，例如更改大小寫，填充，修剪，截斷等等。
Voca庫
特點與優勢：
- 由於其模組化的結構，整個庫或單個功能可以快速載入，同時減少了應用程式的構建。
- 提供函式以斬波，格式化，操作，查詢和轉義字串。
- 沒有依賴關係
用例：
- 您可以在Node.js，Webpack，Rollup，Browserify等多種環境中使用Voca。
- 要將主題轉換為標題大小寫，駝峰大小寫，烤肉串大小寫，蛇形大小寫，大寫和小寫。
- 將第一個字元轉換為大寫和小寫。
- 建立用於包裝主題的鏈物件，從而啟用隱式/顯式鏈序列。
- 執行其他操作，例如計數字符，格式化字串等。
什麼是JavaScript框架？
JavaScript框架是允許開發人員程式碼快速利用現成的程式碼以滿足其獨特要求的應用程式框架。
Web應用程式開發類似於蓋房子。您可以選擇使用建築材料從頭開始建立所有內容。但這會浪費時間，並可能導致高昂的成本。
但是，如果您使用現成的材料（如磚塊）並根據建築結構進行組裝，則施工速度會更快，從而節省金錢和時間。
應用程式開發的工作方式與此類似。您可以使用基於應用程式體系結構的預先編寫的程式碼作為構建塊，而不必從頭開始編寫每個程式碼。框架可以更快地適應網站設計，並使其易於使用JavaScript。
如何使用JavaScript框架
要使用JavaScript框架，請閱讀您打算使用的JS框架的文件，並按照步驟進行操作。
JavaScript框架的用途？
- 搭建網站
- 應用程式前端開發
- 應用程式後端開發
- 應用程式混合開發
- 電子商務應用
- 構建模組化指令碼，例如Node.js
- 手動更新DOM
- 使用模板和雙向繫結自動執行重複性任務
- 開發視訊遊戲
- 建立影象輪播
- 測試程式碼和除錯
- 模組組合
最受歡迎的JavaScript框架
AngularJS
Google的AngularJS是2010年釋出的開源JavaScript框架。這是可用於建立Web應用程式的前端JS框架。
建立它的目的是使用MVC和MVVM客戶端體系結構的框架簡化Web應用程式的開發和測試。
AngularJS框架
特點與優勢：
- 支援雙向資料繫結（2-way data binding）
- 使用指令插入HTML程式碼併為應用程式提供更好的功能
- 快速輕鬆地宣告靜態檔案
- 它的環境易讀，易表達且開發迅速。
- 令人印象深刻的可擴充套件性和可定製性，可與之一起使用
- 內建的可測試性和對依賴項注入的支援
用例：
- 開發電子商務應用程式。
- 開發實時資料應用以進行天氣更新
- 示例：YouTube PlayStation 3
Bootstrap
使用Bootstrap（用於前端開發的最受歡迎的開源工具包之一）快速設計快速響應移動響應的網站。
它於2011年釋出，為開發人員提供了極大的靈活性，可根據客戶需求定製各種元素。
Bootstrap框架
特點與優勢：
- 響應式網格系統。
- 強大的JS外掛。
- 廣泛的內建元件，Sass變數和Mixins。
- 包括與元件完美配合並使用CSS樣式的開源SVG圖示。
- 提供精美優質的主題。
- 它們確保您在更新新的Bootstrap版本時不必處理很多錯誤。
用例：
- 為表單，按鈕，版式，導航，下拉選單，表格，模式等建立基於CSS或HTML的設計模板。
- 對於影象，影象輪播和圖示。
Aurelia
Aurelia於2016年釋出，是一個簡單，功能強大且功能強大的開源前端JS框架，用於構建響應式移動，桌面和瀏覽器應用程式。
它旨在集中於使Web規範與約定而不是配置保持一致，並且需要更少的框架入侵。
Aurelia框架
特點與優勢：
- Aurelia旨在執行高效能並有效地執行批處理DOM更新。
- 即使使用複雜的UI，也可以提供一致且可擴充套件的效能。
- 具有狀態管理，驗證和國際化的廣泛生態系統。
- 啟用反應性繫結並自動以高效能同步您的狀態。
- 更簡單的單元測試。
- 無與倫比的可擴充套件性，可建立自定義元素，新增屬性，管理模板生成等。
- 利用高階客戶端路由，UI組合和逐步增強功能。
用例：
- 開發應用程式。
- 使用伺服器端渲染。
- 執行雙向資料繫結。
Vue.js
Vue.js由Evan You於2014年在Google工作期間建立。它是用於構建使用者介面的漸進式JavaScript框架。
Vue.js從其核心開始可以逐步採用，並且可以根據各種用例輕鬆地在框架和庫之間擴充套件。
Vue.js框架
特點與優勢：
- 支援符合ES5的瀏覽器。
- 它具有一個易於訪問的核心庫，並且僅專注於檢視層。
- 它還支援其他有用的庫，這些庫可以幫助您管理與一頁應用程式相關的複雜性。
- 快速的虛擬DOM，最少20 kb的執行時間+ gzip，並且需要較少的優化。
用例：
- 非常適合在需要較少反應性，顯示模式，包括使用Ajax的表單的小型專案中使用。
- 您也可以使用其Vuex和Router元件在大型單頁應用程式上使用它。
- 建立事件，繫結類，更新元素內容等。
- 閃電博的主題和外掛開發都用到了Vue。
Ember.js
開源JS框架Ember.js經過了嚴格的測試，可以有效地構建具有豐富UI且可以跨裝置使用的Web應用程式。
它於2011年釋出，當時被命名為SproutCore 2.0。
Ember.js框架
特點與優勢：
- 可擴充套件的使用者介面體系結構。
- “包括電池”透檢視可幫助您找到立即開始構建應用程式所需的一切。
- 具有Ember CLI的功能，可充當Ember應用程式的主幹，並提供用於生成新實體的程式碼生成器。
- 帶有一個內建的開發環境，該環境具有快速的自動重新載入，重建和測試執行程式。
- 同類最佳的路由器，它使用帶有查詢引數和URL段的資料載入。
- Ember Data是一個資料訪問庫，可同時與多個源一起使用並保持模型更新。
用例：
- 構建現代的互動式Web應用程式。
- 由DigitalOcean，Square，Accenture等使用。
Node.js
Node.js是基於Chrome的JS V8引擎（於2009年建立）構建的伺服器端開放源JavaScript框架。它是一個執行時環境，可在瀏覽器外部執行JS程式碼。
Node.js旨在幫助您開發可擴充套件，快速且可靠的基於網路的伺服器端應用程式。
Node.js框架
特點與優勢：
- 更快的程式碼執行。
- 它可以使用事件驅動的體系結構來驅動非同步I / O。
- 顯示類似的Java屬性，例如形成包裝，執行緒或形成迴圈。
- 單執行緒模型。
- 通過減少大量處理時間，沒有麻煩的視訊或音訊緩衝。
用例：
- 開發伺服器端應用程式。
- 建立實時Web應用程式。
- 通訊程式。
- 開發瀏覽器遊戲。
- 其企業用途包括GoDaddy，LinkedIn，Netflix，PayPal，AWS，IBM等。
Backbone.js
輕量級JS框架Backbone.js建立於2010年，基於Model View Presenter（MVP）體系結構。
它具有RESTful JSON介面，可幫助您構建客戶端Web應用程式。它使用用於自定義事件和鍵值繫結的模型，具有有效API的集合以及使用宣告性事件處理的檢視來構造Web應用程式。
Backbone.js框架
特點與優勢：
- 免費開放原始碼，提供100多個可用擴充套件。
- 更少的程式碼，令人印象深刻的設計。
- 提供結構化和有組織的應用程式開發。
- 程式碼簡單易學，易於維護。
- 對jQuery的依賴性較小，而對Underscore.js的依賴性較強。
用例：
- 開發簡單頁面應用程式。
- 流暢的前端JS功能。
- 建立有組織且定義明確的客戶端移動或Web應用程式。
Next.js
Next.js的開源平臺提供了一個React前端Web開發框架。它於2016年釋出，可讓您啟用建立靜態網站和伺服器端渲染之類的功能。
Next.js框架
特點與優勢：
- 使用即時構建進行自動影象優化。
- 內建的域和子域路由和語言檢測自動。
- 實時分析得分，顯示訪問者資料和每頁見解。
- 自動捆綁和編譯。
- 您可以在請求時間（SSR）或構建時間（SSG）預呈現頁面。
- 支援TypeScript，檔案系統路由，API路由，CSS，程式碼拆分和捆綁等等。
用例：
- 此生產就緒框架允許您建立靜態和動態JAMstack站點。
- 伺服器端渲染。
Mocha
在部署每個應用程式之前，都需要對其進行測試。這就是Mocha或Mocha.js為您服務的。
它是功能豐富的開源JS測試框架，可在Node.js和瀏覽器上執行。
Mocha框架
特點與優勢：
- 它使非同步測試變得有趣而輕鬆。
- 啟用同時執行Node.js測試。
- 自動檢測並關閉非TTY流的顏色。
- 報告測試持續時間。
- 顯示慢速測試。
- 元生成套件和測試用例。
- 支援多種瀏覽器，配置檔案，節點偵錯程式，源對映，Growl等。
用例：
- 執行應用程式稽覈。
- 使用功能按一定順序執行功能並記錄測試結果。
- 清除測試軟體的狀態，以確保每個測試用例都可以單獨執行。
Ionic
Ionic於2013年釋出，是一個開源JavaScript框架，用於構建高質量的混合移動應用程式。它的最新版本允許您選擇任何UI框架，例如Vue.js，React或Angular。它使用CSS，Sass和HTML5來構建應用程式。
Ionic框架
特點與優勢：
- 利用Cordova和Capacitor外掛訪問主機OS功能，例如GPS，攝像頭，手電筒等。
- 包括字型，移動元件，互動式範例，精美的主題和自定義元件。
- 提供用於建立物件的CLI。
- 啟用推送通知，建立應用程式圖示，本機二進位制檔案和啟動螢幕。
用例：
- 構建混合移動應用程式。
- 構建前端UI框架。
- 建立引人入勝的互動。
Webix
Webix易於使用的框架可幫助您通過使用更簡單的程式碼來開發豐富的UI。它提供102個使用者介面小部件，例如DataTable，Tree，電子表格等，以及功能豐富的HTML5 / CSS JS控制元件。
Webix框架
特點與優勢：
- 使用者友好的JS檔案管理。
- 通過使用內建的小部件和UI控制元件來節省時間。
- 易於理解的程式碼。
- 跨平臺和瀏覽器支援。
- 與其他JavaScript庫和框架的無縫整合。
- 渲染小部件，甚至對大型資料集（如樹，列表等）都具有快速的效能。
- 符合GDPR和HIPAA標準，並具有無限的可擴充套件性和Web可訪問性。
用例：
- 開發UI。
- 跨平臺的Web應用程式開發。
Gatsby
Gatsby可幫助您使用React開發效能良好的網站和應用。這是一個開放原始碼和免費的前端JS框架。在GitHub上檢查一下。
Gatsby框架
特點與優勢：
- 高效能，具有自動程式碼拆分，內聯樣式，影象優化，延遲載入等功能，可優化站點。
- 它的無伺服器渲染在構建期間建立了閣樓HTML。因此，沒有伺服器和DDoS攻擊或惡意請求。
- 更高的網路可訪問性。
- 2000多個外掛，主題和食譜。
用例：
- 前端應用程式和網站開發。
- 靜態網站生成。
- 伺服器端渲染。
- 被Airbnb和Nike等網站使用，後者用於“ Just Do It”專案。
Meteor.js
Meteor是2012年釋出的開源JS框架。它允許您無縫構建用於移動裝置，桌上型電腦和Web的全堆疊應用程式。
Meteor.js框架
特點與優勢：
- 整合工具和框架以獲得更多功能，例如MongoDB，React，Cordova等。
- 在任何裝置上構建應用程式。
- APM以檢視應用程式效能。
- 實時瀏覽器重新載入。
- 開源同構開發生態系統（IDevE），以促進從頭開始的開發。
用例：
- 快速原型製作。
- 跨平臺的應用程式。
- 使用Meteor構建的網站：Pathable，Maestro，Chatra等。
MithrilJS
儘管不如此列表中的其他專案那麼受歡迎，但Mithril是用於開發客戶端應用程式的高階客戶端JS框架。它是輕量級的（不到10kb gzip），但速度很快，並提供XHR和路由實用程式。
MithrilJS框架
特點與優勢：
- 純JS框架。
- 支援所有不帶polyfills的主要瀏覽器。
- 建立Vnode資料結構。
- 提供宣告性API來管理UI複雜性。
用例：
- 單頁應用程式。
- 由Vimeo，Nike等網站使用。
ExpressJS
Express.js是用於開發Web應用程式的後端JS框架。它於2010年以麻省理工學院的香氣作為免費的開放原始碼軟體釋出。
這是一個快速而簡約的Node.js Web框架，帶有一系列有用的功能。
ExpressJS框架
特點與優勢：
- 可擴充套件且輕巧。
- 通過允許您設定中介軟體來啟用接收HTTP響應。
- 具有路由表，可根據URL和HTTP方法執行操作。
- 包括動態HTML頁面呈現。
用例：
- 基於節點的快速應用程式開發。
- REST API的建立。
一些有用的JavaScript工具
-
Slick
Slick是有用的JS工具，可滿足您的輪播需求。它的容器具有響應性和可伸縮性。它的功能包括CSS3支援，滑動，滑鼠拖動，完全可訪問性，無限迴圈，自動播放，延遲載入等。
-
Babel
Babel是一個免費的開源JS編譯器，可用於轉換新的JS功能以執行舊的JS標準。該外掛還用於舊版本不支援的語法轉換。它提供了polyfill以支援某些JS環境中缺少的功能。
-
iziModal
iziModal是一個優雅，輕巧，靈活且響應迅速的模式外掛，可與jQuery一起使用。使用彈出視窗通知使用者某些資訊或要求提供資訊很有用。它易於使用，並且具有許多自定義項。
-
ESLint
使用ESLint可以很容易地發現錯誤並將其修復在JS程式碼中。它統計分析程式碼，以快速捕獲語法錯誤，命令列樣式問題等，並自動修復它們。
-
Shave
Shave是一個零依賴性JS外掛，您可以通過設定最大高度以使其完全適合該元素來截斷HTML元素內的文字。它還在隱藏元素中儲存了一些額外的原始文字<span>，以確保您不會丟失這些文字。
-
Webpack
Webpack是為現代應用程式捆綁JS模組的工具。您可以編寫程式碼並使用它合理地捆綁資產，同時保持程式碼乾淨。
JavaScript庫和框架如何協同工作
JavaScript庫和框架之間的區別在於控制元件流。它們在流動中正好相反，或者倒置。
在JS庫中，父程式碼呼叫庫提供的功能。
在JS框架中，框架本身呼叫程式碼並以特定方式使用它。它定義了整個應用程式設計。
簡而言之，您可以將JavaScript庫視為特定的應用程式功能。相反，該框架的作用就像其骨架，而API則充當將它們組合在一起的聯結器。
通常，開發人員使用JS框架開始開發過程，然後使用JS庫和API的幫助來完成應用程式功能。
小結
JavaScript庫和框架可以有效地加速您的網站或應用程式的開發過程。而作為一個Web開發人員，使用您的專案正確的是至關重要的。
不同的庫和框架有不同的用途，並且各有優缺點。因此，您需要根據自己的獨特要求和與網站或應用程式相關的未來目標來選擇它們。
希望這個JavaScript庫和框架列表可以幫助您為下一個專案選擇合適的庫和框架。
評論留言