是时候抛弃 Lodash 了,试试当红炸子鸡 Radash 吧!!!

2,935 阅读3分钟

背景

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。很多前端开发人员基本上都会在项目种引入 Lodash 第三方库帮助处理业务数据。在过去的十多年里,Lodash 补齐了很多 JS 数据的原生方法,帮助开发人员更轻松的处理数据。通过 npm 网站可以看看 Lodash 的下载量

image.png

每周的下载量有四千多万,可以说是非常重要的前端开发依赖

但是,这么重要的前端开发依赖的上一次版本更新却在 8 年前,如图所示

image.png

当红炸子鸡

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

throttledebounce 类似,它也用于限制函数调用的频率,但与 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 的大小如下

image.png

Radash 的大小如下

image.png

通过对比可以看出,Radash 仅仅只是 Lodash 五分之一,如果 Radash 可以满足您的项目需求,还有什么理由要坚持使用 Lodash 呢?

总结

Radash 是一个全新 JS 工具库,大小只有 Lodash 的五分之一