小米降噪藍(lán)牙耳機(jī)Necklace分享：聽一首歌 讀懂一個(gè)故事
在今天下午的小米Civi 2新品發(fā)布會(huì)上，小米還帶來了一款新的降噪藍(lán)牙耳機(jī)Necklace，我們也在發(fā)布結(jié)束的第一時(shí)間給大家?guī)磉@款耳機(jī)的簡單分享。現(xiàn)在大家能見到最多的藍(lán)牙耳機(jī)
大家好，今天給大家分享8個(gè)常用的 JavaScript 庫，掌握這些 JavaScript 工具庫，讓你的項(xiàng)目看起來很棒。
專家與普通人的重要區(qū)別在于他們善于使用工具，留出更多的時(shí)間用于計(jì)劃和思考。編寫代碼也是如此。有了合適的工具，你就有更多的時(shí)間來規(guī)劃架構(gòu)和攻克難關(guān)，更多的把精力放在業(yè)務(wù)實(shí)現(xiàn)上。今天，我將與大家分享最流行的幾個(gè)常用且流行的 JavaScript 庫。
一個(gè)輕量級的 url 參數(shù)轉(zhuǎn)換 JavaScript 庫，可以將URL的一些參數(shù)，轉(zhuǎn)換成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官網(wǎng)：
www.npmjs.com/package/qs
用于處理 cookie 的簡單、輕量級 JavaScript API。
安裝：
npm install js-cookie示例：
import Cookies from 'js-cookie'Cookies.set('name', 'maxwell', { expires: 10 }) // cookies are valid for 10 daysCookies.get('name') // return 'maxwell'官網(wǎng)：
github.com/js-cookie/js-cookie
一個(gè)用于處理時(shí)間和日期的極簡 JavaScript 庫，具有與 Moment.js 相同的 API 設(shè)計(jì)，但大小只有 2KB。
安裝：
npm install dayjs示例：
import dayjs from 'dayjs'dayjs().format('YYYY-MM-DD HH:mm') dayjs('2022-11-1 12:06').toDate()官網(wǎng)：
day.js.org
一個(gè)跨瀏覽器的css3動(dòng)畫庫，內(nèi)置了很多典型的css3動(dòng)畫，兼容性好，簡單易用。
安裝：
npm install animate.css示例：
<h1 class="animate__animated animate__bounce"> An animated element</h1> import 'animate.css'官網(wǎng)：
animate.style
一個(gè)強(qiáng)大的 Javascript 動(dòng)畫庫。可以與 CSS3 屬性、SVG、DOM 元素和 JS 對象一起創(chuàng)建各種高性能、平滑過渡的動(dòng)畫效果。
安裝：
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, executeanime({ targets: '.ball', translateX: 250, rotate: '1turn', backgroundColor: '#F00', duration: 800})官網(wǎng)：
animejs.com
一個(gè)提供模塊化、高性能和附加功能的現(xiàn)代 JavaScript 實(shí)用程序庫。
安裝：
npm install lodash基礎(chǔ)：
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]官網(wǎng)：
lodash.com
一個(gè)輕量級、可擴(kuò)展的移動(dòng)網(wǎng)頁前端開發(fā)工具。如果您仍在為如何在手機(jī)上調(diào)試代碼而苦惱，請使用它。vConsole 是無框架的，您可以在 Vue 或 React 或任何其他框架應(yīng)用程序中使用它。
安裝：
npm install vconsole示例:
import VConsole from 'vconsole';const vConsole = new VConsole();// or init with optionsconst vConsole = new VConsole({ theme: 'dark' });// call `console` methods as usualconsole.log('Hello world');// remove it when you finish debuggingvConsole.destroy();官網(wǎng)：
github.com/Tencent/vConsole
一個(gè)簡單、干凈、有吸引力的基于 HTML5 的 JavaScript 圖表庫，面向設(shè)計(jì)師和開發(fā)人員的簡單而靈活的 JavaScript 圖表工具。
安裝：
npm install chart.js示例：
<canvas id="myChart" width="500" height="500"></canvas>import Chart from 'chart.js/auto'// executed after page rendering is completeconst 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 } } }})今天的分享就到這里，以上每個(gè)庫都作者都親自實(shí)踐過，你使用過哪些呢？
本文鏈接：http://www.www897cc.com/showinfo-26-60993-0.html分享八個(gè)常用的 JavaScript 庫，讓你顯得更專業(yè)
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： Python單元測試之道：從入門到精通
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號