前端进阶(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