underscore-analysis
underscore-analysis copied to clipboard
lessfish
【NO LONGER UPDATE】underscore-1.8.3.js 源码解读 & 系列文章（完）
源码解读这半年
作者：[韩子迟](https://github.com/hanzichi) # What? 不知不觉间，「Underscore 源码解读系列」进入了真正的尾声，也请允许我最后一次 po 下项目的原始地址 这半年以来，花费了大量的业余时间，共计写了 25 篇随笔（包括此文），也给 [underscore-1.8.3](https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/src/underscore-1.8.3.js) 的源码加了差不多 1500 行 [注释](https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/underscore-1.8.3-analysis.js)，对于当初说的要做「史上最详细的 underscore 源码剖析」，至此我也觉得问心无愧。 本文不想说我在这个过程中学到了什么，学到的东西，能写的都在前面 24 篇随笔中了，只能意会的我也说不出来（感触最深的是闭包的强大）。本文是一篇「水文」，不谈技术，抛开代码，听楼主扯扯淡。 # Why Underscore? 早期的几篇随笔都有「Why Underscore」这一节： > 阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。为什么是 Underscore？最主要的原因是 Underscore 简短精悍（约...
这篇文章拖了有两周，今天来跟大家聊聊 JavaScript 中一类特殊的对象 -> Array-Like Objects。 # Array-Like JavaScript 中一切皆为对象，那么什么是 Array-Like Objects？顾名思义，就是像数组的对象，当然，数组本身就是对象嘛！稍微有点基础的同学，一定知道 arguments 就是 Array-Like Objects 的一种，能像数组一样用 `[]` 去访问 arguments 的元素，有 `length` 属性，但是却不能用一些数组的方法，如 push，pop，等等。 那么，什么样的元素是 Array-Like Objects？我们来看看 underscore 中对其的定义。 ```...
# 前言 这篇文章本来不打算写的，实话说楼主对前端模板的认识还处在非常初级的阶段，但是为了整个 [源码解读系列](https://github.com/hanzichi/underscore-analysis) 的完整性，在深入 Underscore _.template 方法源码后，觉得还是有必要记下此文，为了自己备忘也好，为了还没用上前端模板引擎的同学的入门也好。（熟悉模板引擎的可以帮楼主看看文中有没有 BUG ..） # 后端 MVC 说起模板渲染，楼主首先接触的其实并不是前端模板引擎，而是后端。后端 MVC 模式中，一般从 Model 层中读取数据，然后将数据传到 View 层渲染（渲染成 HTML 文件），而 View 层，一般都会用到模板引擎，比如楼主项目中用到的 PHP 的 smarty 模板引擎。随便上段代码感受一下。 ``` html...
# Why underscore 最近开始看 underscore源码，并将 [underscore源码解读](https://github.com/hanzichi/underscore-analysis) 放在了我的 [2016计划](http://www.cnblogs.com/zichi/p/5107820.html) 中。 阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。为什么是 underscore？最主要的原因是 underscore 简短精悍（约 1.5k 行），封装了 100 多个有用的方法，耦合度低，非常适合逐个方法阅读，适合楼主这样的 JavaScript 初学者。从中，你不仅可以学到用 void 0 代替 undefined 避免 undefined 被重写等一些小技巧 ，也可以学到变量类型判断、函数节流&函数去抖等常用的方法，还可以学到很多浏览器兼容的 hack，更可以学到作者的整体设计思路以及 API 设计的原理（向后兼容）。...
# Why underscore 最近开始看 underscore.js 源码，并将 [underscore.js 源码解读](https://github.com/hanzichi/underscore-analysis) 放在了我的 2016 计划中。 阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。为什么是 underscore？最主要的原因是 underscore 简短精悍（约 1.5k 行），封装了 100 多个有用的方法，耦合度低，非常适合逐个方法阅读，适合楼主这样的 JavaScript 初学者。从中，你不仅可以学到用 void 0 代替 undefined 避免 undefined 被重写等一些小技巧 ，也可以学到变量类型判断、函数节流&函数去抖等常用的方法，还可以学到很多浏览器兼容的 hack，更可以学到作者的整体设计思路以及...
# Why underscore 最近开始看 underscore.js 源码，并将 [underscore.js 源码解读](https://github.com/hanzichi/underscore-analysis) 放在了我的 2016 计划中。 阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。为什么是 underscore？最主要的原因是 underscore 简短精悍（约 1.5k 行），封装了 100 多个有用的方法，耦合度低，非常适合逐个方法阅读，适合楼主这样的 JavaScript 初学者。从中，你不仅可以学到用 void 0 代替 undefined 避免 undefined 被重写等一些小技巧 ，也可以学到变量类型判断、函数节流&函数去抖等常用的方法，还可以学到很多浏览器兼容的 hack，更可以学到作者的整体设计思路以及...
# 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)，看着房价蹭蹭暴涨，心里也是五味杂陈，对未来充满恐惧和迷茫 ...（敢问一句你们上岸了吗） 言归正传，今天要介绍的是 underscore 中两个重要的方法，函数节流和函数去抖。**这篇文章不会涉及具体的代码实现**（关于代码实现请期待下文），会从零开始介绍函数节流和函数去抖的概念，辨析应用场景。为什么我对这两个方法情有独钟要花大篇幅去介绍？因为就是它们带我入了「underscore 源码解读」的坑（详见 [一次发现underscore源码bug的经历以及对学术界『拿来主义』的思考](http://www.cnblogs.com/zichi/p/5331426.html)）。 函数节流和去抖的出现场景，一般都伴随着客户端 DOM 的事件监听。举个例子，实现一个原生的拖拽功能（不能用 H5 Drag&Drop API），需要一路监听 mousemove 事件，在回调中获取元素当前位置，然后重置 dom 的位置（样式改变）。如果我们不加以控制，每移动一定像素而触发的回调数量是会非常惊人的，回调中又伴随着 DOM 操作，继而引发浏览器的重排与重绘，性能差的浏览器可能就会直接假死，这样的用户体验是非常糟糕的。**我们需要做的是降低触发回调的频率**，比如让它 500ms 触发一次，或者 200ms，甚至 100ms，这个阈值不能太大，太大了拖拽就会失真，也不能太小，太小了低版本浏览器可能就会假死，这样的解决方案就是函数节流，英文名字叫「throttle」。函数节流的核心是，**让一个函数不要执行得太频繁，减少一些过快的调用来节流。** 说完函数节流，再看它的好基友函数去抖（debounce）。思考这样一个场景，对于浏览器窗口，每做一次 resize 操作，发送一个请求，很显然，我们需要监听 resize...
# 前言 终于可以开始 Collection Functions 部分了。 可能有的童鞋是第一次看楼主的系列文章，这里再做下简单的介绍。楼主在阅读 [underscore.js](https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/src/underscore-1.8.3.js) 源码的时候，学到了很多，同时觉得有些知识点可以独立出来，写成文章与大家分享，而本文正是其中之一（完整的系列请猛戳 ）。之前楼主已经和大家分享了 Object 和 Array 的扩展方法中一些有意思的知识点，今天开始解读 Collection 部分。 看完 Collection Functions 部分的源码，首先迫不及待想跟大家分享的正是本文主题 —— 数组乱序。**这是一道经典的前端面试题，给你一个数组，将其打乱，返回新的数组，即为数组乱序，也称为洗牌问题。** 一个好的方案需要具备两个条件，一是正确性，毋庸置疑，这是必须的，二是高效性，在确保正确的前提下，如何将复杂度降到最小，是我们需要思考的。 # splice 几年前楼主还真碰到过洗牌问题，还真的是 "洗牌"。当时是用 cocos2d-js（那时还叫 cocos2d-html5）做牌类游戏，发牌前毫无疑问需要洗牌。 当时我是这样做的。每次...
# Why underscore （觉得这部分眼熟的可以直接跳到下一段了...） 最近开始看 underscore.js 源码，并将 [underscore.js 源码解读](https://github.com/hanzichi/underscore-analysis) 放在了我的 2016 计划中。 阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。为什么是 underscore？最主要的原因是 underscore 简短精悍（约 1.5k 行），封装了 100 多个有用的方法，耦合度低，非常适合逐个方法阅读，适合楼主这样的 JavaScript 初学者。从中，你不仅可以学到用 void 0 代替 undefined 避免 undefined 被重写等一些小技巧 ，也可以学到变量类型判断、函数节流&函数去抖等常用的方法，还可以学到很多浏览器兼容的...