高手区别于普通人的重要一点是,他们善于利用工具,把更多的时间留给了规划和思考。写代码也是同样的道理,工具用好了,你就有更多的时间来规划架构和攻克难点。今天就给大家分享一下当前最流行的 js 工具库,如果觉得有用,就把大拇指点亮一下吧!
Day.js
一个极简的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持一样, 但体积仅有2KB。
npm install dayjs
基本用法
import dayjs from 'dayjs'
dayjs().format('YYYY-MM-DD HH:mm') // => 2022-01-03 15:06
dayjs('2022-1-3 15:06').toDate() // => Mon Jan 03 2022 15:06:00 GMT+0800 (中国标准时间)
qs
一个轻量的 url 参数转换的 JavaScript 库
npm install qs
基本用法
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
npm install js-cookie
基本用法
import Cookies from 'js-cookie'
Cookies.set('name', 'value', { expires: 7 }) // 有效期7天
Cookies.get('name') // => 'value'
flv.js
bilibili 开源的 html5 flash 视频播放器,使浏览器在不借助 flash 插件的情况下可以播放 flv,目前主流的直播、点播解决方案。
npm install flv.js
基本用法
vConsole
一个轻量、可拓展、针对手机网页的前端开发者调试面板。如果你还苦于在手机上如何调试代码,用它就对了。
npm install vconsole
基本用法
import VConsole from 'vconsole'
const vConsole = new VConsole()
console.log('Hello world')
最近发现很多小伙只收藏,不点赞,这可不是一个好习惯哦。拒绝白嫖,从你我做起!跟我一起动起来,先点赞!再收藏!
Animate.css
一个跨浏览器的 css3 动画库,内置了很多典型的 css3 动画,兼容性好,使用方便。
npm install animate.css
基本用法
class="animate__animated animate__bounce">An animated element</h1>
import 'animate.css'
animejs
一款功能强大的 Javascript 动画库。可以与CSS3属性、SVG、DOM元素、JS对象一起工作,制作出各种高性能、平滑过渡的动画效果。
npm install animejs
基本用法
class=
"ball" style=
"width: 50px; height: 50px; background: blue"><
/div>
import anime from 'animejs/lib/anime.es.js
'
// 页面渲染完成之后执行
anime({
targets: '.ball
',
translateX: 250,
rotate: '1turn
',
backgroundColor: '#F00
',
duration: 800
})
lodash.js
一个一致性、模块化、高性能的 JavaScript 实用工具库
npm install lodash
基本用法
import _ from 'lodash'
_.max([4, 2, 8, 6]) // 返回数组中的最大值 => 8
_.intersection([1, 2, 3], [2, 3, 4]) // 返回多个数组的交集 => [2, 3]
mescroll.js
一款精致的、在H5端运行的下拉刷新和上拉加载插件,主要用于列表分页、刷新等场景。
npm install mescroll.js
基本用法(vue组件)
<div>
<mescroll-vue
ref="mescroll"
:down="mescrollDown"
:up="mescrollUp"
@init="mescrollInit"
>
mescroll-vue>
div>
</template>
Chart.js
一套基于 HTML5 的简单、干净并且有吸引力的 JavaScript 图表库
npm install chart.js
基本用法
以上每一个工具库都是本人亲测,目前公司的项目也基本都在用。有问题欢迎评论区交流,如果你有其他好的工具也欢迎分享出来
最后不要忘了点赞呦!
作者:前端阿飞
https://juejin.cn/post/7048963605462515743
- EOF -
觉得本文对你有帮助?请分享给更多人
推荐关注「前端大全」,提升前端技能
点赞和在看就是最大的支持❤️