webpack核心模块tapable源码解析

2021-04-01
阅读 14 分钟
5.6k
上一篇文章我写了tapable的基本用法,我们知道他是一个增强版版的发布订阅模式,本文想来学习下他的源码。tapable的源码我读了一下,发现他的抽象程度比较高,直接扎进去反而会让人云里雾里的,所以本文会从最简单的SyncHook和发布订阅模式入手,再一步一步抽象,慢慢变成他源码的样子。

webpack核心模块tapable用法解析

2021-03-15
阅读 14 分钟
3.5k
前不久写了一篇webpack基本原理和AST用法的文章,本来想接着写webpack plugin的原理的,但是发现webpack plugin高度依赖tapable这个库,不清楚tapable而直接去看webpack plugin始终有点雾里看花的意思。所以就先去看了下tapable的文档和源码,发现这个库非常有意思,是增强版的发布订阅模式。发布订阅模式在源码世界实在...

技术写作技巧分享:我是如何从写作小白成长为多平台优秀作者的?

2021-02-23
阅读 8 分钟
4.9k
我从事技术写作的时间其实不长,开始写作的时间就是我掘金账号注册的时间:到今天(2021年2月23日)也就是一年零一个月,这一年的收获是超过我的预期的:产出博文四十多篇,总共数十万字掘金优秀作者,掘金年度人气作者No.27思否2020年度"Top Writer",万粉专栏作者开源中国优秀源创作者,源创计划年度活跃博主 Top20本文...

手写一个webpack,看看AST怎么用

2021-02-19
阅读 16 分钟
15.8k
本文开始我会围绕webpack和babel写一系列的工程化文章,这两个工具我虽然天天用,但是对他们的原理理解的其实不是很深入,写这些文章的过程其实也是我深入学习的过程。由于webpack和babel的体系太大,知识点众多,不可能一篇文章囊括所有知识点,目前我的计划是从简单入手,先实现一个最简单的可以运行的webpack,然后再...

歪门邪道性能优化:魔改三方库源码,性能提高几十倍!

2021-01-28
阅读 18 分钟
8.9k
本文会分享一个React性能优化的故事,这也是我在工作中真实遇到的故事,最终我们是通过魔改第三方库源码将它性能提高了几十倍。这个第三方库也是很有名的,在GitHub上有4.5k star,这就是:react-big-calendar。

前端也能学算法:由浅入深讲解贪心算法

2021-01-19
阅读 9 分钟
7k
假设你是一个商店老板,你需要给顾客找零n元钱,你手上有的钱的面值为:100元,50元,20元,5元,1元。请问如何找零使得所需要的钱币数量最少?例子:你需要找零126元,则所需钱币数量最少的方案为100元1找,20元1张,5元1张,1元1张。

前端也能学算法:由浅入深讲解动态规划

2021-01-12
阅读 12 分钟
7.1k
动态规划是一种常用的算法思想,很多朋友觉得不好理解,其实不然,如果掌握了他的核心思想,并且多多练习还是可以掌握的。下面我们由浅入深的来讲讲动态规划。

使用mono-repo实现跨项目组件共享

2021-01-04
阅读 12 分钟
12.3k
本文会分享一个我在实际工作中遇到的案例,从最开始的需求分析到项目搭建,以及最后落地的架构的整个过程。最终实现的效果是使用mono-repo实现了跨项目的组件共享。在本文中你可以看到:

轻松理解HTTP缓存策略

2020-12-21
阅读 6 分钟
11.5k
上一篇文章我写了koa-static的源码解析,其中用到了HTTP的缓存策略,给返回的静态文件设置了一些缓存的头,比如Cache-Control之类的。于是我就跟朋友讨论了一下HTTP的缓存策略:

手写koa-static源码,深入理解静态服务器原理

2020-12-07
阅读 10 分钟
6.6k
这篇文章继续前面的Koa源码系列,这个系列已经有两篇文章了:第一篇讲解了Koa的核心架构和源码:手写Koa.js源码第二篇讲解了@koa/router的架构和源码:手写@koa/router源码本文会接着讲一个常用的中间件----koa-static,这个中间件是用来搭建静态服务器的。其实在我之前使用Node.js原生API写一个web服务器已经讲过怎么返...

框架源码中用来提高扩展性的设计模式

2020-12-02
阅读 11 分钟
4.9k
我们写的代码都是为了一定的需求服务的,但是这些需求并不是一成不变的,当需求变更了,如果我们代码的扩展性很好,我们可能只需要简单的添加或者删除模块就行了,如果扩展性不好,可能所有代码都需要重写,那就是一场灾难了,所以提高代码的扩展性是势在必行的。怎样才算有好的扩展性呢?好的扩展性应该具备以下特征:

速度提高几百倍,记一次数据结构在实际工作中的运用

2020-11-24
阅读 10 分钟
10.5k
这段时间写了一堆源码解析,这篇文章想换换口味,跟大家分享一个我工作中遇到的案例。毕竟作为一个打工人,上班除了摸鱼看源码外,砖还是要搬的。本文会分享一个使用恰当的数据结构来进行性能优化,从而大幅提高响应速度的故事,提高有几百倍那么多。

手写@koa/router源码

2020-11-16
阅读 11 分钟
6.8k
上一篇文章我们讲了Koa的基本架构,可以看到Koa的基本架构只有中间件内核,并没有其他功能,路由功能也没有。要实现路由功能我们必须引入第三方中间件,本文要讲的路由中间件是@koa/router,这个中间件是挂在Koa官方名下的,他跟另一个中间件koa-router名字很像。其实@koa/router是fork的koa-router,因为koa-router的作...

手写Koa.js源码

2020-11-09
阅读 11 分钟
7.3k
Express的源码还是比较复杂的,自带了路由处理和静态资源支持等等功能,功能比较全面。与之相比,本文要讲的Koa就简洁多了,Koa虽然是Express的原班人马写的,但是设计思路却不一样。Express更多是偏向All in one的思想,各种功能都集成在一起,而Koa本身的库只有一个中间件内核,其他像路由处理和静态资源这些功能都没...

手写Express.js源码

2020-11-02
阅读 13 分钟
4.5k
上一篇文章我们讲了怎么用Node.js原生API来写一个web服务器,虽然代码比较丑,但是基本功能还是有的。但是一般我们不会直接用原生API来写,而是借助框架来做,比如本文要讲的Express。通过上一篇文章的铺垫,我们可以猜测,Express其实也没有什么黑魔法,也仅仅是原生API的封装,主要是用来提供更好的扩展性,使用起来更...

使用Node.js原生API写一个web服务器

2020-10-26
阅读 4 分钟
12.5k
Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点。一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa。但是Express和Koa都是对Node.js原生API的封装,所以其实不借助任何框架,只用原生API我们也能写一个Web服务器出来。本文要讲的就是不借助框架,...

手写Redux-Saga源码

2020-10-19
阅读 13 分钟
6.5k
上一篇文章我们分析了Redux-Thunk的源码,可以看到他的代码非常简单,只是让dispatch可以处理函数类型的action,其作者也承认对于复杂场景,Redux-Thunk并不适用,还推荐了Redux-Saga来处理复杂副作用。本文要讲的就是Redux-Saga,这个也是我在实际工作中使用最多的Redux异步解决方案。Redux-Saga比Redux-Thunk复杂得多...

Redux异步解决方案之Redux-Thunk原理及源码解析

2020-10-12
阅读 14 分钟
12.7k
前段时间,我们写了一篇Redux源码分析的文章,也分析了跟React连接的库React-Redux的源码实现。但是在Redux的生态中还有一个很重要的部分没有涉及到,那就是Redux的异步解决方案。本文会讲解Redux官方实现的异步解决方案----Redux-Thunk,我们还是会从基本的用法入手,再到原理解析,然后自己手写一个Redux-Thunk来替换...

RSA初探,聊聊怎么破解HTTPS

2020-09-07
阅读 5 分钟
10.5k
这篇文章跟大家讨论一个比较有意思的问题:怎么破解https?大家都知道,现在几乎整个互联网都采用了https,不是https的网站某些浏览器还会给出警告。面试中也经常问到https,本文会深入https原理,一直讲到https破解思路。

深入Node.js的模块加载机制,手写require函数

2020-08-31
阅读 11 分钟
12.4k
模块是Node.js里面一个很基本也很重要的概念,各种原生类库是通过模块提供的,第三方库也是通过模块进行管理和引用的。本文会从基本的模块原理出发,到最后我们会利用这个原理,自己实现一个简单的模块加载机制,即自己实现一个require。

不知道怎么封装代码?看看这几种设计模式吧!

2020-08-24
阅读 8 分钟
7.8k
封装好的代码,内部变量不会污染外部。可以作为一个模块给外部调用。外部调用者不需要知道实现的细节,只需要按照约定的规范使用就行了。对扩展开放,对修改关闭,即开闭原则。外部不能修改模块,既保证了模块内部的正确性,又可以留出扩展接口,使用灵活。

JavaScript中的函数式编程

2020-08-19
阅读 3 分钟
7.6k
函数式编程是一种编程范式,是一种构建计算机程序结构和元素的风格,它把计算看作是对数学函数的评估,避免了状态的变化和数据的可变,与函数式编程相对的是命令式编程。我们有这样一个需求,给数组的每个数字加一:

从Generator入手读懂co模块源码

2020-08-17
阅读 10 分钟
6.7k
这篇文章是讲JS异步原理和实现方式的第四篇文章,前面三篇是:setTimeout和setImmediate到底谁先执行,本文让你彻底理解Event Loop从发布订阅模式入手读懂Node.js的EventEmitter源码手写一个Promise/A+,完美通过官方872个测试用例本文主要会讲Generator的运用和实现原理,然后我们会去读一下co模块的源码,最后还会提一...

JavaScript中的compose函数和pipe函数

2020-08-12
阅读 3 分钟
4.1k
上面的计算方法就是函数的嵌套执行,而我们compose的作用就是将嵌套执行的方法作为参数平铺,嵌套执行的时候,里面的方法也就是右边的方法最开始执行,然后往左边返回,我们的compose方法也是从右边的参数开始执行,所以我们的目标就很明确了,我们需要一个像这样的compose方法:

手写React-Router源码,深入理解其原理

2020-08-10
阅读 15 分钟
8.8k
上一篇文章我们讲了React-Router的基本用法,并实现了常见的前端路由鉴权。本文会继续深入React-Router讲讲他的源码,套路还是一样的,我们先用官方的API实现一个简单的例子,然后自己手写这些API来替换官方的并且保持功能不变。

使用React-Router实现前端路由鉴权

2020-08-03
阅读 7 分钟
17.7k
React-Router是React生态里面很重要的一环,现在React的单页应用的路由基本都是前端自己管理的,而不像以前是后端路由,React管理路由的库常用的就是React-Router。本文想写一下React-Router的使用,但是光介绍API又太平淡了,而且官方文档已经写得很好了,我这里就用一个常见的开发场景来看看React-Router是怎么用的吧...

从发布订阅模式入手读懂Node.js的EventEmitter源码

2020-07-27
阅读 5 分钟
6.1k
前面一篇文章setTimeout和setImmediate到底谁先执行,本文让你彻底理解Event Loop详细讲解了浏览器和Node.js的异步API及其底层原理Event Loop。本文会讲一下不用原生API怎么达到异步的效果,也就是发布订阅模式。发布订阅模式在面试中也是高频考点,本文会自己实现一个发布订阅模式,弄懂了他的原理后,我们就可以去读No...

setTimeout和setImmediate到底谁先执行,本文让你彻底理解Event Loop

2020-07-21
阅读 10 分钟
8.6k
笔者以前面试的时候经常遇到写一堆setTimeout,setImmediate来问哪个先执行。本文主要就是来讲这个问题的,但是不是简单的讲讲哪个先,哪个后。笼统的知道setImmediate比setTimeout(fn, 0)先执行是不够的,因为有些情况下setTimeout(fn, 0)是会比setImmediate先执行的。要彻底搞明白这个问题,我们需要系统的学习JS的异步...

this到底指向啥?看完这篇就知道了!

2020-07-17
阅读 7 分钟
7k
JS中的this是一个老生常谈的问题了,因为它并不是一个确定的值,在不同情况下有不同的指向,所以也经常使人困惑。本篇文章会谈谈我自己对this的理解。

轻松理解JS中的面向对象,顺便搞懂prototype和__proto__

2020-07-13
阅读 9 分钟
8.1k
在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道,如果我要定义一个通用的类型我可以使用类(class)。比如在java中我们可以这样定义一个类: