一些可以与 Vanilla JS 一起使用的库

永远不要低估简单的力量。很难想象像推送实时通知、使用数据库、使用 Vanilla JS 的富文本编辑器等概念会如何应用。但你可以用它做很多事情。以下是一些库的示例，它们让 Vanilla JS 变得无可挑剔。我将尝试逐一介绍每个库的功能以及文档中提到的其他属性。

Pushjs

我一直在绞尽脑汁寻找实现推送通知功能的最佳教程。但Pushjs让我的工作变得轻松无比。它的文档简洁易懂，对初学者也很友好。

您需要做的就是在文件夹中创建一个 HTML 文件。
下一步是安装。您可以使用 npm 包管理器安装，也可以从Github下载 zip 文件。下载后，解压文件夹，并将push.min.js和serviceWorker.min.js复制粘贴到您的项目目录中。

index.html 的代码

<body>

    <script src="push.min.js"></script>
    <script src="serviceWorker.min.js"></script>

    <script>
        function start() {
            Push.create("Hello from Unnati!", {
                body: "Here's your push notification demo",
                icon: 'https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg',
                timeout: 4000,
                onClick: function () {
                    window.focus();
                    this.close();
                }
            });
        }
    </script>
    <h1>Push notification implementation</h1>
    <h3>Click on this button to view notification</h3>

    <a href="javascript:void(0)" onclick="start()">Start</a>

</body>

EditorJS

接下来，列表中最棒的库是EditorJs。我们的项目中经常需要文本编辑器，因此 EditorJs 是一个简单易用的库。你可以将它与 VanillaJs、ReactJs 和其他框架一起使用。它可以将文本加粗或斜体，或者添加标题，应有尽有。只需快速浏览一下文档，你就能清楚地了解这个库的要点。让我们开始编写代码。同样，你可以使用 npm 包管理器安装它，也可以使用它的 CDN。

索引.html

<body>
    <h1>Enter your content here</h1>

    <div id="editorjs"></div>

    <button id='button'>Save article</button>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
    <script src="index.js"></script>
  </body>

index.js

try {

  var editor = new EditorJS({
    holderId : 'editorjs',
    placeholder: 'Let`s write an awesome story!',
    autofocus: true,

  });

  editor.isReady
    .then(() => {
      console.log("Editor.js is ready to work!");
    })
    .catch((reason) => {
      console.log(`Editor.js initialization failed because of ${reason}`);
    });

  const btn = document.getElementById("button");

  btn.addEventListener("click", function () {
    editor.save().then((outputData) => {
        console.log('Article data: ', outputData)
      }).catch((error) => {
        console.log('Saving failed: ', error)
      });


  });
} catch (reason) {
  console.log(`Editor.js initialization failed because of ${reason}`);
}

安装后，如果您尝试导入 editorjs，则会出错，您需要进行一些配置才能导入。因此，您可以使用上述代码作为参考。
它还可以帮助您保存写作材料。
您可以使用许多选项来配置编辑器，例如添加标题、列表和嵌入。

import Header from '@editorjs/header';
import List from '@editorjs/list';
import MyParagraph from 'my-paragraph.js';
const editor = new EditorJS({

  tools: {
    header: Header,
    list: List,
    myOwnParagraph: MyParagraph
  },
  defaultBlock: "myOwnParagraph"
})

Howler.js

你肯定在项目中用过音频和视频标签。Howlerjs可以提升你的使用体验。它的文档对代码进行了很好的解释。以下是参考代码，可以让你对 HowlerJS 有一个基本的了解。

<script>
    var sound = new Howl({
      src: ['sound.webm', 'sound.mp3']
    });
</script>

Reveal.js

有没有想过有一天你能用 JavaScript 创建演示文稿幻灯片？Reveal.js让这一切成为可能。这是一个非常棒的库，我希望它能加入到你的列表中。你可以使用 npm 包管理器安装它，或者前往Github下载 zip 文件，并将文件添加到你的项目文件夹中。创建一个 HTML 文件，并获取所有 CSS 和 JavaScript 文件。

<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css" id="theme">
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">

Javascript 文件

<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
     Reveal.initialize({
    hash: true,
        plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
   });
</script>

对于幻灯片部分。

在index.html 的body 标签内，创建一个 id 名为 reveal 的 div，并嵌套另一个 id 名为 slides 的 div。在嵌套的 div 中，根据幻灯片的需求，继续添加 section div。

<div class="reveal">
  <div class="slides">
   <section>
    <h1>Slide 1</h1>
    <h3>This is an amazing library</h3>
   </section>
  <section>
   <h1>Slide 2</h1>
   <h3>You can just play around with a lot of stuff</h3>
  </section>
  <section>
   <h1>Slide 3</h1>
   <h3>That's it for the slide Show</h3>
   </section>
  </div>
</div>

ChartJS

演示和图表展示密不可分。JavaScript 有一个非常棒的Chartjs库，我们可以用它来呈现数据。它包含条形图、饼图、点图等等。以下是饼图的示例代码

 var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

还有很多其他流行且实用的库可以与 Vanilla Js 一起使用。这篇文章就到这里。如果您知道更多类似的优秀库，请在下方评论区留言。

文章来源：https://dev.to/commentme/some-vanilla-js-libraries-you-must-try-17a3