underscore-analysis
underscore-analysis copied to clipboard
lessfish
【NO LONGER UPDATE】underscore-1.8.3.js 源码解读 & 系列文章（完）
自从进入七月以来，我的 [underscore 源码解读系列](https://github.com/hanzichi/underscore-analysis) 更新缓慢，再这样下去，今年更完的目标似乎要落空，赶紧写一篇压压惊。 [前文](https://github.com/hanzichi/underscore-analysis/issues/18) 跟大家简单介绍了下 ES5 中的 bind 方法以及使用场景（没读过的同学建议先看看），毕竟 bind 是 ES5 的东西，低版本 IE 不支持。今天就根据 underscore 的实现，来聊一聊如何实现一个 bind 的 polyfill。 之前在 [ECMAScript 5(ES5) 中 bind 方法简介备忘](http://www.cnblogs.com/zichi/p/4357023.html) 一文中，给出了一个 "穷人版" 的...
# Why underscore 最近开始看 underscore.js 源码，并将 [underscore.js 源码解读](https://github.com/hanzichi/underscore-analysis) 放在了我的 2016 计划中。 阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。为什么是 underscore？最主要的原因是 underscore 简短精悍（约 1.5k 行），封装了 100 多个有用的方法，耦合度低，非常适合逐个方法阅读，适合楼主这样的 JavaScript 初学者。从中，你不仅可以学到用 void 0 代替 undefined 避免 undefined 被重写等一些小技巧 ，也可以学到变量类型判断、函数节流&函数去抖等常用的方法，还可以学到很多浏览器兼容的 hack，更可以学到作者的整体设计思路以及...
[前文](https://github.com/hanzichi/underscore-analysis/issues/20) 我们对 JavaScript 中的函数节流和函数去抖的概念和应用场景进行了简单的了解，本文我们来深入探究下函数去抖的实现。（不懂函数去抖概念的建议看下前文 [JavaScript 函数节流和函数去抖应用场景辨析 ](https://github.com/hanzichi/underscore-analysis/issues/20)） 我们以 scroll 事件为例，探究如何实现滚动一次窗口打印一个 _hello world_ 字符串。 如果不对其进行节流或者去抖控制： ``` javascript window.onscroll = function() { console.log('hello world'); }; ``` 这样每滚动一次，实际上会打印 N 多个 _hello world_。函数去抖背后的基本思想是指，某些代码不可以在没有间断的情况连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。 《高程三》给出了最简洁最经典的去抖代码（书中说是节流，实则为去抖），调用如下：...
# 前言 终于，楼主的「Underscore 源码解读系列」[underscore-analysis](https://github.com/hanzichi/underscore-analysis) 即将进入尾声，关注下 [timeline](https://github.com/hanzichi/underscore-analysis#articles源码分析过程中的产物) 会发现楼主最近加快了解读速度。十一月，多事之秋，最近好多事情搞的楼主心力憔悴，身心俱疲，也想尽快把这个系列完结掉，也好了却一件心事。 本文预计是解读系列的倒数第二篇，最后一篇那么显然就是大总结了。楼主的 Underscore 系列解读完整版地址 # 常规调用 之前写的文章，关注点大多在具体的方法，具体的知识细节，也有读者留言建议楼主讲讲整体架构，这是必须会讲的，只是楼主把它安排在了最后，也就是本文，因为楼主觉得不掌握整体架构对于具体方法的理解也是没有大的问题的。 Underscore 大多数时候的调用形式为 `_.funcName(xx, xx)`，这也是 [文档中](http://underscorejs.org/) 的调用方式。 ```javascript _.each([1, 2, 3], alert); ``` 最简单的实现方式，我们可以把 `_` 看做一个简单的对象： ```javascript var...
# Why underscore 最近开始看 underscore.js 源码，并将 [underscore.js 源码解读](https://github.com/hanzichi/underscore-analysis) 放在了我的 2016 计划中。 阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。为什么是 underscore？最主要的原因是 underscore 简短精悍（约 1.5k 行），封装了 100 多个有用的方法，耦合度低，非常适合逐个方法阅读，适合楼主这样的 JavaScript 初学者。从中，你不仅可以学到用 void 0 代替 undefined 避免 undefined 被重写等一些小技巧 ，也可以学到变量类型判断、函数节流&函数去抖等常用的方法，还可以学到很多浏览器兼容的 hack，更可以学到作者的整体设计思路以及...
[斐波那契数列](https://en.wikipedia.org/wiki/Fibonacci_number) 应该都很熟悉，如何能够快速求得斐波那契数列中某项的值呢？ 一个很显然的方法是正向地叠加求解： ``` javascript "use strict"; const N = 1000; let fibonacciNumber = []; for (let i = 0; i < 1000; i++) { if (i < 2) fibonacciNumber[i]...
# Throttle [上文](https://github.com/hanzichi/underscore-analysis/issues/21) 我们聊了聊函数去抖（debounce），去抖的作用简单说是 **使连续的函数执行降低到一次**（通常情况下此函数为 DOM 事件的回调函数），核心实现也非常简单，重复添加定时器即可（具体可以参考 [上文](https://github.com/hanzichi/underscore-analysis/issues/21)）。本文我们聊聊函数节流（throttle）。 简单的说，函数节流能使得连续的函数执行，变为 **固定时间段** 间断地执行。 还是以 scroll 事件为例，如果不加以节流控制： ``` javascript window.onscroll = function() { console.log('hello world'); }; ``` 轻轻滚动下窗口，控制台打印了 N 多个 _hello world_ 字符串。如果...
# Why underscore （觉得这部分眼熟的可以直接跳到下一段了...） 最近开始看 underscore.js 源码，并将 [underscore.js 源码解读](https://github.com/hanzichi/underscore-analysis) 放在了我的 2016 计划中。 阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。为什么是 underscore？最主要的原因是 underscore 简短精悍（约 1.5k 行），封装了 100 多个有用的方法，耦合度低，非常适合逐个方法阅读，适合楼主这样的 JavaScript 初学者。从中，你不仅可以学到用 void 0 代替 undefined 避免 undefined 被重写等一些小技巧 ，也可以学到变量类型判断、函数节流&函数去抖等常用的方法，还可以学到很多浏览器兼容的...
# Why underscore （觉得这一段眼熟的童鞋可以直接跳到正文了...） 最近开始看 underscore.js 源码，并将 [underscore.js 源码解读](https://github.com/hanzichi/underscore-analysis) 放在了我的 2016 计划中。 阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。为什么是 underscore？最主要的原因是 underscore 简短精悍（约 1.5k 行），封装了 100 多个有用的方法，耦合度低，非常适合逐个方法阅读，适合楼主这样的 JavaScript 初学者。从中，你不仅可以学到用 void 0 代替 undefined 避免 undefined 被重写等一些小技巧 ，也可以学到变量类型判断、函数节流&函数去抖等常用的方法，还可以学到很多浏览器兼容的...
# 前言 真是天一热什么事都不想干，这个月只产出了一篇文章，赶紧写一篇压压惊！ 前文（）说到楼主开始解读 underscore.js 中的 Collection Functions 部分，看了一遍这部分的源码，很多方法都是一看便懂，不需要楼主过分解读。本文来聊聊内部方法 group 的设计，这会是 Collection Functions 部分的第二篇文章，也是最后一篇文章，关于这部分其他方法的实现，可以看我的 [全文源码注释](https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/underscore-1.8.3-analysis.js)。 # _.groupBy & _.indexBy & _.countBy group 是 underscore.js 中的一个内部方法，顾名思义，为了分组而用。有三个 API 用到了这个方法，分别是 _.groupBy，_.indexBy，_.countBy。 来看看这三个 API...