当前位置: 首页 > 科技观察

15个有趣的JS和CSS库,快来看看

时间:2023-03-14 20:27:22 科技观察

每个月,我们都会为你分享一些最新有趣的前端库,希望对你的项目有所帮助。当然,如果你也发现了一些有趣实用的库、框架或者工具,欢迎留言分享给大家。1.Currencycurrency.js是一个用于处理货币值的轻量级JavaScript库。它解决了JS中的浮点数问题。你不需要担心像Decimal这样精确的数据类型,你可以直接进行基本的算术运算。同时也适用于字符串、数字、货币对象等不同类型的数据输入。项目地址:https://github.com/scurker/currency.js2.Lass可以使用Lass搭建基于Node.js的脚手架工具。安装简单,只需要在终端运行npminstall-glass,它还提供了丰富的功能,比如使用ava进行单元测试,使用prettier自动格式化代码,自动gitinit,自动Markdown语法转换并使用Remark进行代码检查等。项目地址:https://github.com/lassjs/lass3.FastifyFastify是一个现代的Node.js框架,灵感来自于Hapi和Express等项目。除了是最快的Node框架之一,它还对开发人员友好、完全异步和完全可扩展(通过其挂钩、插件和装饰器)。项目地址:https://github.com/fastify/fastify4.DraggableDraggable是Shopify出品的轻量级响应式JS拖拽库。它提供高级拖放功能、快速DOM重新排序以及清晰的API和访问标记。同时,为了您的方便,它还附带了一些额外的模块。项目地址:https://shopify.github.io/draggable/5。MousetrapMousetrap是一个简单、轻量级的JavaScript库,可用于捕获和处理键盘事件。它支持国际键盘布局和数字小键盘的键盘事件,如按键、按键和按键。项目地址:https://craig.is/killing/mice6.src2png使用该库,可以将源码生成为语法高亮图片展示。也可以了解一下它的工作流程:src2png启动Poi开发服务程序,使用Puppeteer运行HeadlessChrome实例,完成渲染、裁剪,最后保存截图。项目地址:https://github.com/mplewis/src2png7.StencilStencil是一个简单的web组件编译器。它结合了流行框架的设计理念,使用TypeScript、JSX、虚拟DOM、Reactive数据绑定和异步渲染(类似于ReactFiber)来生成Web组件。项目地址:https://stenciljs.com/docs/intro/8.WordsToNumbersWordsToNumbers是一个有趣的JS库,可以识别单词并将其转换为数字。如果传入的字符串是数字,则返回对应的值,否则返回初始字符串。也可以使用Jaro距离进行模糊文本的最佳匹配,即使字符串中出现拼写错误的单词,也不会影响匹配结果。项目地址:https://github.com/finnfiddle/words-to-numbers9.MailforGoodMailforGood是一个开源的电子邮件营销管理软件,可以通过亚马逊的AWSSimpleMailService发送。它提供了很多邮件发送和管理功能,例如发送最大大小的邮件、导入CSV格式的邮件、创建模板、跟踪邮件退回率。项目地址:https://github.com/freeCodeCamp/mail-for-good10.Devices.cssDevices.css是一个使用纯CSS实现移动设备的库。它包括一些当前主流的移动设备,例如iPhoneX、GooglePixel2XL和三星GalaxyS8。由于其高质量的设计,它可用于登陆页面或网页快照。项目地址:https://github.com/picturepan2/devices.css11.AR.js想在移动设备上体验增强现实?然后,AR.js将帮助您完成体验之旅。它完全基于网络,可以在使用webgl和webrtc的手机上流畅运行。如果你也想试试,可以先打开这个demo:首先,在电脑浏览器中打开标有Hiro的图片,然后在手机浏览器中打开ARWebAPP,将其传输到电脑屏幕上即可。项目地址:https://github.com/jeromeetienne/AR.js12.SentinelJSSentinelJS是一个小型JavaScript库,可让您使用CSS选择器检测新的DOM节点。当添加新的DOM节点时,它会使用CSS动画效果的@keyframes规则添加到浏览器的animationstart事件中。项目地址:https://github.com/muicss/sentineljs13.Luma.GLLuma.GL是一个用于GPU数据计算和可视化的WebGL2框架。它提供了一种使用高性能的WebGL2在浏览器中显示大量数据的方式,同时还引导了一个高级的API库——deck.gl项目地址:https://github.com/uber/luma.gl14.Zoomove这个是一个jQuery插件,可让您在移动鼠标时动态缩放图像。它易于安装和使用,提供设置图像url、缩放大小、光标指针等许多属性,并兼容Chrome42+、Firefox41+、Safari9+、Opera29+和IE9+。如果您想详细了解如何使用它,还有一个教程供您参考和学习。项目地址:http://emersonthompson.com.br/zoomove/15.ScrollanimScrollanim是一个轻量级的CSS3+JS库,用于创建滚动动画。它是一个开源库,易于使用。由于使用了Animate.css和丰富的内置CSS3动画,您可以选择淡入淡出等动画效果。项目地址:http://scrollanim.kissui.io/