分享八個常用的 JavaScript 庫，讓你顯得更專業
大家好，今天給大家分享8個常用的 JavaScript 庫，掌握這些 JavaScript 工具庫，讓你的項目看起來很棒。
專家與普通人的重要區別在于他們善于使用工具，留出更多的時間用于計劃和思考。編寫代碼也是如此。有了合適的工具，你就有更多的時間來規劃架構和攻克難關，更多的把精力放在業務實現上。今天，我將與大家分享最流行的幾個常用且流行的 JavaScript 庫。
1、qs
一個輕量級的 url 參數轉換 JavaScript 庫，可以將URL的一些參數，轉換成JSON的格式。
安裝：
npm install qs示例：
import qs from 'qs'
qs.parse('user=maxwell&age=32');
// return { user: "maxwell", age: "32" }
qs.stringify({ user: "maxwell", age: "32" });
//return user=maxwell&age=32官網：
www.npmjs.com/package/qs
2、js-cookie
用于處理 cookie 的簡單、輕量級 JavaScript API。
安裝：
npm install js-cookie示例：
import Cookies from 'js-cookie'
Cookies.set('name', 'maxwell', { expires: 10 })
// cookies are valid for 10 days
Cookies.get('name') // return 'maxwell'官網：
github.com/js-cookie/js-cookie
3、Day.js
一個用于處理時間和日期的極簡 JavaScript 庫，具有與 Moment.js 相同的 API 設計，但大小只有 2KB。
安裝：
npm install dayjs示例：
import dayjs from 'dayjs'
dayjs().format('YYYY-MM-DD HH:mm')
dayjs('2022-11-1 12:06').toDate()官網：
day.js.org
4、Animate.css
一個跨瀏覽器的css3動畫庫，內置了很多典型的css3動畫，兼容性好，簡單易用。
安裝：
npm install animate.css示例：
<h1 class="animate__animated animate__bounce">
An animated element
</h1>
import 'animate.css'官網：
animate.style
5、animejs
一個強大的 Javascript 動畫庫。可以與 CSS3 屬性、SVG、DOM 元素和 JS 對象一起創建各種高性能、平滑過渡的動畫效果。
安裝：
npm install animejs示例：
<div class="ball" style="width: 50px; height: 50px; background: blue"></div>
import anime from 'animejs/lib/anime.es.js'
// After the page is rendered, execute
anime({
targets: '.ball',
translateX: 250,
rotate: '1turn',
backgroundColor: '#F00',
duration: 800
})官網：
animejs.com
6、lodash.js
一個提供模塊化、高性能和附加功能的現代 JavaScript 實用程序庫。
安裝：
npm install lodash基礎：
import _ from 'lodash'
_.max([4, 2, 8, 6]) // returns the maximum value in the array => 8
_.intersection([1, 2, 3], [2, 3, 4])
// returns the intersection of multiple arrays => [2, 3]官網：
lodash.com
7、vConsole
一個輕量級、可擴展的移動網頁前端開發工具。如果您仍在為如何在手機上調試代碼而苦惱，請使用它。vConsole 是無框架的，您可以在 Vue 或 React 或任何其他框架應用程序中使用它。
安裝：
npm install vconsole示例:
import VConsole from 'vconsole';
const vConsole = new VConsole();
// or init with options
const vConsole = new VConsole({ theme: 'dark' });
// call `console` methods as usual
console.log('Hello world');
// remove it when you finish debugging
vConsole.destroy();官網：
github.com/Tencent/vConsole
8、Chart.js
一個簡單、干凈、有吸引力的基于 HTML5 的 JavaScript 圖表庫，面向設計師和開發人員的簡單而靈活的 JavaScript 圖表工具。
安裝：
npm install chart.js示例：
<canvas id="myChart" width="500" height="500"></canvas>
import Chart from 'chart.js/auto'
// executed after page rendering is complete
const ctx = document.getElementById('myChart')
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
})結束
今天的分享就到這里，以上每個庫都作者都親自實踐過，你使用過哪些呢？
