优秀前端源码的学习和总结

Posted by liveipool on August 1, 2018

优秀前端源码的学习和总结

最近导师开始让我阅读源码写总结文章,我觉得这是一个我以前忽略掉的好习惯,或者说以前也在某些地方看到说要看源码,但也总是没有坚持下去。看源码能了解到前端生态圈里最牛的人都在干些什么事情,他们优秀的原因是什么,他们有些什么好的想法。
当然,看源码不能盲目的一头栽进去,我觉得看之前,得清楚要看什么、怎么看,能学到什么。
以下就是一些学习过程中的总结,将会随着学习的进度进行持续的更新和总结,欢迎大家指出问题,提出建议,有哪些不准确的地方也请多多包涵,一起进行完善。

一、读哪些?

underscore.js

一个JavaScript实用库,提供了一整套工具方法,github上有带注释的源码,一千多行。学习一下封装那些常用api的最佳实践。Underscore封装了 100 多个有用的方法,耦合度低,非常适合逐个方法阅读。从中,不仅可以学到用 void 0 代替 undefined 避免 undefined 被重写等一些小技巧 ,也可以学到变量类型判断、函数节流&函数去抖等常用的方法,还可以学到很多浏览器兼容的 hack,更可以学到作者的整体设计思路以及 API 设计的原理。 它是很好的函数式编程(Functional Programming)的体现。看完它后,紧接着看《javascript函数式编程》这本书。

相关链接:

Backbone.js

两千多行的MVC框架。它里面大量设计模式的灵活运用,以及令人赞叹的处理技巧,还是非常值得学习。

相关链接:

Spine.js

Spine.js与backbone类似。可以在看之前先看看本《基于MVC的JavaScript Web富应用开发》。看完后写一个自己的MVC框架。

Prototype.js

Prototype JavaScript Framework是由Sam Stephenson所开发的JavaScript框架。它提供了完整的Ajax框架及其它的工具。它的实现完全包含在一个单一的prototype.js文件中。

lodash

A modern JavaScript utility library delivering modularity, performance & extras.

相关链接:

jQuery

虽然写得好,但内容太多也不能全看,等看到jQuery再具体的分析总结.

相关链接:

Zepto.js

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto. 代码1800多行,与jQuery有着类似的api。看完后,写自己的类jQuery库。

相关链接:

Vue.js

相关链接:

Vuex

Vuex是一个专为Vue服务,用于管理页面数据状态、提供统一数据操作的生态系统。它集中于Model层,规定所有的数据操作必须通过 action - mutation - state change 的流程来进行,再结合Vue的数据视图双向绑定特性来实现页面的展示更新。统一的页面状态管理以及操作处理,可以让复杂的组件交互变得简单清晰,同时可在调试模式下进行时光机般的倒退前进操作,查看数据改变过程,使code debug更加方便。

相关链接:

React

React的源码适合有函数式编程经验的人看。

Redux

Redux 的源码非常的精炼,短短几百行代码,却提供了强大的功能。

相关链接:

  • redux 源码解读:redux并不局限于flux与react。redux 自身保持简洁以便适配各种场景,让社区发展出各种 redux-* 中间件或者插件,从而形成它自己的生态系统。

Angular

gulp

基于流的自动化构建工具。

webpack

现代 JavaScript 应用程序的静态模块打包器。

Node.js

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

相关链接:

echarts

处理canavs的库

MobX

简单、可扩展的状态管理

async

Async is a utility module which provides straight-forward, powerful functions for working with asynchronous JavaScript.

JavaScript Patterns Collection

一些 JavaScript 模式的介绍,以及实现。

UI框架

Normalize.css

Normalize-zh.css 是根据对 Normalize.css 的源码分析后,经过学习与整理,将源代码中的英文注释文档翻译为中文版本,方便国内的开发者学习和使用。

相关链接:

  • normalize.css: 能了解到各不同浏览器的默认样式之间的差异以及某些浏览器对某些元素设置的“奇怪”默认样式。

Bootstrap

纯手写CSS时会遇到各种各样的问题,看看Bootstrap是怎么解决这些问题的。

相关链接:

  • Bootstrap 的 JS 插件:Bootstrap 的 JS 插件都是基于 jQuery 的,每个插件也就一两百行代码。

element-ui

很优秀的设计。

Snippents

几行代码片段实现一些简单常见的功能。

Animate.css

能了解常见的动画效果名称,以及如何 CSS 来写动画。

fastclick

学习一波手势与事件

二、怎么读?

看到很多人都说,一定要带着问题去读,比如:这个库/框架实现了一个什么东西,它是怎么实现的?为什么其他库不能支持这个功能,而它能支持?只有带着问题,读着才有目的性,才能真正学到东西。

  1. 在准备看一个开源项目源码的时候先去熟悉下这个项目的背景、功能以及相应的API。这步为了理解整个项目的功能做准备,也是为了后面重点看哪些模块做准备。
  2. 查看项目的README.md文件。有些项目会在将设计文档和架构图放到md文件上,这样会让你宏观上对一些概念有些认识。
  3. 了解目录结构,知道各个模块/文件夹的基本功能。
  4. 从一些重要文件和入口文件开始,如package.json。
  5. 当你深入读到某一块源码不理解,先试着在网上找找有没有相关的资料学习下,实在找不到可以先标记下放着,等你看到后面再回过头来看不理解的地方或者会茅塞顿开。
  6. 在你阅读的过程中,如果发现一些代码片段很精妙的可以记录一下,或者尝试下有没有更好的方式去实现。
  7. 当你不了解某个模块的作用时,你可以去看看测试用例,特别是单元测试(unit),测试用例包含对输入输出的校验,从这里可以快速了解到模块相关的作用。
  8. 要学会给项目打断点,在边读边运行项目源码的过程中,通过断点输出当前执行的堆栈信息对你理解项目也是有很大的帮助。

三、能学到什么?

  • 技巧
  • 设计原则
  • 待补充…

学习项目源码往往周期比较长,最好的就是能够将项目Fork下来,慢慢去研究、记录看源码过程中的一些心得,在阅读的过程中不断加上自己的注释和理解,到最后看完再回过头来能说出它的架构和设计,阅读源码的终究目标是了解项目,最终能实现它。

四、一些阅读工具

这些工具只是先看到记录下来,在后面进行阅读的时候具体使用再去评价是否好用,但工具这种东西,的确也是因人而异,找到最适合自己的工具就好。

  • lambda-view:provides you a better way to READ JavaScript source code.
  • Octotree:浏览器扩展,在github上面显示代码树,对你了解整个项目结构有着非常大的帮助。
  • webstorm,工具比较全面,比如支持typescript、babel等等一些前端经常用到的工具。
  • SourceTree,git可视化客户端工具,如果你喜欢从第一个commit开始看,那么这个工具对你比较有帮助,看看快速了解到每个版本提交的内容以及源码变更记录。
  • 高效阅读Github源代码

五、参考文档

赞赏码.jpeg