大家好,今天给大家分享8个常用的 JavaScript 库,掌握这些 JavaScript 工具库,让你的项目看起来很棒。
专家与普通人的重要区别在于他们善于使用工具,留出更多的时间用于计划和思考。编写代码也是如此。有了合适的工具,你就有更多的时间来规划架构和攻克难关,更多的把精力放在业务实现上。今天,我将与大家分享最流行的几个常用且流行的 JavaScript 库。
一个轻量级的 url 参数转换 JavaScript 库,可以将URL的一些参数,转换成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
官网:
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'
官网:
github.com/js-cookie/js-cookie
一个用于处理时间和日期的极简 JavaScript 库,具有与 Moment.js 相同的 API 设计,但大小只有 2KB。
安装:
npm install dayjs
示例:
import dayjs from 'dayjs'dayjs().format('YYYY-MM-DD HH:mm') dayjs('2022-11-1 12:06').toDate()
官网:
day.js.org
一个跨浏览器的css3动画库,内置了很多典型的css3动画,兼容性好,简单易用。
安装:
npm install animate.css
示例:
<h1 class="animate__animated animate__bounce"> An animated element</h1> import 'animate.css'
官网:
animate.style
一个强大的 Javascript 动画库。可以与 CSS3 属性、SVG、DOM 元素和 JS 对象一起创建各种高性能、平滑过渡的动画效果。
安装:
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})
官网:
animejs.com
一个提供模块化、高性能和附加功能的现代 JavaScript 实用程序库。
安装:
npm install lodash
基础:
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]
官网:
lodash.com
一个轻量级、可扩展的移动网页前端开发工具。如果您仍在为如何在手机上调试代码而苦恼,请使用它。vConsole 是无框架的,您可以在 Vue 或 React 或任何其他框架应用程序中使用它。
安装:
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();
官网:
github.com/Tencent/vConsole
一个简单、干净、有吸引力的基于 HTML5 的 JavaScript 图表库,面向设计师和开发人员的简单而灵活的 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 } } }})
今天的分享就到这里,以上每个库都作者都亲自实践过,你使用过哪些呢?如有任何问题,欢迎在评论区交流。如果大家有其他好的工具库,欢迎分享,共同提高工作效率。感谢你的阅读,如果你喜欢我的分享,别忘了点赞转发,让更多的人看到,最后别忘记点个关注,你的支持将是我分享最大的动力,后续我会持续输出更多内容,敬请期待。
原文:
https://medium.com/gitconnected/8-commonly-used-javascript-libraries-become-a-real-master-6d8a4e98eb89作者:Maxwell
非直接翻译,有自行改编和添加部分。