作为一名前端开发人员,有哪些值得一读的js代码?

如题,求教
关注者
3,938
被浏览
464,538

68 个回答

首先反对推荐读 jQuery 源码的,里面奇技淫巧太多,代码工程角度上来看不太适合实际产品的前端项目。有些代码在工程里面实际上是非常糟糕的写法,容易被带偏。

推荐 backbone.js 的源码,非常适合新手。

首先是代码结构清楚,几大模块,View/Model/Collection 像一本书一样简单清楚的介绍了现代前端 MVC 架构的组织方式,Events 的代码对于理解 Pub/Sub 模式也很有帮助。其次是奇技淫巧少,代码规矩。还有一个优点是 Annotated Source,有一份详细注释的代码文档,阅读起来非常舒服。当然最大大大的优点是代码量少啊,足够简单。

可以先上手一下简单的 Demo,比如 Backbone 的 TODO。然后看 Annotated Source,看下 TODO 里面所涉及的一些方法的原理。或者单独研究几个模块的实现,可以从 Events。或者研究一些核心方法,比如 Model.prototype.set。

# 1月22日补充

下面提到的 underscore.js 也是很不错的项目,可以先看下文档,然后尝试自己实现里面提到的 API,然后对比下 underscore 的实现,对于了解 JS 语言特性很有帮助。

如果对 node.js 感兴趣,可以看 express 和 connect 的代码,可以了解到 HTTP 服务端的工作方式,服务端 MVC 模型,路由分发等等很有价值的工程知识。

今天看到排名第一的 @李佳怡答案,还有附带的 github 项目,这里我要实名教育一下。


backbone 这个项目的源码阅读其实是对 backbone.js 1.3.3 源码 注释的翻译,当然,我觉得这也算是一种“阅读”吧。


然后我们再看这篇 zepto的源码阅读 ,为什么和其他人的内容这么类似呢?



蓝框的内容很明显是同一段英文的不同翻译,但是红框的部分一个字不差,这个有点说不过去吧。看起来是借鉴了一部分别人翻译好的文章,然后又加上了一些自己的翻译。


underscore 这篇就太离谱了,和 @韩子迟underscore源码解析 一模一样




==================================

看到妹子一早更新了 github,增加了源码的出处和参考,给知错能改点个赞!

HTML 被叫做超文本标记语言,因为有很多文本所不具有的能力,比如说 a 标签,可以直接链接到引用的文章内容上。所以不要把超文本标记语言,用成了抄文本标记语言。

突然间有一个答案上百赞的心情我能够理解,但在出名的喜悦中不要迷失自己。其实我对于不懂事的无心之失还是挺宽容的,不懂开源世界的规矩,比如add BiuBiuBiu~ by belanhd · Pull Request #1609 · pallets/flask,哈哈哈一下就过去了。

但是把别人阅读后翻译注释的内容,让人误以为是自己的功劳,这是不对的。。。

既然做回答是为了帮助别人,我来教你可以这样回答:

我的方法就是对源码做翻译,很多成熟类库的英语注释非常详细,逐条翻译之后就能够对它有一个完整的认识了。如果一开始觉得难度较大,还可以参考一些前辈翻译好的中文注释。从阅读中文注释,到半中文注释,渐渐尝试自己去完整翻译一个英文类库,完成之后的收获和成就感都是无与伦比的。

我看了你的 github 提交记录,坚持了很长时间,确实是看了很久的源码,哪怕不是自己逐句翻译的,也很厉害了,我也相信你从中有很多收获。

只是不要因为一时虚荣而有所贪心,大方给出他人的链接并不丢人。

佛经有云:不怕念起,只怕觉迟。希望你以后也能够为开源世界做出贡献。

==================================

这两个都是backbone的源码中文注释

github.com/aircloud/bac

gist.github.com/que01/9

可以参考一下,先阅读别人注释好的代码,然后自己从英文翻译一次,会有很大收获。


underscore的话有另外一种建议,你可以对照着Underscore.js(1.8.3) 中文文档 自己去实现每一个方法,然后再对照源码去看,这样会更有收获。


zepto其实也是类似,自己试着去处理DOM的增删改查,然后对照真正的源码去看,实现的方法有什么不同。


看框架有两个层面,一个是看具体函数的写法,这是战术上的,一次看几个,要理解函数内部的原理。

再一个是看整个项目结构,大到文件夹结构,小到类的划分,继承。可以用阅读大型 JavaScript 源码时有什么好用的工具? 提到的 Jianru-Lin/lambda-view,帮你看清项目结构,知道各个部分之间的协调关系。