1 radash

radash 是一个功能强大的工具库，主要用于简化 JavaScript 和 TypeScript 开发。

Github地址：https://github.com/sodiray/radash

它提供了多种功能函数，可以在项目中帮助处理数据。以下是从其 README 文件中提取的一个简要使用示例：

功能解释

1. _.max：找到数组中的最大值。在这个例子中，_.max 找到了 rank 值最高的神，即 Ra。
2. _.sum：对数组中的值求和。_.sum 用于计算 gods 数组中所有神的排名之和，结果为 268。
3. _.fork：将数组分为两部分，满足条件的元素会在一个数组中，其他的会在另一个数组中。在这里，我们将文化为 norse 的神与其他神分开。
4. _.sort：根据给定的标准对数组进行排序。在例子中，神根据其 rank 进行升序排序。

2 Day.js

Day.js 是一个轻量级的 JavaScript 库，主要用于处理日期和时间。它的核心功能包括日期格式化、解析、操作和展示，目标是成为与 Moment.js 类似但更小的替代品，体积仅为 2KB。Day.js 支持现代浏览器以及 Node.js 环境，兼容性好，且具有插件机制，用户可以根据需要引入附加功能。

Github地址：https://github.com/kamranahmedse/driver.js

Day.js 的主要功能：

1. 日期解析与显示：支持解析和显示多种格式的日期字符串。
2. 日期操作：可以轻松进行日期的加减操作，比如增加或减少天、月、年等。
3. 日期格式化：将日期对象格式化为指定的字符串形式。
4. 国际化：支持多种语言，允许开发者根据地区设置日期的显示方式。
5. 插件扩展：提供丰富的插件，比如高级格式化、时区处理等。

基本日期操作：

使用插件：

你可以通过插件机制扩展 Day.js 的功能。例如，如果想要处理 UTC 时间，可以引入 utc 插件：

3 Driver.js

Driver.js 是一个轻量且强大的 JavaScript 库，用于在网页应用中创建互动教程、功能介绍或用户引导工具。它通过高亮显示页面中的不同元素，帮助用户逐步了解应用的各种功能或操作步骤。

Github地址：https://github.com/kamranahmedse/driver.js

示例使用场景：

假设你有一个带有多个功能（例如仪表盘、报表和设置）的网页应用，你希望通过向导的方式帮助新用户了解如何使用这些功能。

以下是使用 Driver.js 创建逐步引导的示例代码：

解释：

1. 页面有一个“开始引导”的按钮，当用户点击时，引导开始。
2. driver.js 会依次高亮“仪表盘”、“报表”和“设置”部分，并提供相应的说明。
3. 用户可以通过引导，逐步了解每个功能的用途。

通过这个例子，可以看出 driver.js 能帮助提升用户体验，尤其是在新用户上手阶段，提供更直观的功能展示和操作指引。

4 @formkit/drag-and-drop

formKit's drag-and-drop 是一个轻量级的库，旨在为你的应用程序添加数据优先的拖拽排序和传输功能。它设计简单、灵活、无框架依赖，压缩后仅为约 4KB 大小。

Github地址：https://github.com/formkit/drag-and-drop

主要功能：

1. 支持列表拖放：允许用户通过拖拽轻松排序和重新组织列表中的项目。
2. 数据优先：专注于处理和传输数据，而不仅仅是界面上的拖拽效果。
3. 小巧轻量：压缩后的大小大约为 4KB，因此不会对应用程序的性能造成负担。

示例使用场景：

假设你有一个任务管理系统，用户可以通过拖拽来重新排列任务的优先级。

以下是如何使用 drag-and-drop 实现一个简单的拖拽排序功能：

代码说明：

1. 页面有一个带有任务的列表，用户可以通过拖拽重新排序任务。
2. 使用 drag-and-drop 库，在 ul 元素上初始化拖拽功能。
3. onDrop 事件触发时，会处理从哪个位置拖到哪个位置，并在界面上重新排列列表项。

5 logicflow

logicFlow 是一个流程图编辑框架，提供了交互和编辑的基本功能，以及灵活的节点自定义和插件机制，可满足流程图类图表的业务需求

Github地址：https://github.com/didi/LogicFlow

示例使用场景：

假设你在开发一个任务管理系统，用户可以通过绘制任务流程图来定义任务的执行顺序和依赖关系。你可以使用 LogicFlow 来实现这种功能。

下面是一个简单的示例代码，展示了如何使用 LogicFlow 构建一个基本的流程图界面：

代码说明：

1. 使用 LogicFlow 初始化一个流程图编辑器，并将其渲染在页面的 div 中。
2. 创建了两个矩形节点，分别表示“开始节点”和“执行节点”，并用一条连线连接它们。
3. 用户可以拖拽节点，修改流程图的布局。

6 ProgressBar

有了 ProgressBar.js，您就可以轻松地为网络创建响应式的时尚进度条。即使在移动设备上，动画效果也很好。它提供了一些内置形状，如直线、圆形和半圆形，但你也可以使用任何矢量图形编辑器创建自定义形状的进度条。

示例使用场景：

假设你需要在一个任务跟踪系统中展示任务的完成进度，你可以使用 progressbar.js 创建一个圆形的进度条来表示任务的完成百分比。

下面是一个示例代码：

代码说明：

1. 使用 ProgressBar.Circle 在页面上创建一个圆形的进度条，设置了线条宽度、颜色和动画时长等参数。
2. step 函数用于在动画期间动态更新进度条的颜色和文本，显示当前的百分比进度。
3. bar.animate(0.75) 设置进度条的完成度为 75%。

7 tesseract.js

tesseract.js 是一个 JavaScript 库，允许在浏览器或 Node.js 环境中进行光学字符识别（OCR），即从图像中提取文字。它是基于开源的 Tesseract OCR 引擎的 JavaScript 实现。通过使用 Tesseract.js，开发者可以在网页应用中轻松实现 OCR 功能，而无需服务器端的 OCR 服务。

Github地址：https://github.com/naptha/tesseract.js

示例使用场景：

假设你有一个网页应用，可以让用户上传图片，并从图片中提取出文字。你可以使用 Tesseract.js 来实现这个功能。

以下是一个简单的示例，展示如何在网页中使用 Tesseract.js 进行文字识别：

代码说明：

1. 文件上传：用户可以选择上传一张图片，该图片会通过 <input type="file"> 元素上传。
2. Tesseract 识别：当图片上传后，Tesseract.js 会对图片进行处理，并识别其中的文字。
3. 结果展示：识别出的文字会展示在页面的 <div id="output"> 中。
4. 多语言支持：此例子中，chi_sim 参数表示使用简体中文的 OCR 模型，你可以根据需要更改为其他语言。

8 zxcvbn

zxcvbn 是一款密码强度估算器，灵感来自密码破解者。它使用模式匹配和保守估计法识别并分析了 4 万多个常用密码，过滤掉了常见的名、姓、维基百科中的流行词和许多文化中的常用词，并识别出日期、重复（如 "aaa"）、序列（如 "abcd"）、键盘敲击（如 "qwertyuiop"）和 l33t speak 等常见模式 。

Github地址：https://github.com/zxcvbn-ts/zxcvbn

9 lottie

lottie-web 是由 Airbnb 开发的一个用于在 Web、iOS、Android 等平台上展示高质量动画的库。它通过解析 Adobe After Effects 导出的 JSON 文件，将复杂的动画以 SVG、Canvas 或 HTML 元素的形式渲染到网页中。这种方式允许开发者在网页和移动应用中无缝展示动画，而无需手动编写复杂的动画代码。

Github地址：https://github.com/airbnb/lottie-web

示例使用场景：

假设你有一个网页项目，并希望在页面加载时展示一个动画，比如应用启动的 Logo 动画。你可以通过 Lottie-web 实现这一功能。

代码说明：

1. 引入 Lottie.js：通过 CDN 引入 Lottie.js 库。
2. 创建动画容器：定义一个 div 元素用于容纳动画，并设置容器的宽度和高度。
3. 加载并播放动画：使用 lottie.loadAnimation 方法加载 JSON 文件，并将其渲染到指定的 div 容器中。该动画将使用 SVG 渲染，且循环播放。

Lottie 用途广泛，既适用于简单的加载器，也适用于复杂的交互式动画。