前端进阶(2)使用fetch/axios时， 如何取消http请求 1. 需求 现在前端都是SPA，我们什么时候需要取消HTTP请求呢？ 当我们从一个页面跳转到另外一个页面时，如果前一个页面的请求还没有返回，那么我们希望取消前一个页面的请求 某些操作耗时比较长(不能是保存等操作哦)，如果用户不想等待 ...

»

前端进阶(1)Web前端性能优化 Web前端性能优化, 不仅能够改善站点的用户体验，并且能够节省相当的资源利用。下面将从1)服务器、2)html内容、3)css、 4)javascript、 5)图片等几方面介绍具体的优化操作。 目录： 1. 服务器优化 1.1. 使用内容分发网络(CDN) 1.2 ...

»

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

»

dennisj

2021-02-23

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

»

dennisj

2021-02-19

本文会分享一个React性能优化的故事，这也是我在工作中真实遇到的故事，最终我们是通过魔改第三方库源码将它性能提高了几十倍。这个第三方库也是很有名的，在GitHub上有4.5k star，这就是：react-big-calendar。 这个工作不是我一个人做的，而是我们团队几个月前共同完成的，我觉得 ...

»

dennisj

2021-01-28

上一篇文章我写了koa-static的源码解析，其中用到了HTTP的缓存策略，给返回的静态文件设置了一些缓存的头，比如Cache-Control之类的。于是我就跟朋友讨论了一下HTTP的缓存策略： 朋友说：“HTTP里面控制缓存的头(header)太多了，啥Cache-Control，ETag，La ...

»

dennisj

2020-12-21

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

»

dennisj

2020-11-16

上一篇文章我们讲了怎么用Node.js原生API来写一个web服务器，虽然代码比较丑，但是基本功能还是有的。但是一般我们不会直接用原生API来写，而是借助框架来做，比如本文要讲的Express。通过上一篇文章的铺垫，我们可以猜测，Express其实也没有什么黑魔法，也仅仅是原生API的封装，主要是用 ...

»

dennisj

2020-11-02

优雅手撕bind函数 前言： 为什么面试官总爱让实现一个bind函数？ 他想从bind中知道些什么？ 一个小小的bind里面内有玄机？ 今天来刨析一下实现一个bind要懂多少相关知识点，也方便我们将零碎的知识点串联起来。 »

bigname

2020-11-02

上一篇文章我们分析了Redux-Thunk的源码，可以看到他的代码非常简单，只是让dispatch可以处理函数类型的action，其作者也承认对于复杂场景，Redux-Thunk并不适用，还推荐了Redux-Saga来处理复杂副作用。本文要讲的就是Redux-Saga，这个也是我在实际工作中使用最多 ...

»

dennisj

2020-10-19

汇总遍历对象的六种方式及其区别 遍历对象属性方式千千万，奈何网上资料乱又乱！ 前言： 本来计划写一篇关于深浅克隆的文章，奈何对各种遍历对象的方式搞得一头雾水，分不清各家的关系。所以特来先汇总一下。 本文汇总了遍历对象的各种方式以及各种方式的差异性，收藏好。以后遇到深浅克隆等功能时说不定能用上。还请客 ...

»

你不知道的闭包原理 想要理解闭包之前，就必须理解函数的创建过程、活动变量AO、作用域链。我曾写过相关的文章 网上相关对闭包的定义： MDN：函数和对其周围状态(lexical environment，词法环境)的引用捆绑在一起构成闭包(closure)。也就是说，闭包可以让你从内部函数访问外部函数作 ...

»

上一篇文章我们手写了一个Redux，但是单纯的Redux只是一个状态机，是没有UI呈现的，所以一般我们使用的时候都会配合一个UI库，比如在React中使用Redux就会用到React-Redux这个库。这个库的作用是将Redux的状态机和React的UI呈现绑定在一起，当你dispatch acti ...

»

dennisj

2020-07-09

提到HTML标签，我们会非常熟悉，开发中经常使用。但我们往往关注更多的是页面渲染效果及交互逻辑，也就是对用户可见可操作的部分，比如表单、菜单栏、列表、图文等。其实还有一些非常重要却容易忽视的标签，这些标签大多数用在页面头部head标签内，虽然对用户不可见，但如果在某些场景下，比如交互实现、性能优化、 ...

»

熟悉React的朋友都知道，React支持jsx语法，我们可以直接将HTML代码写到JS中间，然后渲染到页面上，我们写的HTML如果有更新的话，React还有虚拟DOM的对比，只更新变化的部分，而不重新渲染整个页面，大大提高渲染效率。到了16.x，React更是使用了一个被称为Fiber的架构，提升 ...

»

dennisj

2020-06-23

从Ant Design + element风格谈起 1、Ant Design提出的原则：【足不出户】 能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视(Change Blindness)，导致用户心流(Flow)被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完 ...

»

Zhang-jin

2020-06-10

提高代码质量的目的 程序猿的本职工作就是写代码，写出高质量的代码应该是我们的追求和对自己的要求，因为： 高质量的代码往往意味着更少的BUG，更好的模块化，是我们扩展性，复用性的基础 高质量的代码也意味着更好的书写，更好的命名，有利于我们的维护 什么代码算好的质量 怎样来定义代码质量的"好"，业界有很 ...

»

dennisj

2020-06-05

为什么要提高代码扩展性 我们写的代码都是为了一定的需求服务的，但是这些需求并不是一成不变的，当需求变更了，如果我们代码的扩展性很好，我们可能只需要简单的添加或者删除模块就行了，如果扩展性不好，可能所有代码都需要重写，那就是一场灾难了，所以提高代码的扩展性是势在必行的。怎样才算有好的扩展性呢？好的扩展 ...

»

dennisj

2020-05-29

本文是设计模式的第二篇文章，第一篇文章是 "不知道怎么封装代码？看看这几种设计模式吧！" ，后面还会有 ，`提高代码质量`的设计模式，点个关注不迷路，哈哈~ 想必大家都听说过 原则，其实就是 ，意思就是不要重复写一样的代码，换句话说就是要提高代码的复用性。那什么样的代码才算有好的复用性呢？ 1. 对 ...

»

dennisj

2020-05-25