10個常用的JS工具庫,80%的項目都在用!
theme: channing-cyan highlight: atom-one-dark-reasonable
高手區別於普通人的重要一點是,他們善於利用工具,把更多的時間留給了規劃和思考。寫代碼也是同樣的道理,工具用好了,你就有更多的時間來規劃架構和攻克難點。今天就給大家分享一下當前最流行的 js 工具庫,如果覺得有用,就把左上角的大拇指點亮一下吧!
Day.js
一個極簡的處理時間和日期的 JavaScript 庫,和 Moment.js 的 API 設計保持一樣, 但體積僅有2KB。
js
npm install dayjs
基本用法
```js import dayjs from 'dayjs'
dayjs(d).format('YYYY-MM-DD HH:mm') // => 2022-01-03 16:06 ```
qs
一個輕量的 url 參數轉換的 JavaScript 庫
js
npm install qs
基本用法
```js import qs from 'qs'
qs.parse('user=tom&age=22') // => { user: "tom", age: "22" } qs.stringify({ user: "tom", age: "22" }) // => user=tom&age=22 ```
js-cookie
一個簡單的、輕量的處理 cookies 的 js API
js
npm install js-cookie
基本用法
```js import Cookies from 'js-cookie'
Cookies.set('name', 'value', { expires: 7 }) Cookies.get('name') // => 'value' ```
flv.js
bilibili 開源的 html5 flash 視頻播放器,使瀏覽器在不借助 flash 插件的情況下可以播放 flv,目前主流的直播、點播解決方案。
js
npm install flv.js
基本用法
```js
import flvjs from 'flv.js'
// 頁面渲染完成後執行 if (flvjs.isSupported()) { var myVideo = document.getElementById('myVideo') var flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'http://localhost:8080/test.flv' // 視頻 url 地址 }) flvPlayer.attachMediaElement(myVideo) flvPlayer.load() flvPlayer.play() } ```
vConsole
一個輕量、可拓展、針對手機網頁的前端開發者調試面板。如果你還苦於在手機上如何調試代碼,用它就對了。
js
npm install vconsole
基本用法
```js import VConsole from 'vconsole'
const vConsole = new VConsole() console.log('Hello world') ```
最近發現很多小夥只收藏,不點贊,這可不是一個好習慣哦。拒絕白嫖,從你我做起。跟我一起動起來,先點贊!再收藏!
Animate.css
一個跨瀏覽器的 css3 動畫庫,內置了很多典型的 css3 動畫,兼容性好,使用方便。
js
npm install animate.css
基本用法
```js import 'animate.css';
An animated element
```
animejs
一款功能強大的 Javascript 動畫庫。可以與CSS3屬性、SVG、DOM元素、JS對象一起工作,製作出各種高性能、平滑過渡的動畫效果。
js
npm install animejs
基本用法
```js
import anime from 'animejs/lib/anime.es.js'
// 頁面渲染完成之後執行 anime({ targets: '.ball', translateX: 250, rotate: '1turn', backgroundColor: '#F00', duration: 800 }) ```
lodash.js
一個一致性、模塊化、高性能的 JavaScript 實用工具庫
js
npm install lodash
基本用法
```js import _ from 'lodash'
.max([4, 2, 8, 6]) // 返回數組中的最大值 => 8 .intersection([1, 2, 3], [2, 3, 4]) // 返回多個數組的交集 => [2, 3] ```
mescroll.js
一款精緻的、在H5端運行的下拉刷新和上拉加載插件,主要用於列表分頁、刷新等場景。
js
npm install mescroll.js
基本用法(vue組件)
```js
```
Chart.js
一套基於 HTML5 的簡單、乾淨並且有吸引力的 JavaScript 圖表庫
js
npm install chart.js
基本用法
```js
import Chart from 'chart.js/auto'
// 頁面渲染完成後執行 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 } } } }) ``` 以上每一個工具庫都是本人親測,目前公司的項目也基本都在用。有問題歡迎評論區交流,如果你有其他好的工具也歡迎分享出來,一起提高工作效率,打倒萬惡的資本主義👿
最後不要忘了點贊呦!祝 2022 年暴富!暴美!暴瘦!
- Vite 性能篇:掌握這些優化策略,一起縱享絲滑!
- Vite 配置篇:日常開發掌握這些配置就夠了!
- Vite 入門篇:學會它,一起提升開發幸福感!
- 還有人沒嘗過 Pinia 嗎,請收下這份食用指南!
- 10個常見的使用場景,助你從 Vue2 絲滑過渡到 Vue3 !
- 前端手寫功能第二彈,提升內力,等待下一次爆發!
- 效率提升之 —— 如何優雅的帶走上份工作的VSCode配置
- Vue組件遞歸——組件化開發的必備技能!
- 10個常用的JS工具庫,80%的項目都在用!
- 如何嚴格判斷文件上傳類型?再不會你就out啦!
- Element-UI 奇淫技巧第二彈!提升開發效率,延長摸魚時間~
- 原來虛擬列表如此簡單!萬萬沒想到
- 10個常見的前端手寫功能,你全都會嗎?
- 一款強大到沒朋友的圖片編輯插件,愛了愛了!
- 如何實現拖拽上傳、上傳進度條,以及取消上傳?
- Vue 1分鐘實現右鍵菜單,懶人的福音!
- Vue 如何快速實現頭像裁剪?方法比你想象的簡單
- 前端持久化之瀏覽器存儲技術(localStorage、sessionStorage 、session、cookies)