npm 包 wrestler 使用教程

本文介绍一个适用于前端开发的 npm 包 wrestler，它提供了一些常用的 DOM 操作函数和一些实用的工具函数。

安装

在开发项目中使用 wrestler，可先运行以下命令进行安装：

npm i wrestler
// or
yarn add wrestler

DOM 操作函数

addClass(el: HTMLElement, className: string)

为指定的元素添加一个类。

import { addClass } from "wrestler";

const myEl = document.querySelector(".my-el");
addClass(myEl, "highlight");

removeClass(el: HTMLElement, className: string)

从指定的元素中删除一个类。

import { removeClass } from "wrestler";

const myEl = document.querySelector(".my-el");
removeClass(myEl, "highlight");

hasClass(el: HTMLElement, className: string): boolean

检查指定的元素是否包含指定的类。

import { hasClass } from "wrestler";

const myEl = document.querySelector(".my-el");
const hasClass = hasClass(myEl, "highlight");
console.log(hasClass);
// => true or false

toggleClass(el: HTMLElement, className: string)

如果指定的元素包含指定的类，则删除它。否则，添加它。

import { toggleClass } from "wrestler";

const myEl = document.querySelector(".my-el");
toggleClass(myEl, "highlight");

hide(el: HTMLElement)

隐藏指定的元素。

import { hide } from "wrestler";

const myEl = document.querySelector(".my-el");
hide(myEl);

show(el: HTMLElement)

显示指定的元素。

import { show } from "wrestler";

const myEl = document.querySelector(".my-el");
show(myEl);

insertAfter(el: HTMLElement, target: HTMLElement)

将指定的元素插入到目标元素的后面。

import { insertAfter } from "wrestler";

const myEl = document.querySelector(".my-el");
const targetEl = document.querySelector(".target-el");
insertAfter(myEl, targetEl);

prepend(el: HTMLElement, parent: HTMLElement)

在指定元素的起始位置前插入一个元素。

import { prepend } from "wrestler";

const myEl = document.querySelector(".my-el");
const parentEl = document.querySelector(".parent-el");
prepend(myEl, parentEl);

wrap(el: HTMLElement, wrapper: HTMLElement)

将一个元素包裹在另一个元素中。

import { wrap } from "wrestler";

const myEl = document.querySelector(".my-el");
const wrapperEl = document.querySelector(".wrapper-el");
wrap(myEl, wrapperEl);

unwrap(wrapper: HTMLElement)

解除包装并将包裹的元素移动到其父元素的位置。

import { unwrap } from "wrestler";

const wrapperEl = document.querySelector(".wrapper-el");
unwrap(wrapperEl);

offset(el: HTMLElement): {top: number, left: number}

获取指定元素相对于文档顶部和左侧的偏移量。

import { offset } from "wrestler";

const myEl = document.querySelector(".my-el");
const { top, left } = offset(myEl);
console.log(top, left);

工具函数

throttle(func: Function, interval: number): Function

创建一个节流函数，以便它在指定的时间间隔内仅执行一次。常用于性能优化。

import { throttle } from "wrestler";

const handler = () => console.log("executed");

// 在 1000ms 内，调用此函数将只执行一次
const throttledHandler = throttle(handler, 1000);

window.addEventListener("scroll", throttledHandler);

debounce(func: Function, delay: number): Function

创建一个防抖函数，以便它在调用后暂停一段时间，只有没有再次调用才会真正执行。常用于性能优化。

import { debounce } from "wrestler";

const handler = () => console.log("executed");

// 在 1000ms 后才真正执行此函数
const debouncedHandler = debounce(handler, 1000);

window.addEventListener("scroll", debouncedHandler);

结论

wrestler 提供了一些常用的 DOM 操作函数和一些实用的工具函数，使得前端开发更方便和高效。尝试使用它来提高您的开发效率！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e7d9381d61a3540b4f