underscore.js 介绍

303 阅读3分钟

对于 underscore.js这个库可能有人没有听说过,所以在本专栏开始之前,这里为大家介绍一下 underscore.js这个库是什么?怎么用?现在的影响力等等。

如果你已经知道了 underscore.js 是什么,那么你完全可以跳过这一节内容直接进入源码解析环节。

underscore.js 与 lodash

也许你没有听说过 underscore.js但是却听说过或用过 lodash,其实这两者之间是有关系的,underscore.js是在 Node.js出现前我们会使用的一个库。而随着 Node.js的兴起,underscore.js将自身代码迁移到 npm平台上形成了 lodash。这样做的好处 就是当我们使用到一个确切的内部函数的时候可以实现按需引入,这样在效率上就大大提升了,并且 lodash目前也在不断的维护。

underscore.js 是什么

官网上是这样解释的:

Underscore是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题:“如果我面对一个空白的 HTML 页面,并希望立即开始工作,我需要什么?” 他弥补了jQuery没有实现的功能,同时又是Backbone必不可少的部分。

也就是说 underscore.js的出现是为了解决早期的js语言本身对数据的处理的薄弱,所以制作的一套函数式编程的库。

Underscore 提供了100多个函数,包括常用的:mapfilterinvoke— 当然还有更多专业的辅助函数,如:函数绑定、JavaScript 模板功能、创建快速索引、强类型相等测试等等。

源码下载

对于其开发环境的源码的下载我们可以直接点击链接,选择开发环境是为了便于阅读没有压缩过的代码。

简单用法

这里展示一个数组去重函数的使用方法:

const arr = [1, 2, 3, 4, 5, 1, 2];
const res = _.unique(arr);
console.log(res); // [1, 2, 3, 4, 5]

除了直接将 _作为一个对象使用其unique方法之外,我们还可以将其当作一个函数来调用:

const arr = [1, 2, 3, 4, 5, 1, 2];
const res = _(arr).unique();
console.log(res); // [1, 2, 3, 4, 5]

流式编程

如果你熟悉 java你肯定听说过流式编程这个名词,其实写法类似于 jQuery中的链式调用。意思就是我们可以为数据进行多次处理,最终得到处理后的结果。例如,我们先将一个数组进行去重,然后将数组中的每一个数字都乘以 2 :

const arr = [1, 2, 3, 4, 5, 1, 2];
const res = _.chain(arr).unique().map(item => item * 2).value();
console.log(res); // [2, 4, 6, 8, 10]

当然也可以采用直接调用 _的形式:

const arr = [1, 2, 3, 4, 5, 1, 2];
const res = _(arr).chain().unique().map(item => item * 2).value();
console.log(res); // [2, 4, 6, 8, 10]

总结

介绍完 underscore.js这个库和它的基本使用后,我们来总结一下。

之前在jQuery的源码分析中我们说过,我们现在对 jQuery的依赖减少了,因为它其中很多优秀的设计比如promise已经被写入了语言的规范,我们已经不需要使用这些库,仅仅使用语言本身提供的 API 就可以实现。相同,对于 underscore.js也一样,随着 ES6mapsomefilterreduceforEachany等方法的出现,我们对underscore.js本身的依赖也减少了。

既然我们对这些成功的库的依赖减少了但是为什么还要学习它们呢?

我们虽然对它们的依赖减少了,但是学习其内部的设计思想,这对于我们以后的发展,或者是也需要造轮子是有着极大的帮助的。要想写出好的代码就必须看源码向大佬们学习。

还犹豫什么呢?一起跟我进行 underscore.js的源码解读吧!!!