当我们可以通过使用库轻松实现相同的结果时,为什么还要编写自定义功能?开发人员最好的朋友和救星就是这些第三方库。我相信一个好的项目会利用一些可用的最佳库。本系列就是帮助前端开发者整理一些相关的优秀的JS库,本篇是第一部分。
我认为 JavaScript 不需要任何介绍。它是几乎所有用途中最常用的编程语言之一。在本篇文章,我整理了 7 个有用的 JavaScript 库,这是本系列的第三篇文章,它们将会大大提升我们的开发效率。
"handsontable" 开源库是一个用于创建功能丰富的电子表格的 JavaScript 库。它可以让您在 Web 应用程序中创建与 Microsoft Excel 类似的电子表格,并且具有许多有用的功能,例如数据验证、排序和筛选、复制粘贴等。
下面是一个简单的 Handsontable 的案例代码:
<html> <head> <script src="https://cdn.jsdelivr.net/npm/handsontable@7.2.2/dist/handsontable.full.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@7.2.2/dist/handsontable.full.min.css"> </head> <body> <div id="example"></div> <script> var data = [ ["", "Kia", "Nissan", "Toyota", "Honda"], ["2017", 10, 11, 12, 13], ["2018", 20, 11, 14, 13], ["2019", 30, 15, 12, 13] ]; var container = document.getElementById("example"); var hot = new Handsontable(container, { data: data, rowHeaders: true, colHeaders: true, filters: true, dropdownMenu: true }); </script> </body> </html>
在上面的代码中,我们首先引入了 Handsontable 的 JavaScript 库和样式表,然后创建了一个表格,将其存储在 "data" 数组中。最后,我们在 <div id="example"></div> 中创建了一个 Handsontable 实例,并启用了一些常用功能,例如行标题、列标题、过滤和下拉菜单。
如果你需要在你的 Web 应用程序中使用电子表格,那么 Handsontable 是一个很好的选择。
https://github.com/handsontable/handsontable
这是最快的浏览器内 CSV(或分隔文本)解析器。根据 RFC 4180,它是可靠和正确的。它包括许多功能,如直接解析 CSV 文件(本地或通过网络)、流式处理大文件(甚至通过 HTTP)、反向解析(将 JSON 转换为 CSV)等等。它在 GitHub 上拥有超过 10.5k 颗星。
https://github.com/mholt/PapaParse
"URI.js" 是一个 JavaScript 库,它可以用于分析、操作和生成 URL 字符串。它的目的是提供一个简单的、功能强大的方法来分析、操作和生成 URL。
下面是一个示例代码,展示了如何使用 URI.js 来解析 URL 并访问它的不同部分:
<!DOCTYPE html><html> <head> <script src="URI.min.js"></script> <script> var uri = new URI("http://example.com/path/to/file.html?query=string#fragment"); console.log("Protocol: " + uri.protocol()); console.log("Host: " + uri.host()); console.log("Path: " + uri.path()); console.log("Query string: " + uri.query()); console.log("Fragment: " + uri.fragment()); </script> </head> <body> </body> </html>
上面的代码将输出以下内容:
Protocol: http Host: example.com Path: /path/to/file.html Query string: query=string Fragment: fragment
这仅仅是 URI.js 的一个示例,它还提供了其他很多有用的方法,例如判断 URL 是否合法、修改 URL 的各个部分等等。
https://github.com/medialize/URI.js
作为开发人员,我们必须处理多种颜色。这是一个小型零依赖 JavaScript 库 (13.5kB),适用于各种颜色转换和色阶。它包括许多功能,例如从各种格式读取颜色、分析和操作颜色、将颜色转换为各种格式等等。这个库在 GitHub 上有超过 9k 星。
例如,您可以使用以下代码来生成一个颜色比例尺:
var colorScale = chroma.scale(['red', 'yellow', 'green']).mode('lab'); for (var i = 0; i <= 10; i++) { console.log(colorScale(i/10).hex()); }
这段代码会生成一个从红色到黄色再到绿色的颜色比例尺,并且使用lab颜色模式。它打印出颜色比例尺的每一阶段的颜色,表示为十六进制代码。
https://github.com/gka/chroma.js
i18next 是一个开源的国际化(i18n)库,可以帮助开发人员在他们的Web应用程序中实现国际化。
它允许开发人员定义他们的文本内容在不同语言版本中的不同表示,并且在应用程序中动态切换语言。这样可以让应用程序更适合全球范围内的用户。
示例代码:
// initialize i18next const i18n = i18next.createInstance({ lng: 'en', resources: { en: { translation: { "key": "hello world" } }, de: { translation: { "key": "hallo welt" } } } }); // change language to German i18n.changeLanguage('de'); // use the translation console.log(i18n.t('key'));
在这个示例中,我们使用 i18next.createInstance 初始化一个 i18n 实例,然后指定当前语言为 en,并且定义了两种语言的翻译:英语和德语。接下来,我们使用 i18n.changeLanguage 方法把语言切换到德语,并使用 i18n.t 方法获取翻译。
它为您提供了一个完整的解决方案,可将您的产品从 Web 本地化到移动和桌面。它在 GitHub 上有超过 6k 星。
fecha 库是一个快速、灵活和轻量级的日期解析和格式化 JavaScript 库。它支持解析多种格式的日期字符串,并可以将日期格式化为各种形式。使用这个库可以更容易地处理日期和时间。这是一个日期格式化和解析 (~2KB) 库,旨在取代 moment.js 的解析和格式化功能。它在 GitHub 上有超过 2k 星。
https://github.com/taylorhakes/fecha
"js-xss" 是一个用于防范跨站脚本攻击(XSS)的开源 JavaScript 库。它提供了一个简单易用的 API,用于清除、过滤和转义用户提交的不受信任数据,以防止 XSS 攻击。它在 GitHub 上拥有超过 4.5k 颗星。
文章来源:https://javascript.plainenglish.io/7-useful-javascript-libraries-you-should-use-in-your-next-project-47d233d24480https://github.com/leizongmin/js-xss