大家好,今天給大家分享7個(gè)常用的 JavaScript 庫(kù),掌握這些 JavaScript 工具庫(kù),讓你的項(xiàng)目看起來很棒。
專家與普通人的重要區(qū)別在于他們善于使用工具,留出更多的時(shí)間用于計(jì)劃和思考。編寫代碼也是如此。有了合適的工具,你就有更多的時(shí)間來規(guī)劃架構(gòu)和攻克難關(guān),更多的把精力放在業(yè)務(wù)實(shí)現(xiàn)上。今天,我將與大家分享最流行的幾個(gè)常用且流行的 JavaScript 庫(kù)。
1、qs
一個(gè)輕量級(jí)的 url 參數(shù)轉(zhuǎn)換 JavaScript 庫(kù),可以將URL的一些參數(shù),轉(zhuǎn)換成JSON的格式。
安裝:
復(fù)制
npm install qs1.
示例:
復(fù)制
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=321.2.3.4.5.
官網(wǎng):www.npmjs.com/package/qs
2、js-cookie
用于處理 cookie 的簡(jiǎn)單、輕量級(jí) JavaScript API。
安裝:
復(fù)制
npm install js-cookie1.
示例:
復(fù)制
import Cookies from 'js-cookie'
Cookies.set('name', 'maxwell', { expires: 10 })
// cookies are valid for 10 days
Cookies.get('name') // return 'maxwell'1.2.3.4.
官網(wǎng):github.com/js-cookie/js-cookie
3、Day.js
一個(gè)用于處理時(shí)間和日期的極簡(jiǎn) JavaScript 庫(kù),具有與 Moment.js 相同的 API 設(shè)計(jì),但大小只有 2KB。
安裝:
復(fù)制
npm install dayjs1.
示例:
復(fù)制
import dayjs from 'dayjs'
dayjs().format('YYYY-MM-DD HH:mm') ?
?
dayjs('2022-11-1 12:06').toDate()1.2.3.4.
官網(wǎng):day.js.org
4、Animate.css
一個(gè)跨瀏覽器的css3動(dòng)畫庫(kù),內(nèi)置了很多典型的css3動(dòng)畫,兼容性好,簡(jiǎn)單易用。
安裝:
復(fù)制
npm install animate.css1.
示例:
復(fù)制
<h1 class="animate__animated animate__bounce">
? An animated element
</h1>
import 'animate.css'1.2.3.4.
官網(wǎng):animate.style
5、animejs
一個(gè)強(qiáng)大的 Javascript 動(dòng)畫庫(kù)??梢耘c CSS3 屬性、SVG、DOM 元素和 JS 對(duì)象一起創(chuàng)建各種高性能、平滑過渡的動(dòng)畫效果。
安裝:
復(fù)制
npm install animejs1.
示例:
復(fù)制
<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
})1.2.3.4.5.6.7.8.9.10.
官網(wǎng):animejs.com
6、lodash.js
一個(gè)提供模塊化、高性能和附加功能的現(xiàn)代 JavaScript 實(shí)用程序庫(kù)。
安裝:
復(fù)制
npm install lodash1.
基礎(chǔ):
復(fù)制
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]1.2.3.4.
官網(wǎng):lodash.com
7、vConsole
一個(gè)輕量級(jí)、可擴(kuò)展的移動(dòng)網(wǎng)頁(yè)前端開發(fā)工具。如果您仍在為如何在手機(jī)上調(diào)試代碼而苦惱,請(qǐng)使用它。vConsole 是無框架的,您可以在 Vue 或 React 或任何其他框架應(yīng)用程序中使用它。
安裝:
復(fù)制
npm install vconsole1.
示例:
復(fù)制
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();1.2.3.4.5.6.7.8.9.10.11.
官網(wǎng):github.com/Tencent/vConsole
?技術(shù)前沿拓展
前端開發(fā),你的認(rèn)知不能僅局限于技術(shù)內(nèi),需要發(fā)散思維了解技術(shù)圈的前沿知識(shí)。細(xì)心的人會(huì)發(fā)現(xiàn),開發(fā)內(nèi)部工具的過程中,大量的頁(yè)面、場(chǎng)景、組件等在不斷重復(fù),這種重復(fù)造輪子的工作,浪費(fèi)工程師的大量時(shí)間。
介紹一款程序員都應(yīng)該知道的軟件JNPF快速開發(fā)平臺(tái),很多人都嘗試用過它,它是功能的集大成者,任何信息化系統(tǒng)都可以基于它開發(fā)出來。
這是一個(gè)基于 Java Boot/.Net Core 構(gòu)建的簡(jiǎn)單、跨平臺(tái)快速開發(fā)框架。前后端封裝了上千個(gè)常用類,方便擴(kuò)展;集成了代碼生成器,支持前后端業(yè)務(wù)代碼生成,實(shí)現(xiàn)快速開發(fā),提升工作效率;框架集成了表單、報(bào)表、圖表、大屏等各種常用的 Demo 方便直接使用;后端框架支持 Vue2、Vue3。如果你有閑暇時(shí)間,可以做個(gè)知識(shí)拓展。文章來源:http://www.zghlxwxcb.cn/news/detail-824943.html
看完本文如果覺得有用,記得點(diǎn)個(gè)贊支持,收藏起來說不定哪天就用上啦~文章來源地址http://www.zghlxwxcb.cn/news/detail-824943.html
到了這里,關(guān)于分享7個(gè)常用的 JavaScript 庫(kù),讓你顯得更專業(yè)的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!