liwusen的博客

我的github主页,https://github.com/forthealllight/blog ,喜欢请star哦

发布一个npm包,用于监控页面中的所有API请求的状态和结果

  在前端监控系统中,或者其他场景下,如果我们需要监控当前页面下所有请求状态。可能通常请求下,我们会选择在请求的回调中去处理。这种做法的缺点就是会侵入具体的业务代码。在通常的监控中,监控部分的代码和业务部分的代码是分离的。此外,如果存在很多的请求需要被监听,通过侵入具体业务代码,为了减少代码的重复...

2019-01-20 15:17:20

阅读数 155

评论数 0

在单页应用中,如何优雅的上报前端性能数据

  最近在做一个较为通用的前端性能监控平台,区别于前端异常监控,前端的性能监控主要需要上报和展示的是前端的性能数据,包括首页渲染时间、每个页面的白屏时间、每个页面所有资源的加载时间以及每一个页面中所以请求的响应时间等等。   本文的介绍的是如何设计一个通用的jssdk,可以以较小的侵入性,自动上...

2019-01-14 19:20:07

阅读数 506

评论数 0

在单页应用中,如何优雅的监听url的变化

  单页应用的原理从早起的根据url的hash变化,到根据H5的history的变化,实现无刷新条件下的页面重新渲染。那么在单页应用中是如何监听url的变化呢,本文将总结一下,如何在单页页面中优雅的监听url的变化。 单页应用原理 监听url中的hash变化 监听通过history来改变ur...

2019-01-14 19:19:37

阅读数 621

评论数 0

聊聊Typescript中的设计模式——装饰器篇(decorators)

  随着Typescript的普及,在KOA2和nestjs等nodejs框架中经常看到类似于java spring中注解的写法。本文从装饰模式出发,聊聊Typescipt中的装饰器和注解。 什么是装饰者模式 Typescript中的装饰器 Typescript中的注解 总结 原文地址...

2019-01-14 19:19:00

阅读数 1423

评论数 0

在React项目中,如何优雅的优化长列表

  对于较长的列表,比如1000个数组的数据结构,如果想要同时渲染这1000个数据,生成相应的1000个原生dom,我们知道原生的dom元素是很复杂的,如果长列表通过生成如此多的dom元素来实现,很可能使网页失去响应。   贯穿React核心的就是"virtual dom&am...

2019-01-14 19:18:12

阅读数 1186

评论数 0

从Mixin到hooks,谈谈对React16.7.0-alpha中即将引入的hooks的理解

  为了实现分离业务逻辑代码,实现组件内部相关业务逻辑的复用,在React的迭代中针对类组件中的代码复用依次发布了Mixin、HOC、Render props等几个方案。此外,针对函数组件,在React v16.7.0-alpha 中提出了hooks的概念,在本身无状态的函数组件,引入独立的状态...

2019-01-14 19:17:15

阅读数 106

评论数 0

发布一个react组件——react-read-pdf,用于在移动端展示PDF文件

PC端的浏览器对于PDF文件的展示没有太大的问题,给定一个PDF的链接,就可以用浏览器默认的展示样式来展示和渲染PDF文件的内容。比如一个"http://www.baidu.com/test/pdf"。 如何在移动端展示这个文件。为了在移动端展示和渲染PDF文...

2018-10-25 16:05:49

阅读数 1508

评论数 2

循序渐进教你实现一个完整的node的EventEmitter模块

node的事件模块只包含了一个类:EventEmitter。这个类在node的内置模块和第三方模块中大量使用。EventEmitter本质上是一个观察者模式的实现,这种模式可以扩展node在多个进程或网络中运行。本文从node的EventEmitter的使用出发,循序渐进的实现一个完整的Eve...

2018-07-25 14:45:59

阅读数 1394

评论数 0

彻彻底底教会你使用Redux-saga(包含样例代码)

Redux-saga使用心得总结(包含样例代码), 本文的原文地址:原文地址 本文的样例代码地址:样例代码地址 ,欢迎star 最近将项目中redux的中间件,从redux-thunk替换成了redux-saga,做个笔记总结一下redux-saga的使用心得,阅读本文需要了解什么是r...

2018-07-10 09:48:59

阅读数 9060

评论数 2

响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh)

# 响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh) —— 简要介绍:前端开发中,静态网页通常需要适应不同分辨率的设备,常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发,分析了px在移动端布局中的不足,接着介绍了几种不同的自适应解决方案。 ...

2018-06-27 20:27:44

阅读数 2653

评论数 0

手把手教你实现json嵌套对象的范式化和反范式化

手把手教你实现json嵌套对象的范式化和反范式化 在json对象嵌套比较复杂的情况下,可以将复杂的嵌套对象转化成范式化的数据。比如后端返回的json对象比较复杂,前端需要从复杂的json对象中提取数据然后呈现在页面上,复杂的json嵌套,使得前端展示的逻辑比较混乱。 特别的,如果我们使用了...

2018-06-11 21:05:04

阅读数 1254

评论数 0

RxJS入门——基础操作指北

RxJS入门——基础操作指北 本章所基于的RxJS的版本问5.5.9,在本章中介绍RxJS的基础知识,比如Observable、Observer、Subscription、Subject以及Operation等 了解RxJS的设计思想 掌握RxJS的基础用法 梳理RxJ...

2018-05-16 18:14:04

阅读数 744

评论数 0

通过Pure Render和Immutable实现React中的性能优化

简要介绍:React中的render存在着不必要的渲染,可以通过Puer Render(PureComponent)来减少渲染的次数,但是Puer Render只是进行浅比较,无法实现深层对象上的性能优化。Pure Render结合Immutable可以减少渲染次数。1 . React中的rend...

2018-04-20 21:27:51

阅读数 317

评论数 0

React16.3中的Refs和Forwarding Refs

简要介绍:React16.3中修改了Refs的使用方法,并且提供了Forwarding Refs用于在父组件中操作子组件中的dom节点,本文介绍一下新的Refs表示方法以及Forwarding Refs。 Ref的功能就不具体说了,就是在父组件中直接操作子组件的方法,Ref的方式,使其脱离了pr...

2018-04-19 19:57:27

阅读数 5252

评论数 2

React16.x中的服务端渲染(SSR)

简要介绍:为了SEO和加快首屏加载速度,React提供了服务端渲染(Server Side Render)。本文结合express,来介绍一下React16.x中的SSR。 本例代码:https://github.com/forthealllight/react16.0-ssr 一、为什么要S...

2018-04-11 15:15:39

阅读数 2639

评论数 1

实现一个完美符合Promise/A+规范的Promise

简要介绍:Promise允许我们通过链式调用的方式来解决“回调地狱”的问题,特别是在异步过程中,通过Promise可以保证代码的整洁性和可读性。本文主要解读Promise/A+规范,并在此规范的基础上,自己实现一个Promise. 一、Promise的使用 在了解Promise规范之前,我们知...

2018-04-09 17:27:56

阅读数 443

评论数 0

异步方案选型redux-saga 和 redux-thunk(async/await)

简要介绍:redux中的action仅支持原始对象(plain object),处理有副作用的action,需要使用中间件。中间件可以在发出action,到reducer函数接受action之间,执行具有副作用的操作。之前一直使用redux-thunk处理异步等副作用操作,在action中处理异步...

2018-03-24 15:46:45

阅读数 10512

评论数 0

总结一下ES6中promise、generator和async/await中的错误处理

简要介绍:ES6中为了处理异步,增加了promise、generator和async,它们各自都有不同的内部错误处理方式,本文总结一下promise、generator和async的内部错误处理方法。1 . Promise的错误处理方法(1) 在Promise的构造体内进行错误处理var prom...

2018-03-19 21:30:36

阅读数 5101

评论数 0

谈谈React中的Render Props

简要介绍:分离UI与业务的方法一直在演进,从早期的mixins,到HOC,再到Render Prop,本文主要对比HOC,谈谈Render Props1 . 早期的mixins早期复用业务通过mixins来实现,比如组件A和组件B中,有一些公用函数,通过mixins剥离这些公用部分,并将其组合成一...

2018-03-19 19:38:51

阅读数 2693

评论数 0

从promise、process.nextTick、setTimeout出发,谈谈Event Loop中的Job queue

简要介绍:谈谈promise.resove,setTimeout,setImmediate,process.nextTick在EvenLoop队列中的执行顺序 1.问题的引出 event loop都不陌生,是指主线程从“任务队列”中循环读取任务,比如 例1: setTimeout(fu...

2018-03-10 16:46:58

阅读数 1540

评论数 2

提示
确定要删除当前文章?
取消 删除
关闭
关闭