背景
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。很多前端开发人员基本上都会在项目种引入 Lodash 第三方库帮助处理业务数据。在过去的十多年里,Lodash 补齐了很多 JS 数据的原生方法,帮助开发人员更轻松的处理数据。通过 npm 网站可以看看 Lodash 的下载量
每周的下载量有四千多万,可以说是非常重要的前端开发依赖
但是,这么重要的前端开发依赖的上一次版本更新却在 8 年前,如图所示
当红炸子鸡
Radash 是一个全新JS工具库。基于 JS 最新的原生方法,提供性能更好的数据除非方法。同时提供类型支持和零依赖性
前端常用方法
Radash 虽然提供了很多方法,但是下列方法是经常会用到的
debounce
debounce 确保一个函数在一定时间内只被调用一次。主要用于输入框搜索、窗口调整大小、滚动事件处理和按钮点击等场景
来看 React 项目中输入框搜索的例子
import { debounce } from "radash";
const App = () => {
const onTextChange = debounce(() => {
// do something
}, 500);
return (
<div>
<input onChange={onTextChange} />
</div>
);
};
throttle
throttle
与 debounce
类似,它也用于限制函数调用的频率,但与 debounce 不同的是,throttle 会确保在一定时间段内函数被调用的频率不会超过某个设定的阈值。换句话说,它确保函数在一定时间段内最多被调用一次
throttle
常用于处理滚动事件处理、按钮点击、拖拽操作和定时任务等场景
import { throttle } from 'radash'
const onMouseMove = () => {
rerender()
}
addEventListener('mousemove', throttle({ interval: 200 }, onMouseMove))
range
range
用于创建一个包含从 start 到 end,但不包含 end 本身范围数字的数组。笔者常用来渲染骨架屏
const App = () => {
return (
<div>
{range(5).map((i) => (
<Skeleton />
))}
</div>
);
};
try
radash 种专门提供try
方法,抽象了 try/catch
的逻辑分支,并提供错误优先回调提醒响应
const [err, response] = await _.try(api.gods.create)({ name: 'Ra' })
if (err) {
throw new Error('Your god is weak and could not be created')
}
这种处理错误的方式挺像 golang 语言的
clone
创建给定对象/值的浅拷贝
import { clone } from 'radash'
const ra = {
name: 'Ra',
power: 100
}
const gods = [ra]
clone(ra) // => copy of ra
clone(gods) // => copy of gods
uid
uid
方法用于生成唯一标识符。所以你可以不用在项目中单独引入 nanoid
第三方依赖
import { uid } from 'radash'
uid(7) // => UaOKdlW
uid(20, '*') // => dyJdbC*NsEgcnGjTHS
pick
pick
用来从对象中选取所需的属性
import { pick } from 'radash'
const fish = {
name: 'Bass',
weight: 8,
source: 'lake',
barckish: false
}
pick(fish, ['name', 'source']) // => { name, source }
omit
与 pick
相反的方法是 omit
,删除对象中不需要的属性
import { omit } from 'radash'
const fish = {
name: 'Bass',
weight: 8,
source: 'lake',
brackish: false
}
omit(fish, ['name', 'source']) // => { weight, brackish }
Radash 提供线上的 Playground 供开发人员测试所有的方法。点击链接打开Playground页面,在编辑器里输入内容,点击 run 按钮,即可得出结果
依赖大小对比
Lodash 的大小如下
Radash 的大小如下
通过对比可以看出,Radash 仅仅只是 Lodash 五分之一,如果 Radash 可以满足您的项目需求,还有什么理由要坚持使用 Lodash 呢?
总结
Radash 是一个全新 JS 工具库,大小只有 Lodash 的五分之一