📌  相关文章
📜  文档就绪 vanilla js - Javascript (1)

📅  最后修改于: 2023-12-03 15:26:13.652000             🧑  作者: Mango

文档就绪：Vanilla JS - JavaScript

如果你是一位 Web 开发人员，你肯定听说过 Vanilla JS。Vanilla JS 是指使用 JavaScript 原生 API 开发的 Web 应用程序，而不依赖于任何库或框架。在本文中，我们将探讨如何使用 Vanilla JS 编写优秀的文档就绪的 Web 应用程序。

为什么使用 Vanilla JS？

尽管许多流行的 JavaScript 框架如 React 和 Vue.js 提供了许多优秀的特性和功能，但在某些情况下，使用纯 JavaScript 代码可以更加有效。以下是使用 Vanilla JS 的原因：

  1. 速度和性能：使用原生 JavaScript API 会比依赖库或框架更快，因为你省去了框架的初始化和加载时间。

  2. 可读性和可维护性：原生 JavaScript 代码更容易阅读和理解，因为你不必借助任何第三方 API。

  3. 更好的学习：如果你是新手，使用原生 JavaScript API 可以帮助你更好地理解 Web 开发的基本原理和技术。

建立文档就绪的 Vanilla JS 应用程序

建立文档就绪的 Vanilla JS 应用程序需要完成以下步骤：

步骤 1：添加 HTML 代码

我们从创建一个简单的 HTML 模板开始。在这个例子中，我们将创建一个具有标题和一个按钮的页面。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>文档就绪：Vanilla JS - JavaScript</title>
</head>

<body>
  <h1>欢迎使用文档就绪的 Vanilla JS 应用程序！</h1>
  <button id="button">点击我！</button>
</body>

</html>
步骤 2：添加 JavaScript 代码

接下来，我们将添加 Vanilla JS 代码来使按钮在点击时发生变化。

<script>
  var button = document.getElementById("button");

  button.addEventListener("click", function() {
    button.innerHTML = "已点击！";
  });
</script>

在这个例子中，我们选择了一个带有 ID “button” 的按钮，并将单击事件添加到它上面。单击后，按钮将显示“已点击！”文本。

步骤 3：启动 Web 服务器

最后，我们需要启动一个 Web 服务器来运行我们的应用程序。可以使用 Node.js 中的 http-server 模块，也可以使用 Python 3 自带的 http.server 模块。

使用 Node.js：

$ npm install http-server -g
$ http-server

使用 Python 3：

$ python -m http.server

现在，我们可以在浏览器中访问 http://localhost:8080，你将看到一个包含一个带有“点击我！”文本的按钮的页面。单击该按钮将更改其文本为“已点击！”。

总结

Vanilla JS 可以帮助开发人员更好地理解 JavaScript 和 Web 开发的基础原理。使用原生 JavaScript API 编写文档就绪的应用程序，可以提高应用程序的速度、性能、可读性和可维护性。在这里，我们介绍了如何创建一个简单的文档就绪的 Vanilla JS 应用程序。

注意：此文章中的 JavaScript 代码是在浏览器窗口中运行的脚本。生产环境中应该始终考虑代码的安全性。