Vanilla JS - JavaScript

Vanilla JS 是一种流行的 JavaScript 库，它专注于使用纯粹的 JavaScript 来开发 Web 应用程序。它的目标是使开发过程更加简单、快速和高效，同时提供一个轻量级且功能强大的开发环境。

特点

• 无依赖：Vanilla JS 并不依赖于其他任何第三方库或框架，它只使用纯粹的 JavaScript 语言功能。
• 快速：由于没有任何额外的依赖，Vanilla JS 在加载和执行时非常轻巧和快速。
• 灵活：Vanilla JS 提供了广泛的 API 和工具，可以满足几乎所有的 Web 开发需求。
• 跨浏览器兼容：Vanilla JS 在不同的浏览器和设备上都能提供一致且稳定的开发体验。

主要功能

DOM 操作

Vanilla JS 提供了简洁而功能强大的 DOM 操作工具，让开发者能够方便地操作和交互 HTML 文档。

// 获取元素
var element = document.querySelector("selector");

// 修改元素内容
element.innerHTML = "新内容";

// 添加事件监听器
element.addEventListener("click", function() {
  // 处理点击事件
});

// 创建新元素
var newElement = document.createElement("div");

// 添加新元素到文档中
document.body.appendChild(newElement);

AJAX 请求

通过 Vanilla JS，可以轻松地发起 AJAX 请求，从服务器获取数据，而无需其他库的支持。

// 发送 GET 请求
var xhr = new XMLHttpRequest();
xhr.open("GET", "url", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 处理响应数据
  }
};
xhr.send();

// 发送 POST 请求
var xhr = new XMLHttpRequest();
xhr.open("POST", "url", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 处理响应数据
  }
};
xhr.send(JSON.stringify(data));

动画效果

Vanilla JS 提供了简单而灵活的动画效果功能，使页面元素可以流畅过渡或实现复杂的动画效果。

// 淡入效果
function fadeIn(element, duration) {
  element.style.opacity = 0;
  var startTime = Date.now();

  function step() {
    var currentTime = Date.now();
    var progress = Math.min((currentTime - startTime) / duration, 1);
    element.style.opacity = progress;
    if (progress < 1) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

// 使用
var element = document.querySelector(".element");
fadeIn(element, 1000);

表单验证

通过 Vanilla JS 可以轻松地进行表单验证，以确保用户输入的数据符合规则和要求。

// 表单验证
var form = document.querySelector("#myForm");
form.addEventListener("submit", function(event) {
  event.preventDefault();
  
  var input = document.querySelector("#myInput");
  var value = input.value;
  
  if (value === "") {
    // 显示错误消息
    input.classList.add("error");
    var error = document.querySelector(".error-message");
    error.innerHTML = "请输入有效的数据";
  } else {
    // 提交表单
    form.submit();
  }
});

资源

• GitHub 仓库: https://github.com/vanilla/vanilla-js
• 官方网站: https://vanilla-js.com/

使用 Vanilla JS，你可以以一种简单而原生的方式编写功能强大的 JavaScript Web 应用程序。无需学习新的语法或概念，只需利用纯粹的 JavaScript 知识即可实现各种需求。