Underscore 整体架构浅析

前言

终于,楼主的「Underscore 源码解读系列」underscore-analysis 即将进入尾声,关注下 timeline 会发现楼主最近加快了解读速度。十一月,多事之秋,最近好多事情搞的楼主心力憔悴,身心俱疲,也想尽快把这个系列完结掉,也好了却一件心事。

本文预计是解读系列的倒数第二篇,最后一篇那么显然就是大总结了。楼主的 Underscore 系列解读完整版地址 https://github.com/hanzichi/underscore-analysis

常规调用

之前写的文章,关注点大多在具体的方法,具体的知识细节,也有读者留言建议楼主讲讲整体架构,这是必须会讲的,只是楼主把它安排在了最后,也就是本文,因为楼主觉得不掌握整体架构对于具体方法的理解也是没有大的问题的。

Underscore 大多数时候的调用形式为 _.funcName(xx, xx),这也是 文档中 的调用方式。

最简单的实现方式,我们可以把 _ 看做一个简单的对象:

在 JavaScript 中,一切皆对象,实际上,源码中的 _ 变量是一个方法:

为什么会是方法?我们接下去看。

OOP

Underscore 支持 OOP 形式的调用:

这其实是非常经典的「无 new 构造」,_ 其实就是一个 构造函数_([1, 2, 3]) 的结果就是一个对象实例,该实例有个 _wrapped 属性,属性值是 [1, 2, 3]。实例要调用 each 方法,其本身没有这个方法,那么应该来自原型链,也就是说 _.prototype 上应该有这个方法,那么,方法是如何挂载上去的呢?

方法挂载

现在我们已经明确以下两点:

  1. _ 是一个函数(支持无 new 调用的构造函数)
  2. _ 的属性有很多方法,比如 _.each_.template 等等

我们的目标是让 _ 的构造实例也能调用这些方法。仔细想想,其实也不难,我们可以遍历 _ 上的属性,如果属性值类型是函数,那么就将函数挂到 _ 的原型链上去。

源码中用来完成这件事的是 _.mixin 方法:

_.mixin 方法可以向 Underscore 库增加自己定义的方法:

同时,Underscore 也加入了一些 Array 原生的方法:

链式调用

Underscore 也支持链式调用:

乍一看似乎有 OOP 和非 OOP 两种链式调用形式,其实只是一种,_.chain([1, 2, 3])_([1, 2, 3]).chain() 的结果是一样的。如何实现的?我们深入 chain 方法看下。

我们看下 _.chain([1, 2, 3]) 的结果,将参数代入函数中,其实就是对参数进行无 new 构造,然后返回实例,只是实例多了个 _chain 属性,其他的和直接 _([1, 2, 3]) 一模一样。再来看 _([1, 2, 3]).chain()_([1, 2, 3]) 返回构造实例,该实例有 chain 方法,调用方法,为实例添加 _chain 属性,返回该实例对象。所以,这两者效果是一致的,结果都是转为了 OOP 的形式。

说了这么多,似乎还没讲到正题上,它是如何「链」下去的?我们以如下代码为例:

当调用 map 方法的时候,实际上可能会有返回值。我们看下 _.mixin 源码:

result 是一个重要的内部帮助函数(Helper function ):

如果需要链式操作(实例会有带有 _chain 属性),则对运算结果调用 chain 函数,使之可以继续链式调用。

小结

Underscore 整体架构,或者说是基础实现大概就是这个样子,代码部分就讲到这了,接下去系列解读最后一篇,讲讲这段时间(几乎也是历时半年了)的一些心得体会吧,没钱的就捧个人场吧!

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

1 1 收藏 评论

关于作者:韩子迟

a JavaScript beginner 个人主页 · 我的文章 · 7 ·    

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部