常用操作

将指定 DOM 元素平滑滚动到视图中

代码

/**
 * 将指定DOM元素平滑滚动到视图中
 * @param element 目标DOM元素或元素选择器字符串
 * @param options 滚动配置项（可选）
 * @returns 是否成功执行滚动
 */
function smoothScrollToElement(
  element: HTMLElement | string,
  options: ScrollIntoViewOptions = {
    behavior: "smooth", // 平滑滚动
    block: "start", // 垂直方向对齐方式：start/center/end/nearest
    inline: "nearest", // 水平方向对齐方式
  }
): boolean {
  // 获取目标DOM元素
  let targetElement: HTMLElement | null;

  if (typeof element === "string") {
    // 如果是选择器字符串，尝试获取元素
    targetElement = document.querySelector<HTMLElement>(element);
  } else {
    // 如果是DOM元素，直接使用
    targetElement = element;
  }

  // 检查元素是否存在
  if (!targetElement) {
    console.warn("目标元素不存在");
    return false;
  }

  // 执行平滑滚动
  targetElement.scrollIntoView(options);
  return true;
}

使用示例

// 1. 通过选择器滚动
smoothScrollToElement("#target-section");

// 2. 通过DOM元素滚动
const targetElement = document.getElementById("user-profile");
if (targetElement) {
  smoothScrollToElement(targetElement, {
    behavior: "smooth",
    block: "center", // 垂直居中对齐
  });
}

// 3. 水平滚动示例（适用于横向滚动容器）
const horizontalElement =
  document.querySelector<HTMLElement>(".horizontal-item");
if (horizontalElement) {
  smoothScrollToElement(horizontalElement, {
    behavior: "smooth",
    inline: "center", // 水平居中对齐
  });
}

清理并格式化键名

/**
 * 清理并格式化键名
 * @param {string} code - 需要清理的原始键名
 * @returns {string} 清理后的键名
 */
export function cleanKey(code) {
  if (code) {
    // 去除首尾空格
    code = code.trim();
    // 定义需要替换的特殊字符正则模式1
    const pattern1 =
      /[`\–~!@#$%^&*()\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+=｛｝|《》？：“”【】、；‘’，。、]/gim;
    code = code
      .replace(/ +/g, "_")
      .replace(pattern1, "_")
      .replace(/_+/g, "_")
      .toLowerCase();
    code = code.replace(/^_+/, "").replace(/_+$/, "");
    code = code.replace(/[\u4e00-\u9fa5]/g, ""); // 去除汉字
  }
  return code;
}

操作 HTML 元素的 class 属性

常用代码

假设页面中有一个元素：

<div id="box" class="container bg-white"></div>

// 获取元素
const box = document.getElementById("box");

// 1. 添加类名
box.classList.add("shadow"); // 现在 class 为 "container bg-white shadow"
box.classList.add("rounded", "p-4"); // 一次添加多个类

// 2. 移除类名
box.classList.remove("bg-white"); // 现在 class 为 "container shadow rounded p-4"
box.classList.remove("rounded", "p-4"); // 一次移除多个类

// 3. 切换类名（常用场景：点击切换状态）
box.classList.toggle("active"); // 添加 'active'（因原本没有）
box.classList.toggle("active"); // 移除 'active'（因已存在）

// 强制切换：第二个参数为 true 则强制添加，false 则强制移除
box.classList.toggle("highlight", true); // 强制添加 'highlight'

// 4. 检查是否包含类名
const hasContainer = box.classList.contains("container"); // true
const hasRed = box.classList.contains("bg-red"); // false

// 5. 替换类名（IE 不支持，可降级为 remove + add）
box.classList.replace("shadow", "shadow-lg"); // 替换类名
// 降级方案：box.classList.remove('shadow'); box.classList.add('shadow-lg');

// 6. 获取所有类名（返回类名数组）
const classes = Array.from(box.classList);
console.log(classes); // ['container', 'shadow-lg', 'highlight']

// 批量添加类名（利用展开运算符）
const newClasses = ["border", "transition", "duration-300"];
box.classList.add(...newClasses);

// 批量移除类名
const oldClasses = ["border", "shadow-lg"];
box.classList.remove(...oldClasses);

基于条件切换类（如表单验证）

<input type="text" id="username" class="input" />

const usernameInput = document.getElementById("username");

// 验证输入并切换类
function validateInput() {
  const value = usernameInput.value.trim();
  if (value.length < 3) {
    // 验证失败：添加错误类，移除成功类
    usernameInput.classList.add("error");
    usernameInput.classList.remove("success");
  } else {
    // 验证成功：添加成功类，移除错误类
    usernameInput.classList.add("success");
    usernameInput.classList.remove("error");
  }
}

// 输入时触发验证
usernameInput.addEventListener("input", validateInput);

切换组件状态（如导航菜单激活项）

<ul class="nav">
  <li class="nav-item active">首页</li>
  <li class="nav-item">产品</li>
  <li class="nav-item">关于</li>
</ul>

// 点击导航项时，切换 active 类
const navItems = document.querySelectorAll(".nav-item");

navItems.forEach((item) => {
  item.addEventListener("click", () => {
    // 先移除所有项的 active 类
    navItems.forEach((nav) => nav.classList.remove("active"));
    // 给当前点击项添加 active 类
    item.classList.add("active");
  });
});

vue3 F5 刷新监听

<template>
  <div>监听 F5 刷新事件示例</div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";

// 定义刷新事件处理函数
const handleBeforeUnload = (e) => {
  // 1. 执行清理操作（如取消请求、保存临时数据等）
  console.log("页面即将刷新或关闭，执行清理...");

  // 2. 可选：提示用户是否确认刷新（部分浏览器支持）
  // 注意：现代浏览器可能忽略自定义提示文本，统一显示默认提示
  e.preventDefault();
  e.returnValue = "确定要离开吗？未保存的数据可能会丢失。"; // 自定义提示文本
  return e.returnValue;
};

// 组件挂载时注册事件监听
onMounted(() => {
  window.addEventListener("beforeunload", handleBeforeUnload);
});

// 组件卸载时移除事件监听（避免内存泄漏）
onUnmounted(() => {
  window.removeEventListener("beforeunload", handleBeforeUnload);
});
</script>