什么是 Vanilla JavaScript

定义

"Vanilla" 在英语中是 "香草" 的意思，Vanilla JavaScript 就是指原始纯正的 JavaScript，没有使用任何框架或库。它是编写 JavaScript 代码的最基本、最纯粹的方式。

特点

轻量级

Vanilla JavaScript 可以无需任何第三方库就能完成许多前端开发任务，它非常轻量级，不需要像一些大型框架那样引入很多代码和依赖项。

纯正

Vanilla JavaScript 是使用原生 JavaScript 语言编写的代码，没有被任何框架或库包装，这样程序员可以更加理解和掌握纯 JavaScript 的本质。

灵活

JavaScript 是一种灵活的语言，Vanilla JavaScript 的使用可以让程序员不受框架或库的限制，获得更大的自由度和可定制性。

优缺点

优点

• 非常轻量级，不需要像一些大型框架那样引入很多代码和依赖项。
• 与原生 JavaScript 整合得更加紧密，开发效率更高。
• 更容易维护和升级，减少了不必要的过渡依赖。

缺点

• 对于像复杂的单页应用程序这样的项目，如果不选择使用现有的框架或库，开发成本可能会增加。
• 在一定程度上，使用原始的 JavaScript 开发可能需要一些对现代 Web 技术（例如 Webpack 和 Babel）的了解和掌握。

示例

点击按钮后弹出窗口

以下是一个使用 Vanilla JavaScript 实现点击按钮弹窗的简单示例。

<!-- HTML 部分 -->
<button id="my-button">点击我</button>

<!-- JS 部分 -->
<script>
  const myButton = document.getElementById('my-button')
  myButton.addEventListener('click', () => {
    alert('Hello World!')
  })
</script>

在上面的示例中，我们使用 document.getElementById 方法获取了 <button> 标签，并通过 myButton.addEventListener 将点击事件绑定到它上面，当用户点击时通过 alert 方法弹出窗口。这是一个非常基本的示例，同样可以通过使用 jQuery 等库或框架来实现。