一次发现underscore源码bug的经历以及对学术界『拿来主义』的思考
事情是如何发生的
最近干了件事情,发现了 underscore 源码的一个 bug。这件事本身并没有什么可说的,但是过程值得我们深思,记录如下,各位看官仁者见仁智者见智。
平时有浏览园区首页文章的习惯,看到一篇关于 "函数节流" 的文章(具体是哪篇就不说了),不过很遗憾作者似乎并没有搞清楚 throttle 和 debounce 的区别(或许根本不知道 debounce)。于是随手 Google 了一下,发现大多数谈 "函数节流" 的文章都会引用《高程三》中的经典代码:

代码本身并没有问题,但是很可惜,函数名有问题,应该叫 debounce 而非 throttle,这就引发了我的思考,这个错误的概念,这段错误的代码,为什么能够 "流芳百世"?
throttle vs debounce
由于篇幅以及主题的关系,本文并不会讲 throttle 和 debounce 的具体用法以及区别等。(对此有兴趣的朋友可以跟帖,人数多的话楼主会另开一文)
有些人可能会说,凭什么你以为的 throttle 就是 throttle,debounce 就是 debounce?这就要聊聊我对于 "理解某一个概念" 的方法。
就以 throttle 为例,某日,老师给你布置了一个作业,让你深入理解一下 throttle,第二天上课来聊聊。张三心里非常高兴,这个概念在经典书籍《JavaScript高级程序设计》中见过,打开一看,就两页,而且解释地非常清晰,看完就高兴地干别的事情去了。而李四,觉得高程三讲的有点少,而去谷歌了下其他关于 throttle 的知识点,兴奋地看到 throttle 函数的好几种写法,发现高程三只是用了最简单的方式,还有更优雅运用场景更多的写法,或许此时他已经发现和 throttle 同时出现的还有个 debounce,这是什么鬼?反正老师没说,以后再看吧,于是心满意足地玩游戏去了。而王五,和李四一样发现了 debounce,这是什么?一起了解了吧,继而发现 debounce 的用法居然和高程三中的 throttle 一样!继续挖下去,发现高程三中的 throttle 函数其实应该叫 debounce,看到最后,王五已经把 throttle 和 debounce 彻底理解了。
我们要做王五。
首先,我们并不能只听一家之言。这里的一家是指 "个人",对于一些官方的文档我们还是应该充分信任的。泽卡斯也是人,犯点小错在所难免。
其次,我们对信息要做充分删选。网上的信息大多鱼龙混杂,出错了也并不会对你负任何责任。那么如何能够辨别出正确有用的信息呢?首先当然是看官方文档,比如说要了解 HTTP 那么就去看官方的 RFC,要学习 jQuery 的话可以去官网 https://jquery.org/ 查查资料,这些一般都不会有什么问题。如果觉得官网资料晦涩难懂,可以试着去看看 Wikipedia 或者XX百科,维基的精确度被很多人喷过,楼主觉得还是值得一看的,如果看英文比较吃力的,就看看国内的一些百科。第三,就是浏览一些前人的文章了,这也是最普遍但是也最容易混淆概念的地方,所以我们要尽量挑一些权威的专家级作者(比如楼主,开玩笑啦^_^)。第四,如果还是觉得没法理解,可以试着去一些问答社区,首推 stackoverflow,国内的话可以看看 segmentfault,知乎,看赞同多的回答,一般来说问题不大。
楼主找到的关于 throttle 和 debounce 区别的资料如下:
- http://benalman.com/projects/jquery-throttle-debounce-plugin/
- https://davidwalsh.name/javascript-debounce-function
- https://css-tricks.com/the-difference-between-throttling-and-debouncing/
- https://ict.ken.be/javascript-debounce-vs-throttle-function
- http://stackoverflow.com/questions/25991367/difference-between-throttling-and-debouncing-a-function
关于拿来主义
为什么这么多文章里会出现泽卡斯的错误代码?楼主想到了一个词,叫做 "拿来主义"。
很多人写博客,只是为了写博客而写博客,随便谷歌百度下,找到搜索页前几个链接,东拼西凑下,一篇新鲜的博文就诞生了,甚至都没有自己写 demo 测试下,就把代码粘贴上去了,楼主对这样的行为是嗤之以鼻的。以前写过一篇文章,叫做 get与post需要注意的几点,写这篇文章的时候,看到过一篇叫做 GET和POST有什么区别?及为什么网上的多数答案都是错的。 的文章,就深刻抨击了 "拿来主义" 这一现象。很多知名的博主写过文章来遍历写博客的好处,于是大家都纷纷效仿,为了写博客而写博客。对于楼主来说,写博客是一种享受,通常写一篇类似本文的博文需要花费 2~4 个小时,却也乐此不疲,用心写过博文的人都知道,写一篇好的文章,需要花费大量的时间,而楼主身为一个完美主义者,每次写完一篇文章,至少自己已经读过十几遍了,写完之后还要读个两三遍才敢发表,所以很少有错别字以及不通顺的句子,但是 "拿来主义" 者则不然,简单地拼接一些资料,就能生产一篇博文,在此,楼主呼吁大家,如果写,请用心。
the bug of underscore
很多谈论 throttle 和 debounce 的文章,最后都会谈到 underscore 已经将这两个方法完美封装,有的给个 underscore 的链接,有的直接上段代码,很少有去深入看看它的实现的。楼主简单地用了下 underscore 封装的 debounce 方法,发现了 bug,建了个 issue https://github.com/jashkenas/underscore/issues/2478。
好几个外国人表示并没有重现我的 bug,最后我直接指出了代码的错误之处,并给出了自己的 fix 方案(详见 https://github.com/jashkenas/underscore/pull/2479),老外才认识到了代码中的 bug,并进行了修复(虽然最后没有采纳我的代码)。详细的过程可以看上面的两个链接里的内容,主要是和 underscorejs 两个维护者之间的交流,最后从他们的更新来看应该是 test cases 写错了。
总结
最后,楼主总结两点:
- 对于知识点,请尽量查阅各种靠谱的资料,将其弄懂,不要一知半解
- 对于写博客,请弄懂了再写,不能误人子弟;如果写,请用心
最后的最后,如果可以的话,希望大家能在 Github 上关注我,或者关注我的项目,我觉得 followers 多的话,也不会在发现 bug 的时候被维护者如此忽视了 ╮(╯▽╰)╭
Github:https://github.com/hanzichi 或者直接点击页面右上角,谢谢关注!
一次发现underscore源码bug的经历以及对学术界『拿来主义』的思考的更多相关文章
- Underscore 源码
Underscore 源码 作者:韩子迟 What? 不知不觉间,「Underscore 源码解读系列」进入了真正的尾声,也请允许我最后一次 po 下项目的原始地址 https://github.co ...
- underscore源码解析(一)
留存root // Establish the root object, `window` (`self`) in the browser, `global` // on the server, or ...
- Underscore源码阅读极简版入门
看了网上的一些资料,发现大家都写得太复杂,让新手难以入门.于是写了这个极简版的Underscore源码阅读. 源码: https://github.com/hanzichi/underscore-an ...
- #啃underscore源码 一、root对象初始化部分
最近由于比赛要交了,以及工作室屯了各种项目,实在忙不过来刷题,所以很久没更blog了(良心痛),现在自己的水平还是渣代码堆砌 + 简单的增删改查(悲伤) 所以痛定思痛,决定之后的任务是先补学校课堂的知 ...
- underscore 源码解读之 bind 方法的实现
自从进入七月以来,我的 underscore 源码解读系列 更新缓慢,再这样下去,今年更完的目标似乎要落空,赶紧写一篇压压惊. 前文 跟大家简单介绍了下 ES5 中的 bind 方法以及使用场景(没读 ...
- underscore源码阅读记录
这几天有大神推荐读underscore源码,趁着项目测试的空白时间,看了一下. 整个underscore包括了常用的工具函数,下面以1.3.3源码为例分析一下. _.size = function(o ...
- 前端日报-20160527 underscore 源码解读
underscore 源码解读 API文档浏览器 JavaScript 中加号操作符细节 抛弃 jQuery,拥抱原生 JS 从 0 开始学习 GitHub 系列之「加入 GitHub」 js实现克隆 ...
- underscore源码解析 (转载)
转载出自http://www.cnblogs.com/human/p/3273616.html (function() { // 创建一个全局对象, 在浏览器中表示为window对象, 在Node.j ...
- underscore源码解析
(function() { // 创建一个全局对象, 在浏览器中表示为window对象, 在Node.js中表示global对象 var root = this; // 保存"_" ...
随机推荐
- es查询命令备份(只需要网页9200/_plugin/head/就可以访问)
本文只是写一些常用es命令,这里不用任何客户端,只用 9200/_plugin/head/ 那个端口网页就可以,然后是复合查询. 注意es其实一个idnex只能有一个type,如果一个index做了多 ...
- Intellij IDEA 常用快捷键
[常规] Ctrl+Shift + Enter,语句完成 "!",否定完成,输入表达式时按 "!"键 Ctrl+E,最近的文件 Ctrl+Shift+E,最近更 ...
- 浅析PHP中for与foreach两个循环结构遍历数组的区别
遍历一个数组是编程中最常见不过的了,这里跟大家讨论下for和foreach两种方法.用这两种方法执行遍历的场景太多太多了,这里我们只针对以下两个数组作为例子来讨论.所谓管中窥豹,多少能理清一点两者的区 ...
- SQL Server2005清除数据库日志
SQL2005清空删除日志: 复制代码 代码如下: Backup Log DNName with no_log '这里的DNName是你要收缩的数据库名,自己注意修改下面的数据库名,我就不再注释了 ...
- canvas初探2
2.2 canvas的绘图环境 canvas仅仅只是一个绘图的容器,其内存在一个绘图环境,该环境对象提供了全部的绘图功能. 目前canvas的绘图环境是2d,但canvas规范在着手准备支持其他类型的 ...
- 安卓初級教程(4):sqlite建立資料庫
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 ...
- ASP.NET MVC 5 - 查询Details和Delete方法
在这部分教程中,接下来我们将讨论自动生成的Details和Delete方法. 查询Details和Delete方法 打开Movie控制器并查看Details方法. public ActionResul ...
- SQL Azure (14) 将云端SQL Azure中的数据库备份到本地SQL Server
<Windows Azure Platform 系列文章目录> 注意: 1.只有SQL Server 2012 CU4及以上版本才支持本章内容 2.当你的数据库文件很大时,建议优化以下内容 ...
- cookie自动登录的实现
cookie自动登录是指把用户登录的信息按期限(自定)保存在客户端,当用户请求登录时判断客户端用没有cookie对象,有的话填充值,否则登录界面的输入框为空,不进行填充. 登录界面 ...
- JavaScript利用replace更改所有符合条件字符
利用replace替换字符串时,在正常使用情况下默认只能更改匹配到的第一个字符 var a=new String("fffffddd"); console.log(a.replac ...