0
点赞
收藏
分享

微信扫一扫

若川知乎高赞:有哪些必看的 JS 库?



必看的js库?只有当前阶段值不值看。

我从去年7月起看一些前端库的源码,历时一年才写了八篇《学习源码整体架构系列》文章(​​jQuery、underscore、lodash、sentry、vuex、axios、koa、redux​​源码),并且绘制了大量的关系图和原理图。而如今写不动了...

得出的结论是:小而美的源码库值得看,收益会比较高。那看哪些小而美的源码库呢。工作中使用到的相对简单的库,就是当前阶段值得看的。掌握读源码的技能很重要。换句话说:不一定要看,但一定要会看

我的《学习源码整体架构系列》文章,基本都写了我是如何看源码的,如何调试、提供了很多demo调试、还有图解,也收到了挺多小伙伴的支持和肯定。虽然也有小伙伴微信私聊我看完就忘记了,但我基本是回答说忘记了不要紧,你已经学会如何看了,捡起来很快,看其他的也快。

以下是几篇文章链接和部分图解:我的博客可能阅读体验更好些。若川的博客

1.​​学习 jQuery 源码整体架构,打造属于自己的 js 类库​​学习jQuery源码,主要学习它的整体架构。无new构造,核心函数 extend,链式调用等。

看完也会对原型链相关知识有比较深刻的认识。jQuery.extend在线例子codepen

jQuery.extend浅拷贝代码实现在线例子codepen

若川知乎高赞:有哪些必看的 JS 库?_jqueryjQuery原型关系图

2.​​学习 underscore 源码整体架构,打造属于自己的函数式编程类库​​学习underscore源码,可以学到函数式编程和面向对象编程的如何相辅相成,基于流式编程,如何组织各个工具函数。

若川知乎高赞:有哪些必看的 JS 库?_ios_02underscore链式调用图解

3.​​学习 lodash 源码整体架构,打造属于自己的函数式编程类库​​

可以学到,为何lodash性能会比underscore高。是因为lodash主要是惰性求值。先把一系列求值的函数(this指向、函数体、参数等)存起来,真正需要求值时,再把函数拿出来调用。

若川知乎高赞:有哪些必看的 JS 库?_ios_03lodash 挂载属性和方法图

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​​发送请求?

若川知乎高赞:有哪些必看的 JS 库?_jquery_04axios 结构关系图若川知乎高赞:有哪些必看的 JS 库?_jquery_05axios 拦截器和链式调用结构图若川知乎高赞:有哪些必看的 JS 库?_中间件_06axios整体流程图

7.​​学习 koa 源码的整体架构,浅析koa洋葱模型原理和co原理​​​  可以学到如何写koa中间件,​​koa​​洋葱模型怎么实现的。

若川知乎高赞:有哪些必看的 JS 库?_jquery_07koa中间件gif图

调试koa中间件的在线demo

学到​​co​​的原理是通过不断调用​​generator​​函数的​​next​​方法来达到自动执行​​generator​​函数的,类似​​async、await​​函数自动执行。

8.​​学习 redux 源码整体架构,深入理解 redux 及其中间件原理​​可以学到redux灵活性和中间件原理及实现。

若川知乎高赞:有哪些必看的 JS 库?_jquery_08redux流程图

先回答简单这些...感觉自己经常在知乎问答宣传自己的源码系列文章,然而阅读量还是很低...

末尾

若川知乎高赞:有哪些必看的 JS 库?_jquery_09


举报

相关推荐

0 条评论