分享 7 个高效的 JavaScript 库，总有一个适合你

当我们可以通过使用库轻松实现相同的结果时，为什么还要编写自定义功能？开发人员最好的朋友和救星就是这些第三方库。我相信一个好的项目会利用一些可用的最佳库。本系列就是帮助前端开发者整理一些相关的优秀的JS库，本篇是第一部分。1. handsontable"handsontable" 开源库是一个用于创建功能丰富的电子表格的 JavaScript 库。它可以让您在 Web 应用程序中创建与 Micros

文章共1,915字 · 阅读需要大约7分钟

一键AI生成摘要，助你高效阅读

问答

前端达人

1314人浏览 · 2023-02-15 08:00:22

前端达人 · 2023-02-15 08:00:22 发布

当我们可以通过使用库轻松实现相同的结果时，为什么还要编写自定义功能？开发人员最好的朋友和救星就是这些第三方库。我相信一个好的项目会利用一些可用的最佳库。本系列就是帮助前端开发者整理一些相关的优秀的JS库，本篇是第一部分。

1. handsontable

"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

2. PapaParse

这是最快的浏览器内 CSV（或分隔文本）解析器。根据 RFC 4180，它是可靠和正确的。它包括许多功能，如直接解析 CSV 文件（本地或通过网络）、流式处理大文件（甚至通过 HTTP）、反向解析（将 JSON 转换为 CSV）等等。它在 GitHub 上拥有超过 10.5k 颗星。

https://github.com/mholt/PapaParse

3. URI

"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

4. chroma

作为开发人员，我们必须处理多种颜色。这是一个小型零依赖 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

5、 i18next

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 星。

6、 fecha

fecha 库是一个快速、灵活和轻量级的日期解析和格式化 JavaScript 库。它支持解析多种格式的日期字符串，并可以将日期格式化为各种形式。使用这个库可以更容易地处理日期和时间。这是一个日期格式化和解析 (~2KB) 库，旨在取代 moment.js 的解析和格式化功能。它在 GitHub 上有超过 2k 星。

https://github.com/taylorhakes/fecha

7、 js-xss

"js-xss" 是一个用于防范跨站脚本攻击（XSS）的开源 JavaScript 库。它提供了一个简单易用的 API，用于清除、过滤和转义用户提交的不受信任数据，以防止 XSS 攻击。它在 GitHub 上拥有超过 4.5k 颗星。

https://github.com/leizongmin/js-xss

结束

今天先分享到这里，希望今天的分享对你有所帮助，在你的项目中，别忘记尝试下这几个JS库。感谢你的阅读，如果你喜欢我的分享，别忘了点赞转发，让更多的人看到，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

https://javascript.plainenglish.io/7-useful-javascript-libraries-you-should-use-in-your-next-project-47d233d24480

作者：Farhan Tanvir

非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正。