sQuash
 目录

sQuash

前言

虽然我不常写东西，但是我很热衷于造轮子……

——我

是了，我又造了一个新的轮子。sQuash 是一个受到 jQuery 和 Lodash 启发的使用纯 JS 编写的库。当然我现在还没怎么使用它，说不定以后也不会用到，但是我确实是写了这么一个库，这是不可否认的我的劳动成果。

你可以在浏览器的控制台中使用 sQuash 来体验它。

DOM

选择和创建元素

首先类不能直接当作函数调用，所以要使用 sQuash 选择一个元素，要这样做：

let div = sQuash.Dom.select('div')

当然没有$方便，但即便如此也比 document.querySelector 要短 4 个字符了。实在不行，也可以这样嘛：

let $ = sQuash.Dom.select $.all = sQuash.Dom.selectAll $.make = sQuash.Dom.createElement

这样是不是就方便多啦？

以上三个方法默认会返回一个 ElementWrapper 对象（或者它的数组），以便于你进行后续操作，但是如果你只想得到一个纯粹的元素，在 select 和 selectAll 的第二个参数里面填上 true。

getAllElements

获取某个节点下的所有元素，默认是 document。第一个参数是搜索的根节点，第二个参数是配置，你可以在里面决定是否要搜索 shadowRoot 以及返回 ElementWrapper 数组还是元素数组。

方法的详细参数与其他功能

这个模块的其他内容还挺多的，我暂时不想写那么多字，但是我写了一个 d.ts 文件：

函数

目前只有两个方法可用。

debounce

创建一个函数的防抖版本，不过这种事情为什么要叫防抖？

function handleScroll() { console.log('scroll') } let debounced = sQuash.Func.debounce(handleScroll) window.addEventListener('scroll', debounced)

如果要指定防抖时长，就往第二个参数那里填一个数字，像上面这样不填的话，默认是 300.

once

创建一个函数的副本，但是只能被执行一次，再次执行的话就会返回先前得到的值。这个函数的作用很简单，所以我不想写示例代码了。

颜色

hexToRGBA

第二个参数可以填'css'（默认）或者'object'。

sQuash.Color.hexToRGBA('#fff') //'rgba(255, 255, 255, 1)' sQuash.Color.hexToRGBA('#66ccff', 'object') // {r: 102, g: 204, b: 255, a: 1}

rgbToHSLA

最后一个参数同上，但默认是 'object'。

sQuash.Color.rgbToHSLA(102, 204, 255, 1, 'css') // 'hsla(200 100 70 / 1)'

create

创建一个 Color 对象，参数支持 hex 颜色代码和数字。

random

返回一个随机的 Color 对象。

Color

一个类，上面有一些属性和方法。Color 对象可以直接赋值给一个元素的 style 上的属性。

document.body.style.color = sQuash.Color.random()

随机

randomInt

返回一个指定区间内的整数，默认区间是 1 到 100。

randomNumber

返回一个指定区间内的数字，默认区间是 0 到 1。

randomPick

从一个可迭代对象（例如数组）中随机挑选一个元素。

字符串

懒得详细介绍了，你自己看吧。

sQuash.Str.camelToKebab('helloWorld') // "hello-world" sQuash.Str.kebabToCamel('hello-world') // "helloWorld" sQuash.Str.capitalize('hello world') // "Hello world"

类型

check

检测一个值的类型是否为指定的类型，或者一个对象是否是指定的类的实例。

sQuash.Type.check(1, 'number') // true sQuash.Type.check(document.createElement('div'), HTMLDivElement) // true

checkWithError

同上，但是如果类型不符的话会抛出错误而不是返回 false。

sQuash.Type.checkWithError(1, 'string', 'Invalid value.') // uncaught TypeError: Invalid value. Expected string, but got number.

isSubclassOf

sQuash.Type.isSubclassOf(HTMLElement, EventTarget) // true

isIterable

判断给定的对象是否可迭代。

isObject

判断给定的值是否是对象（注：null 会返回 false，函数会返回 true）。

常见问题

为什么要把这些函数写成类的静态方法？

因为需要一个对象作为这些函数的命名空间，所以要和普通的对象作区分，刚好类名在我的 VSCode 里面会以漂亮的红色字显示，所以我就这样做了。

我想要[某种功能]！

真有人要用这玩意啊？