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