大家好,很高兴又见面了,我是"高级前端?进阶?",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。
今天给大家带来的主题是Radash,即下一代的 Lodash。话不多说,直接进入正题!
1.Lodash 与 Radash的交接
Lodash 属于过去十年
Lodash 是非常优秀的前端工具库,其创建于 2009 年(名为 Underscore),并在 2012-2013 年左右分叉(名为 Lodash)后崛起。在过去 10 年,JavaScript 还未成熟,它提供了一些利用普通代码无法轻松完成的功能。
Lodash 的魅力之一在于它允许开发者将不同的类型传递给函数并根据该类型获得其他行为。 一个例子是 _.map 函数,它可以接受一个集合或一个对象并映射它们。
然而在最近的十年里,随着 JavaScript 的高速发展,前端开发者需求也在不断变化。纯函数、确定性行为和函数组合等函数概念已经在 javascript 社区深深扎根,同时 Lodash 包体积、代码质量、代码依赖性等问题也逐渐凸显。
接下来的十年属于 Radash
Radash,发音为 /raw-dash/ (Ramda + Lodash),是下一代的 Lodash。 Radash 的目标是为开发者提供需要的、强大的功能,而不是 JavaScript Runtime 现有的功能,同时需要保证源代码易于阅读、出色类型支持等等。例如:Radash 并不为开发者提供 _.map 或 _.filter 等浏览器内置函数。
同时,在过去的十年里,JavaScript 社区作为一个整体,尤其是 Typescript 社区,已经更加接近一些关键价值:确定性(deterministic)是好的,多态性(polymorphic)是坏的,强类型就是一切。基于此,Radash 也严格顺应主流, 也并不提供 Lodash 此类的多态行为。
总体来看,Radash 是下一代前端开发无法绕过的工具库,非常强大。 借助 Radash 提供的强大函数,开发者可以轻松获得强类型和零依赖性等优秀特性。
目前 Radash 在 Github 上通过 MIT 协议开源,有超过 2.2k 的 star、超过 0.5k 的项目依赖量,NPM 周平均下载量 25k,是一个值得关注的前端开源项目。
2. Radash 特性
2.1 安装 Radash
Radash 是最新的零依赖 JavaScript 实用工具库之一,在开发人员中越来越流行。 Radash 提供了诸多新功能来取代过时的 Lodash ,并不断发布更新以与最新的 JavaScript 功能保持同步。 此外,Radash 是用 TypeScript 编写的,并且类型是预先打包的。
// NPM
npm install radash
// Yarn
yarn add radash
安装 Radash 后就能够轻松使用:
import * as _ from "radash";
const gods = [
{
name: "Ra",
power: "sun",
rank: 100,
culture: "egypt",
},
];
_.max(gods, (g) => g.rank);
_.sum(gods, (g) => g.rank);
2.2 Radash 特征
可读
Radash 源代码非常易于阅读和理解,不会在大量内部库和类之间依赖、跳转。要理解 Radash,开发者只需要阅读少量代码就可以了解函数的作用或工作原理。
作为示例,下面是 _.compose 函数的源代码。
export const compose = (...funcs: Func[]) => {
return funcs.reverse().reduce((acc, fn) => fn(acc));
};
Semi-Functional
函数式编程拥有非常优秀的设计模式,开发者经常从中借鉴。然而,大多数前端开发并不是硬功能工程师(hard functional engineers)。开发者不必了解 monad 即可使用 Radash,大多数 Radash 函数都是确定性的和/或纯粹的。
支持 TypeScript
Radash 旨在提供强大的函数来解决 JavaScript 中的现代问题。 例如,与 Lodash 相比,Radash 使用 TypeScript 编写,提供开箱即用的 TypeScript 功能。
此外,Radash 中的函数类型良好、经过充分测试、文档齐全,并且以简单性为首要考虑,非常值得一试。
3.Radash 优秀函数介绍
try
_.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");
}
range
_.range 函数返回一个可用于迭代的生成器,这意味着开发者永远不必再次编写 for (let i) 循环 。
for (const i of _.range(0, 4)) {
console.log(i); // 0, 1, 2, 3, 4
}
for (const i of _.range(10, 20, 2)) {
console.log(i); // 10, 12, 14, 16, 18, 20
}
select
_.select 函数采用映射器(mapper)和过滤器(filter)函数,并在一次迭代中一起运行。 开发者无需再编写 reduce:
const superPoweredGodsFromEgypt = _.select(
gods,
(g) => ({ ...g, power: g.power * g.power }),
(g) => g.culture === "egypt"
);
defer
_.defer 函数允许开发者在运行异步函数时注册要作为清理运行的函数。它类似于 try/finally,但可以在特定时间注册 finally 块。
await _.defer(async (defer) => {
await api.builds.updateStatus("in-progress");
defer((err) => {
api.builds.updateStatus(err ? "failed" : "success");
});
fs.mkdir("build");
defer(() => {
fs.unlink("build");
});
await build();
});
objectify
_.objectify 函数可帮助开发者一步将列表转换为对象。通常,要么分两步执行此操作,要么编写一个 reduce。
const godsByCulture = _.objectify(
gods,
(g) => g.name,
(g) => g.culture
);
4.本文总结
本文主要和大家介绍 Radash,即下一代的 Lodash。相信通过本文的阅读,大家对 Radash 会有一个初步的了解。
因为篇幅有限,关于 Radash 的更多用法和特性文章并没有过多展开,如果有兴趣,可以在我的主页继续阅读,同时文末的参考资料提供了大量优秀文档以供学习。最后,欢迎大家点赞、评论、转发、收藏,您的支持是我不断创作的动力。
参考资料
https://radash-docs.vercel.app/docs/core-concepts
https://radash-docs.vercel.app/docs/getting-started
https://www.npmjs.com/package/radash
https://github.com/rayepps/radash
https://blog.bitsrc.io/will-radash-replace-lodash-796bb91c5c24
https://medium.com/vanguards-of-code/lodash-is-dead-long-live-radash-d9d52abf428b