什么是 wheelie
wheelie 是一个轻量级的 JavaScript 工具库，专注于提供 DOM 操控、事件绑定和样式修改等基础功能。它不仅代码精简，而且做到了模块化设计，所以可以轻松地按需加入项目。
安装
要在项目中使用 wheelie，首先需要通过 npm 安装该库：
npm i wheelie
引入 wheelie
有两种方式可以引入 wheelie：
1. 脚本引入
直接通过 script 标签引入 wheelie 的脚本：
<script src="path/to/wheelie.min.js"></script>
这样做可以将 wheelie 导入到全局作用域中，方便在项目中使用它的各种方法。但这同时也会拖慢页面加载速度。
2. 模块引入
使用 ES6 的 import 语句引入库中的方法：
import { on, off, css } from 'wheelie';基础方法
wheelie 提供了丰富的基础方法，主要包括：
1. on
绑定事件监听器。
参数
el：DOM 元素。event：事件名字符串。selector：（可选）用于委托事件的选择器字符串。handler：回调函数。
const btn = document.querySelector('button');
on(btn, 'click', (e) => {
console.log('button clicked');
});2. off
移除事件监听器。
参数
el：DOM 元素。event：事件名字符串。selector：（可选）用于委托事件的选择器字符串。handler：回调函数。
const btn = document.querySelector('button');
const handleBtnClick = (e) => {
console.log('button clicked');
};
on(btn, 'click', handleBtnClick);
off(btn, 'click', handleBtnClick);3. css
设置或获取指定 DOM 元素的样式属性。
参数
el：DOM 元素。prop：样式属性名字符串。value：（可选）新的样式值。
const box = document.querySelector('.box');
css(box, 'background-color', 'red');
console.log(css(box, 'background-color')); // => 'red'4. addClass
为指定 DOM 元素添加一个或多个类名。
参数
el：DOM 元素。classNames：要添加的类名字符串，多个类名用空格分隔。
const box = document.querySelector('.box');
addClass(box, 'active');5. removeClass
从指定 DOM 元素中移除一个或多个类名。
参数
el：DOM 元素。classNames：要移除的类名字符串，多个类名用空格分隔。
const box = document.querySelector('.box');
removeClass(box, 'active');以上五个是 wheelie 的主要基础方法，但 wheelie 还提供了更多实用功能。
实用方法
1. query
查找指定元素的后代元素。
参数
el：DOM 元素或选择器字符串。selector：选择器字符串（可选）。
// 获取 body 元素的所有子节点
query(document.body);
// 获取所有 .box 元素的子节点
query('.box');
// 获取指定 .box 元素内的 .container 元素
query('.box', '.container');2. create
创建 DOM 元素。
参数
tagName：要创建的元素的标签名字符串。attrs：（可选）要设置的属性对象。children：（可选）子元素的数组。
const div = create('div', { class: 'box' }, [
create('p', {}, 'hello'),
create('p', {}, 'world'),
]);
document.body.append(div);3. once
绑定一次性事件监听器。
参数
el：DOM 元素。event：事件名字符串。handler：回调函数。
const btn = document.querySelector('button');
once(btn, 'click', (e) => {
console.log('button clicked');
});4. throttle
节流函数，即在一定时间内限制函数被频繁执行。
参数
fn：要执行的函数。wait：每次执行的间隔时间（毫秒）。
const handleScroll = (e) => {
console.log('scrolling');
};
window.addEventListener('scroll', throttle(handleScroll, 500));5. debounce
防抖函数，即当函数被频繁调用时，只有在一定时间内未再次调用才会执行。
参数
fn：要执行的函数。wait：存在的持续时间（毫秒）。
const handleInput = (e) => {
console.log('inputting');
};
const inputEle = document.querySelector('input');
inputEle.addEventListener('input', debounce(handleInput, 500));总结
以上是 wheelie 的使用教程，wheelie 可以让开发者轻松地实现 DOM 操作、事件绑定和样式修改等基础功能。它的代码简单易懂，而且具有模块化设计，可以让开发者按需引入所需方法。使用 wheelie 可以减少代码冗余，提高开发效率，建议在开发中尝试使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710b8dd3466f61ffe0e1