在现代 Web 应用开发中，使用第三方库和工具是非常常见的。在前端开发中，我们经常会遇到一些需要解决的问题，例如：数据校验、日期时间格式化、浏览器兼容性等。针对这些问题，开发人员可以借助一些优秀的第三方库来快速地解决这些问题。在这篇文章中，我们将介绍 7 个前端常用的库，并提供它们的使用示例，帮助你更好地理解它们的使用方法。
一. Validator
Validator.js，它是一个轻量级的 JavaScript 表单验证库，可用于在前端浏览器中验证表单输入数据。使用 Validator.js，你可以方便地编写和管理验证规则，它支持的验证规则包括：
1.字段必填
2.字符串长度
3.最小值和最大值
4.电子邮件地址格式
5.URL 地址格式
6.IP 地址格式
7.自定义正则表达式
等等。
你可以使用 Validator.js 在前端浏览器中轻松实现对表单输入数据的验证，从而提高用户体验和数据质量。
下面是一个简单的使用示例：
1、首先，引入 Validator.js 库文件：
<script src="validator.min.js"></script>
2、然后，创建一个表单：
<!-- 堆代码 duidaima.com -->
<form>
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<button type="submit">Submit</button>
</form>
3、接着，在 JavaScript 中编写验证规则：
const rules = {
name: 'required',
email: 'required|email',
password: 'required|min:8',
};
这里的规则表示，name 字段必填，email 字段必须是有效的电子邮件地址，password 字段必填且至少包含 8 个字符。
4、最后，在表单提交事件中调用 Validator.js 进行验证：
const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault();
const formData = new FormData(form);
const validation = validate(formData, rules);
if (validation === true) {
alert('Validation passed');
} else {
alert('Validation failed');
}
});
这里的 validate 方法是 Validator.js 提供的方法，它接受表单数据和验证规则作为参数，返回验证结果。如果验证通过，它会返回 true，否则会返回一个包含错误信息的对象。
Github地址：
https://github.com/validatorjs/validator.js
二. Hls
HLS.js，它是一个基于 JavaScript 的 HTTP Live Streaming（HLS）播放器库，可用于在浏览器中播放 HLS 视频流。使用 HLS.js，你可以在支持 HLS 播放的浏览器中（如 Safari、Chrome、Firefox 等）播放 HLS 视频流，无需任何插件或扩展。
HLS.js 支持的功能包括：
1.自适应比特率（ABR）播放，可以根据用户的网络情况自动选择最佳的视频流。
2.暂停和恢复播放。
3.跳跃到指定的时间点。
4.支持 DRM 加密。
等等。
下面是一个简单的使用示例：
1、首先，引入 HLS.js 库文件：
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
2、然后，在 HTML 中添加一个视频元素：
<video id="video" controls></video>
3、在 JavaScript 中创建一个 HLS 播放器实例：
const video = document.getElementById('video');
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource('http://example.com/video.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
}
这里的 Hls 是 HLS.js 提供的构造函数，它用于创建一个 HLS 播放器实例。isSupported 方法用于检测当前浏览器是否支持 HLS 播放，如果支持则创建一个 HLS 播放器实例。loadSource 方法用于加载 HLS 视频流，attachMedia 方法用于将视频元素和播放器实例绑定在一起。最后，使用 on 方法监听 MANIFEST_PARSED 事件，在 HLS 视频流解析完成后开始播放视频。
Github地址：https://github.com/video-dev/hls.js
三. Shepherd
Shepherd.js，它是一个用于创建网站导航、教程、导览等交互式工具提示的 JavaScript 库。使用 Shepherd.js，你可以通过简单的 JavaScript 代码创建一个交互式导览，用户可以通过箭头导航、按钮点击等方式完成导览中的操作。Shepherd.js 提供了一些内置的导览步骤类型，例如：
IntroStep: 介绍性的导览步骤，用于介绍一个新功能或页面。
ConfirmStep: 确认型的导览步骤，用于确认用户是否要执行某个操作。
TooltipStep: 工具提示型的导览步骤，用于给用户提供一些额外的信息。
下面是一个简单的使用示例：
1、首先，在 HTML 中添加一个触发导览的按钮：
<button id="open-tour">开始导览</button>
2、然后，在 JavaScript 中创建一个 Shepherd 实例：
const tour = new Shepherd.Tour({
defaultStepOptions: {
classes: 'shepherd-theme-arrows',
scrollTo: true
}
});
tour.addStep({
title: '步骤 1',
text: '这是第一个导览步骤。',
attachTo: {
element: '#element1',
on: 'bottom'
},
buttons: [
{
text: '下一步',
action: tour.next
}
]
});
tour.addStep({
title: '步骤 2',
text: '这是第二个导览步骤。',
attachTo: {
element: '#element2',
on: 'bottom'
},
buttons: [
{
text: '上一步',
action: tour.back
},
{
text: '完成',
action: tour.complete
}
]
});
document.getElementById('open-tour').addEventListener('click', function () {
tour.start();
});
这里的 Shepherd 是 Shepherd.js 提供的构造函数，用于创建一个 Shepherd 实例。defaultStepOptions 属性用于设置默认的导览步骤选项，例如指示箭头的样式、是否自动滚动等。addStep 方法用于添加一个导览步骤，其中包括标题、文本、绑定的元素等信息。buttons 属性用于设置步骤中的按钮，例如下一步、上一步、完成等操作。最后，使用 start 方法触发导览的开始。
Github地址：https://github.com/shipshapecode/shepherd
四. Vest
Vest.js，它是一个用于前端表单验证的 JavaScript 库。使用 Vest.js，你可以通过简单的 JavaScript 代码创建一个表单验证规则，包括验证字段的格式、必填性等。Vest.js 还提供了一些内置的验证规则和错误提示，可以简化表单验证的开发流程。
下面是一个简单的使用示例：
1、首先，在 HTML 中添加一个表单：
<form id="my-form">
<label>
用户名：
<input type="text" name="username" />
</label>
<br />
<label>
密码：
<input type="password" name="password" />
</label>
<br />
<button type="submit">提交</button>
</form>
2、然后，在 JavaScript 中创建一个 Vest 实例：
import vest, { test, enforce } from 'vest';
const suite = vest.create('my_suite', (data = {}, fieldName) => {
vest.only(fieldName);
test('username', '用户名不能为空', () => {
enforce(data.username).isNotEmpty();
});
test('password', '密码长度必须大于等于 6 位', () => {
enforce(data.password).longerThanOrEquals(6);
});
});
document.getElementById('my-form').addEventListener('submit', (event) => {
event.preventDefault();
const data = new FormData(event.target);
const validationResult = suite(data);
if (validationResult.hasErrors()) {
console.log(validationResult.getErrors());
} else {
console.log('表单验证通过！');
}
});
这里的 vest 是 Vest.js 提供的模块，用于创建一个 Vest 实例。create 方法用于创建一个表单验证套件，其中包括表单验证规则和错误提示。在表单验证规则中，可以使用 test 方法定义一个字段的验证规则，例如验证必填性、格式等；使用 enforce 方法指定一个字段的值，并使用一系列的验证方法进行验证。最后，使用 suite 方法对表单数据进行验证，得到验证结果。
github地址：https://github.com/ealush/vest
五. Bowser
Bowser.js，它是一个用于判断浏览器信息的 JavaScript 库。使用 Bowser.js，你可以通过简单的 JavaScript 代码获取当前浏览器的信息，包括浏览器类型、版本号、操作系统等。Bowser.js 还提供了一些方便的方法来判断当前浏览器是否支持某些特性，例如 WebSocket、LocalStorage 等。
下面是一个简单的使用示例：
<p id="browser-info"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/2.12.5/bowser.min.js"></script>
<script>
const browser = bowser.getParser(window.navigator.userAgent).getResult();
document.getElementById('browser-info').innerText = `当前浏览器：${browser.name}（版本号：${browser.version}），操作系统：${browser.osname}`;
</script>
这里的 bowser 是 Bowser.js 提供的模块，用于获取浏览器信息。使用 getParser 方法可以创建一个浏览器信息解析器，使用 getResult 方法获取解析结果。另外，可以使用 parse 方法直接解析当前浏览器的信息，并获取浏览器名称、版本号、操作系统等信息。
github地址：https://github.com/lancedikson/bowser
六. Fecha
Fecha，它是一个轻量级的 JavaScript 日期格式化和解析库。使用 Fecha，你可以轻松地将 JavaScript 的 Date 对象格式化为任何自定义日期格式的字符串，或将字符串解析为 Date 对象。下面是一个使用示例：
1、在 HTML 中添加一些文本和 JavaScript 代码：
import fecha from 'fecha';
const now = new Date();
const formattedDate = fecha.format(now, 'YYYY年MM月DD日 HH:mm:ss');
console.log(`当前时间：${formattedDate}`);
在这个示例中，我们使用 fecha.format 方法将 JavaScript 的 Date 对象格式化为指定的日期格式字符串，并在 HTML 页面中显示出来。另外，我们也可以使用 fecha.parse 方法将日期字符串解析为 Date 对象。
github地址：https://github.com/taylorhakes/fecha
七. Diff2html
diff2html，它是一个将 Git diff 或 SVN diff 转换为漂亮的 HTML 格式的 JavaScript 库。使用 diff2html，你可以将 Git diff 或 SVN diff 的文本内容转换为 HTML 格式的展示方式，以便更好地展示和分享你的代码变更。下面是一个使用示例：
1、在 HTML 中添加一些文本和 JavaScript 代码：
import Diff2Html from 'diff2html';
const diff = `diff --git a/file.txt b/file.txt
index e69de29..d03b4b4 100644
--- a/file.txt
+++ b/file.txt
@@ -0,0 +1 @@
+Hello, world!
`;
const diffHtml = Diff2Html.getPrettyHtml(diff, { inputFormat: 'diff', showFiles: false });
console.log(diffHtml);
在这个示例中，我们使用 Diff2Html.getPrettyHtml 方法将 Git diff 的文本内容转换为 HTML 格式，并在 HTML 页面中显示出来。其中，inputFormat 参数指定输入的格式为 Git diff，showFiles 参数指定不显示文件名。
github地址：https://github.com/rtfpessoa/diff2html
结束
以上是本文介绍的 7 个前端常用的库。这些库都是经过精心设计和测试的，可以帮助前端开发人员快速解决一些常见的问题。当然，这些库只是众多可选库中的一部分，而在实际项目开发中，根据实际需要选择合适的库才是最重要的。希望这篇文章能够帮助你了解这些库的用途和基本使用方法，并能够在实际开发中得到应用。
闽公网安备 35020302035485号
