必看的js库?只有当前阶段值不值看。
我从去年7月起看一些前端库的源码,历时一年才写了八篇《学习源码整体架构系列》文章(jQuery、underscore、lodash、sentry、vuex、axios、koa、redux
源码),并且绘制了大量的关系图和原理图。而如今写不动了...
得出的结论是:小而美的源码库值得看,收益会比较高。那看哪些小而美的源码库呢。工作中使用到的相对简单的库,就是当前阶段值得看的。掌握读源码的技能很重要。换句话说:不一定要看,但一定要会看。
我的《学习源码整体架构系列》文章,基本都写了我是如何看源码的,如何调试、提供了很多demo调试、还有图解,也收到了挺多小伙伴的支持和肯定。虽然也有小伙伴微信私聊我看完就忘记了,但我基本是回答说忘记了不要紧,你已经学会如何看了,捡起来很快,看其他的也快。
以下是几篇文章链接和部分图解:我的博客可能阅读体验更好些。若川的博客
1.学习 jQuery 源码整体架构,打造属于自己的 js 类库学习jQuery源码,主要学习它的整体架构。无new构造,核心函数 extend,链式调用等。
看完也会对原型链相关知识有比较深刻的认识。jQuery.extend在线例子codepen
jQuery.extend浅拷贝代码实现在线例子codepen
jQuery原型关系图
2.学习 underscore 源码整体架构,打造属于自己的函数式编程类库学习underscore源码,可以学到函数式编程和面向对象编程的如何相辅相成,基于流式编程,如何组织各个工具函数。
underscore链式调用图解
3.学习 lodash 源码整体架构,打造属于自己的函数式编程类库
可以学到,为何lodash性能会比underscore高。是因为lodash主要是惰性求值。先把一系列求值的函数(this指向、函数体、参数等)存起来,真正需要求值时,再把函数拿出来调用。
lodash 挂载属性和方法图
4.学习 sentry 源码整体架构,打造属于自己的前端异常监控SDK
学 sentry 源码 可以学到如何监控错误(window.onerror、window.onunhandledrejection),劫持原生函数上报,如何上报,支持fetch则用fetch,不支持则用ajax(xhr)等。
5.学习 vuex 源码整体架构,打造属于自己的状态管理库 学习Vuex源码可以学到,Vuex如何和Vue结合。Vuex源码相对简单,代码行数也不多,建议使用vue的小伙子都看一看vuex源码。
6.学习 axios 源码整体架构,打造属于自己的请求库 学完可以回答以下等问题:
- 1.为什么
axios
既可以当函数调用,也可以当对象使用,比如axios({})
、axios.get
。
2.简述axios
调用流程。
3.有用过拦截器吗?原理是怎样的?
4.有使用axios
的取消功能吗?是怎么实现的?
5.为什么支持浏览器中发送请求也支持node
发送请求?
axios 结构关系图
axios 拦截器和链式调用结构图
axios整体流程图
7.学习 koa 源码的整体架构,浅析koa洋葱模型原理和co原理 可以学到如何写koa中间件,koa
洋葱模型怎么实现的。
koa中间件gif图
调试koa中间件的在线demo
学到co
的原理是通过不断调用generator
函数的next
方法来达到自动执行generator
函数的,类似async、await
函数自动执行。
8.学习 redux 源码整体架构,深入理解 redux 及其中间件原理可以学到redux灵活性和中间件原理及实现。
redux流程图
先回答简单这些...感觉自己经常在知乎问答宣传自己的源码系列文章,然而阅读量还是很低...