8个前端库-小且美

news2024/9/24 15:23:43

前提:前端有很多小而美的库,接入成本很低又能满足日常开发需求,同时无论是 npm 方式引入还是直接复制到本地使用都可以。

1.radash  

radash相比与 lodash,更加面向现代,提供更多新功能(tryit,retry 等函数),源码可读性高,大部分函数可以直接复制到本地使用。

radash和lodash的区别:

更轻量与全面‌:Radash自称为lodash plus版本,声称比lodash更轻量、更全面。它不依赖任何第三方库,仅在自己的源码里实现功能,因此非常轻量。

更好的类型安全‌:Radash采用TypeScript编写,提供了准确的类型定义,这在使用TypeScript开发时提供了更好的类型安全保障,避免了变量类型的问题,使得代码更加健壮‌。

源代码更易于理解‌:Radash的源代码设计得非常简洁且易于理解,甚至可以说是直接而暴力的实现方式,对于新手来说更容易上手,同时也非常便于维护‌。

使用方式‌:Radash的使用方式也非常便捷,通过NPM或Yarn可以轻松安装。

2.use-debounce

React Hook Debouce 库,让你不再为使用防抖烦恼。库的特点:体积小 < 1 Kb、与 underscore / lodash impl 兼容

3. timeago.js

格式化日期时间库,比如:“3 hours ago”,支持多语言,仅 2Kb 大小。同时提供了 React 版本 timeago-react。

4.react-use

实用 Hook 大合集 - 内容丰富,从跟踪电池状态和地理位置,到设置收藏夹、防抖和播放视频,无所不包。

5.dayjs

Day.js 是一个简约的 JavaScript 库,仅 2 Kb 大小。它可以使用基本兼容 Moment.js,为你提供日期的解析、处理和显示,支持多语言能力。

6.filesize

filesize.js提供了一种简单方法,便于从数字(浮点数或整数)或字符串转换成可读性高的文件大小,filesize.min.js 大小为 2.94 kb。

7.driver

driver.js 是一款用原生 js 实现的页面引导库,上手非常简单,体积在 gzip 压缩下仅仅 5kb。

8.@formkit/drag-and-drop

FormKit DnD 是一个小型拖拽库,它简单、灵活、与框架无关,压缩后只有 4Kb 左右,设计理念为数据优先。

最后欢迎在评论区推荐你们开发中的使用小而美的库!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2138488.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端层面----监控与埋点

前言&#xff1a; 站在产品的视角&#xff0c;经常会问如下几个问题&#xff1a; 产品有没有用户使用 用户用得怎么样 系统会不会经常出现异常 如何更好地满足用户需求服务用户 当站在技术视角时&#xff0c;经常会问如下几个问题&#xff1a; 系统出现异常的频率如何 异常…

MyBatis中多对一关系的三种处理方法

目录 MyBatis中多对一关系的三种处理方法 1.通过级联属性赋值 1&#xff09;mapper 2&#xff09;mapper.xml 3&#xff09;测试代码 4&#xff09;测试结果 2.通过标签 1&#xff09;mapper 2&#xff09;mapper.xml 3&#xff09;测试代码 4&#xff09;测试结果 3.分步查询 …

【技术调研】三维(4)-ThreeJs阴影投射、光线投射及案例

阴影投射 阴影是灯光经过物体后产生的&#xff0c;几个关键的设置&#xff1a; 灯光属性设置&#xff1a;.castShadow : Boolean 。此属性设置为 true 灯光将投射阴影。注意&#xff1a;这样做的代价比较高&#xff0c;需要通过调整让阴影看起来正确。 查看 DirectionalLight…

STM32(十四):USART串口数据包

HEX数据包 0xFF包头&#xff0c;0xFE包尾。 如果数据和包头包尾重复&#xff0c;可能会引起误判。 解决办法&#xff1a; 1. 限制载荷数据的范围 2. 如果无法避免载荷数据和包头包尾重复&#xff0c;就使用尽量使用固定长度数据包。 包头 ‘\r\n 包尾 在载荷数据中间可以出现…

代码23. 合并 K 个升序链表

模拟面试的时候没做出来&#xff0c;心碎了。 题目链接 . - 力扣&#xff08;LeetCode&#xff09; 自己的思考 无思考&#xff0c;直接看答案吧。 正确答案 其实写还是自己写的&#xff0c;看了下题解的思路。 第一种 思路简单&#xff0c;两两合并&#xff0c;注意事项已…

李飞飞任CEO,空间智能公司World Labs亮相,全明星阵容曝光

人工智能的下个大方向已经出现&#xff0c;标志性学者决定下场创业。 本周五&#xff0c;一个重磅消息引爆了 AI 圈&#xff1a;斯坦福大学计算机科学家李飞飞正式宣布创办 AI 初创公司 ——World Labs&#xff0c;旨在向人工智能系统传授有关物理现实的深入知识。 李飞飞说道&…

【检索快,IEEE独立出版】2024年第四届电子信息工程与计算机科学国际会议(EIECS 2024)

大会简介&#xff1a; 2024年第四届电子信息工程与计算机科学国际会议&#xff08;EIECS 2024&#xff09;将于2024年9月27日至29日在中国延吉举行。会议由长春理工大学主办&#xff0c;延边大学、长春理工大学电子信息工程学院、长春理工大学计算机科学技术学院、长春理工大学…

数据结构——栈和队列(栈的顺序存储结构和链式存储结构)

栈的定义 栈是一种重要的线性结构&#xff0c;可以这样讲&#xff0c;栈是前面讲过的线性表的一种具体形式。就像我们刚才的例子&#xff0c;栈这种后进先出的数据结构应用是非常广泛的。在生活中&#xff0c;例如我们的浏览器&#xff0c;每次点击一次“后退”都是退回到最近…

数据库密钥管理的密钥生成

数据库密钥管理是指对数据库中使用的加密密钥进行的一系列安全操作&#xff0c;以确保数据的机密性、完整性和可用性。这一管理过程通常包括密钥的生成、存储、分发、使用和销毁等环节。以下是关于数据库密钥管理的详细解析&#xff1a; 一、密钥的生成 目的&#xff1a;生成用…

谷歌图像生成AI-imagen 3新手入门指南!

1Google 最近推出了 Imagen 3&#xff0c;这是目前为止其最先进的文本生成图像模型。它基于之前的版本进行了改进&#xff0c;提供了更加精确的图像生成&#xff0c;减少了图像中的瑕疵&#xff0c;能够生成逼真、栩栩如生的图像。相比于早期版本&#xff0c;Imagen 3 可以处理…

Linux:重定向以及管道

重定向&#xff08;重新定向命令的输出&#xff09; 将前面命令的输出&#xff0c;作为内容&#xff0c;写入到后面的文件 管道 管道&#xff08;操作符号 | &#xff09; 作用&#xff1a;将前面命令的输出&#xff0c;传递给后面命令&#xff0c;作为后面命令的参数…

通信工程学习:什么是SNI业务节点接口

SNI&#xff1a;业务节点接口 SNI业务节点接口&#xff0c;全称Service Node Interface&#xff0c;是接入网&#xff08;AN&#xff09;和一个业务节点&#xff08;SN&#xff09;之间的接口&#xff0c;位于接入网的业务侧。这一接口在通信网络中扮演着重要的角色&#xff0c…

【机器学习-四-无监督学习unsupervise learning-聚类算法简介】

无监督学习unsupervise learning 聚类聚类的过程相似度度量方法聚类的方法划分式层次聚类基于密度的聚类 上一节讲的无监督学习&#xff0c;但是很多人可能会很疑惑&#xff0c;没有目标&#xff0c;那算法是怎么学会该怎样分类的呢&#xff1f;今天就简介一下其中的聚类算法。…

使用 SpringBoot 基础web开发的支持

首先导入项目相关的依赖&#xff1a; pom.xml 文件&#xff1a; 导入相关项目依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-in…

句子成分——每日一划(八)

目录 一、原句 二、第一部分 三、第二部分 一、原句 In class society everyone lives as a member of a particular class, and every kind of thinking, without exception, is stamped with the brand of a class. 来源&#xff1a;二、阶级和阶级斗争 二、第一部分 In…

免费像素画绘制软件 | Pixelorama v1.0.3

Pixelorama 是一款开源像素艺术多工具软件&#xff0c;旨在为用户提供一个强大且易于使用的平台来创作各种像素艺术作品&#xff0c;包括精灵、瓷砖和动画。这款软件以其丰富的工具箱、动画支持、像素完美模式、剪裁遮罩、预制及可导入的调色板等特色功能&#xff0c;满足了像素…

凑数字dp解决

前言&#xff1a;没有想到这个题目可以用dp来做&#xff0c;我们之前能够达到的最大的数字 当前的这一个数字为当前最大的数 ‘题目地址 #include<bits/stdc.h> using namespace std;#define int long long const int N (int)1e510;signed main() {int t; cin >>…

[全网首发]怎么让国行版iPhone使用苹果Apple Intelligence

全文共分为两个部分&#xff1a;第一让苹果手机接入AI&#xff0c;第二是让苹果手机接入ChatGPT 4o功能。 一、国行版iPhone开通 Apple Intelligence教程 打破限制&#xff1a;让国行版苹果手机也能接入AI 此次发布会上&#xff0c;虽然国行 iPhone16 系列不支持 GPT-4o&…

【Vue】2

1 Vue 生命周期 Vue生命周期&#xff1a;一个 Vue 实例从 创建 到 销毁 的整个过程 创建(create)阶段&#xff1a;组件实例化时&#xff0c;初始化数据、事件、计算属性等挂载(mount)阶段&#xff1a;将模板渲染并挂载到 DOM 上更新(update)阶段&#xff1a;当数据发生变化时…

Qt:饿汉单例(附带单例使用和内存管理)

前言 本文主要写饿汉单例以及单例的释放&#xff0c;网上很多教程只有单例的创建&#xff0c;但是并没有告诉我们单例的内存管理&#xff0c;这就很头疼。 正文 饿汉式单例 // SingletonClass.h #ifndef SINGLETONCLASS_H #define SINGLETONCLASS_H #include <QObject&g…