80%的项目都会用到十大常用JS工具库!
时间:2023-03-12 09:27:10
科技观察
.mescroll{位置:固定;顶部:44px;底部:0;height:auto;}高手与普通人的重要区别在于,他们善于使用工具,留出更多的时间用于计划和思考。编写代码也是如此。如果你用好工具,你将有更多的时间来规划架构和克服困难。Day.js是一个用于处理时间和日期的极简JavaScript库,保持与Moment.js相同的API设计,但大小只有2KB。npminstalldayjs复制代码基本用法importdayjsfrom'dayjs'dayjs().format('YYYY-MM-DDHH:mm')//=>2022-01-0315:06dayjs('2022-1-315:06').toDate()//=>MonJan03202215:06:00GMT+0800(ChinaStandardTime)复制代码qs轻量级url参数转换JavaScript库npminstallqs复制代码基本用法importqsfrom'qs'qs.parse('user=tom&age=22')//=>{user:"tom",age:"22"}qs.stringify({user:"tom",age:"22"})//=>user=tom&age=22copycodejs-cookie一个简单、轻量级的处理cookies的jsAPInpminstalljs-cookiecopycodebasicusageimportCookiesfrom'js-cookie'Cookies.set('name','value',{expires:7})//有效期7天Cookies.get('name')//=>'value'复制代码flv.jsbilibili开源html5flash视频播放器,让浏览器可以借助flash插件,可以播放flv,是目前主流的直播点播解决方案。npminstallflv.js复制代码基本用法importflvjsfrom'flv.js'//如果页面渲染完成后执行完成(flvjs.isSupported()){varmyVideo=document.getElementById('myVideo')varflvPlayer=flvjs.createPlayer({type:'flv',url:'http://localhost:8080/test.flv'//视频url地址})flvPlayer.attachMediaElement(myVideo)flvPlayer.load()flvPlayer.play()}复制代码vConsole是面向移动网页的前端开发人员的轻量级、可扩展的调试面板。如果您仍在为如何在手机上调试代码而苦恼,请使用它。npminstallvconsole复制代码基本用法importVConsolefrom'vconsole'constvConsole=newVConsole()console.log('Helloworld')复制代码最近发现很多小伙伴只会书签,不喜欢,这不是一个好习惯。拒绝白嫖,从你我做起!跟我一起动起来,先喜欢再说!再次收藏!Animate.css是一个跨浏览器的css3动画库,内置了很多典型的css3动画,兼容性好,使用方便。npminstallanimate.css复制代码基本用法一个动画元素import'animate.css'复制代码animejs是一个强大的Javascript动画库。它可以与CSS3属性、SVG、DOM元素和JS对象一起使用,以产生各种高性能和平滑过渡的动画效果。npminstallanimejs复制代码基本用法
importanimefrom'animejs/lib/anime.es.js'//页面渲染后执行anime({targets:'.ball',translateX:250,rotate:'1turn',backgroundColor:'#F00',duration:800})性能JavaScript实用库npminstalllodash复制代码基本用法import_from'lodash'_.max([4,2,8,6])//返回数组中的最大值=>8_.intersection([1,2,3],[2,3,4])//返回多个数组的交集=>[2,3]复制代码mescroll.js是一款运行在H5端的精美下拉刷新上拉加载插件,主要用于列表分页等场景并刷新。npminstallmescroll.js复制代码基本用法(vue组件)
.mescroll{位置:固定;顶部:44px;底部:0;height:auto;}复制代码Chart.js基于HTML5的简单、干净、吸引人的JavaScript图表库npminstallchart.js复制代码基本用法importChartfrom'chart.js/auto'//页面渲染完成后执行constctx=document.getElementById('myChart')constmyChart=newChart(ctx,{type:'bar',data:{标签:['红色','蓝色','黄色','绿色','紫色','橙色'],数据集:[{label:'#ofVotes',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}]},选项:{尺度:{y:{beginAtZero:true}}}})复制代码以上每个工具库都是亲自测试过的。目前,公司的项目基本都在使用中。有什么问题欢迎在评论区交流。如果你有其他好的工具,也欢迎。分享出来,共同提高工作效率,打倒万恶的资本主义