简介
Comely 是一个小巧、高效、易用的前端工具库，旨在提高前端开发效率以及代码质量。它强大的功能和极简的 API 设计，使得它对于很多 Web 开发者来说非常实用，而且它还是一个纯 JavaScript 实现的库。
功能列表
- 常用工具函数：Comely 包含了常用的工具函数，例如
isType、unique、debounce、throttle、deepClone等等，非常适合提高编写 JavaScript 代码的快感。 - dom 操作：Comely 提供了许多针对 dom 操作的工具函数，例如
create、addClass、removeClass、toggleClass、getStyle等等，让你在处理 DOM 元素时更加轻松。 - 检测支持：Comely 也提供了许多用于检测 JavaScript、CSS3、HTML5 等浏览器特性的函数，例如
supportLocalStorage、isMobile、isIE、isEdge、isIOS等等。
安装
你可以通过以下方式安装 Comely：
npm 安装
$ npm install comely
yarn 安装
$ yarn add comely
直接引用
你也可以直接在页面中引用 Comely 的 CDN 地址：
<script src="https://cdn.jsdelivr.net/npm/comely/dist/comely.min.js"></script>
使用
接下来我们将介绍 Comely 库中一些常用的函数使用方法。
一. 常用工具函数
1. isType()
isType() 函数用于检测 JavaScript 中数据类型，它接收两个参数，第一个参数为待检测的变量，第二个参数为类型字符串。
import { isType } from 'comely';
console.log(isType([], 'Array')); // true
console.log(isType([], 'Object')); // false2. unique()
unique() 函数用于去除数组中的重复项，它接收一个数组作为参数。
import { unique } from 'comely';
console.log(unique([1, 2, 3, 2, 1])); // [1, 2, 3]
console.log(unique(['a', 'b', 'a', 'c', 'd', 'c'])); // ['a', 'b', 'c', 'd']3. debounce()
debounce() 函数用于防止某些频繁触发的函数被连续执行，它接收一个函数和延时时间作为参数。
import { debounce } from 'comely';
const foo = () => console.log('debounce');
const debounceFoo = debounce(foo, 1000);
console.log(debounceFoo()); // 1000毫秒后打印 "debounce"4. throttle()
throttle() 函数用于在一定时间内只允许某些事件被执行一次，它接收一个函数和时间间隔作为参数。
import { throttle } from 'comely';
const foo = () => console.log('throttle');
const throttleFoo = throttle(foo, 1000);
console.log(throttleFoo()); // 第一次直接打印 "throttle"，之后每次间隔 1000ms 打印一次二. dom 操作
1. create()
create() 函数用于快速创建一个 dom 元素，它接收一个标签名和一些属性参数作为参数。
import { create } from 'comely';
const div = create('div', {
className: "container",
style: "width:100px;height:100px;background-color:red"
});
document.body.appendChild(div);2. addClass()
addClass() 函数用于添加 DOM 元素的样式类，它接收一个 DOM 元素和一个要添加的类名作为参数。
import { addClass } from 'comely';
const element = document.getElementById('test')；
addClass(element, 'container');3. removeClass()
removeClass() 函数用于移除 DOM 元素的样式类，它接收一个 DOM 元素和一个要移除的类名作为参数。
import { removeClass } from 'comely';
const element = document.getElementById('test')；
removeClass(element, 'container');4. toggleClass()
toggleClass() 函数用于在 DOM 元素的样式类中添加或删除一个指定的类名，如果存在则删除，如果不存在则添加，它接收一个 DOM 元素和一个要添加或删除的类名作为参数。
import { toggleClass } from 'comely';
const element = document.getElementById('test')；
toggleClass(element, 'container');三. 检测支持
1. supportLocalStorage()
supportLocalStorage() 函数用于检测浏览器是否支持 localStorage。
import { supportLocalStorage } from 'comely';
if (supportLocalStorage()) {
// 浏览器支持 localStorage
} else {
// 浏览器不支持 localStorage
}2. isMobile()
isMobile() 函数用于检测当前浏览器是否是移动设备浏览器。
import { isMobile } from 'comely';
if (isMobile()) {
// 当前浏览器为移动端设备
} else {
// 当前浏览器为 PC 端设备
}3. isIE()
isIE() 函数用于检测当前浏览器是否是 IE 浏览器。
import { isIE } from 'comely';
if (isIE()) {
// 当前浏览器为 IE 浏览器
} else {
// 当前浏览器不是 IE 浏览器
}总结
Comely 是一个高效、易用、兼容性良好的前端工具库，对编写高质量的 JavaScript 代码非常有帮助。在这篇文章中，我们已经介绍了 Comely 的安装和一些常用函数的使用方法，希望这篇文章能够帮助你更好地了解和使用 Comely。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69958