小小小小小亮-CSDN博客

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

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

2019-01-20 15:17:20 878

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

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

2019-01-14 19:20:07 2601 1

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

单页应用的原理从早起的根据url的hash变化，到根据H5的history的变化，实现无刷新条件下的页面重新渲染。那么在单页应用中是如何监听url的变化呢，本文将总结一下，如何在单页页面中优雅的监听url的变化。单页应用原理监听url中的hash变化监听通过history来改变url的事件replaceState和pushState行为的监听原文在我的博客中：https:...

2019-01-14 19:19:37 3421

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

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

2019-01-14 19:19:00 5127

原创在React项目中，如何优雅的优化长列表

对于较长的列表，比如1000个数组的数据结构，如果想要同时渲染这1000个数据，生成相应的1000个原生dom，我们知道原生的dom元素是很复杂的，如果长列表通过生成如此多的dom元素来实现，很可能使网页失去响应。贯穿React核心的就是"virtual dom",我们同样的可以通过用虚拟列表的方式来优雅的优化长列表原生dom渲染长列表的缺陷虚拟列表优化长列表的原理通过rea...

2019-01-14 19:18:12 8467 1

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

为了实现分离业务逻辑代码，实现组件内部相关业务逻辑的复用，在React的迭代中针对类组件中的代码复用依次发布了Mixin、HOC、Render props等几个方案。此外，针对函数组件，在React v16.7.0-alpha 中提出了hooks的概念，在本身无状态的函数组件，引入独立的状态空间，也就是说在函数组件中，也可以引入类组件中的state和组件生命周期，使得函数组件变得丰富多彩起来...

2019-01-14 19:17:15 899

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

PC端的浏览器对于PDF文件的展示没有太大的问题，给定一个PDF的链接，就可以用浏览器默认的展示样式来展示和渲染PDF文件的内容。比如一个"http://www.baidu.com/test/pdf"。如何在移动端展示这个文件。为了在移动端展示和渲染PDF文件的内容，本文在pdfjs的基础上实现了一个简单的react组件，用于展示和渲染PDF文件。将这个react组件，以npm包的形式发...

2018-10-25 16:05:49 5510 5

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

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

2018-07-25 14:45:59 4315 1

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

Redux-saga使用心得总结（包含样例代码），本文的原文地址：原文地址本文的样例代码地址：样例代码地址，欢迎star最近将项目中redux的中间件，从redux-thunk替换成了redux-saga，做个笔记总结一下redux-saga的使用心得，阅读本文需要了解什么是redux，redux中间件的用处是什么？如果弄懂上述两个概念，就可以继续阅读本文。 re...

2018-07-10 09:48:59 26227 6

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

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

2018-06-27 20:27:44 11104 3

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

手把手教你实现json嵌套对象的范式化和反范式化在json对象嵌套比较复杂的情况下，可以将复杂的嵌套对象转化成范式化的数据。比如后端返回的json对象比较复杂，前端需要从复杂的json对象中提取数据然后呈现在页面上，复杂的json嵌套，使得前端展示的逻辑比较混乱。特别的，如果我们使用了flux或者redux等作为我们前端的状态管理机（state对象），通过控制state对象的变化，从而...

2018-06-11 21:05:04 3268

原创 RxJS入门——基础操作指北

RxJS入门——基础操作指北本章所基于的RxJS的版本问5.5.9，在本章中介绍RxJS的基础知识，比如Observable、Observer、Subscription、Subject以及Operation等了解RxJS的设计思想掌握RxJS的基础用法梳理RxJS的接口API 一、RxJS的设计思想简单理解RxJS的设计思想，之前实现了Prom...

2018-05-16 18:14:04 1897

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

简要介绍：React中的render存在着不必要的渲染，可以通过Puer Render（PureComponent）来减少渲染的次数，但是Puer Render只是进行浅比较，无法实现深层对象上的性能优化。Pure Render结合Immutable可以减少渲染次数。1 . React中的render仅通过React中的render，存在着不必要的渲染，这种不必要的渲染分为两大类。（1）自身的sta

2018-04-20 21:27:51 1199

原创 React16.3中的Refs和Forwarding Refs

简要介绍：React16.3中修改了Refs的使用方法，并且提供了Forwarding Refs用于在父组件中操作子组件中的dom节点，本文介绍一下新的Refs表示方法以及Forwarding Refs。Ref的功能就不具体说了，就是在父组件中直接操作子组件的方法，Ref的方式，使其脱离了props传值，然后更新子组件的标准方法。1 . React16.3中的Refs（1）创建16...

2018-04-19 19:57:27 14498 3

原创 React16.x中的服务端渲染（SSR）

简要介绍：为了SEO和加快首屏加载速度，React提供了服务端渲染（Server Side Render）。本文结合express，来介绍一下React16.x中的SSR。本例代码：https://github.com/forthealllight/react16.0-ssr一、为什么要SSR单页应用将UI层和内容都由javascript来渲染，搜索引擎或网页爬虫需要完成的HTML结构...

2018-04-11 15:15:39 6247 1

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

简要介绍：Promise允许我们通过链式调用的方式来解决“回调地狱”的问题，特别是在异步过程中，通过Promise可以保证代码的整洁性和可读性。本文主要解读Promise/A+规范，并在此规范的基础上，自己实现一个Promise.一、Promise的使用在了解Promise规范之前，我们知道主流的高版本浏览器已经支持ECMA中的Promise.创建一个promise实例：var...

2018-04-09 17:27:56 1919

原创异步方案选型redux-saga 和 redux-thunk（async/await）

简要介绍：redux中的action仅支持原始对象（plain object），处理有副作用的action，需要使用中间件。中间件可以在发出action，到reducer函数接受action之间，执行具有副作用的操作。之前一直使用redux-thunk处理异步等副作用操作，在action中处理异步等副作用操作，此时的action是一个函数，以dispatch，getState作为形参，函数体内的部分

2018-03-24 15:46:45 24284 1

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

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

2018-03-19 21:30:36 10470

原创谈谈React中的Render Props

简要介绍：分离UI与业务的方法一直在演进，从早期的mixins，到HOC，再到Render Prop，本文主要对比HOC，谈谈Render Props1 . 早期的mixins早期复用业务通过mixins来实现，比如组件A和组件B中，有一些公用函数，通过mixins剥离这些公用部分，并将其组合成一个公用集合，然后将这个集合传递给每个组件调用。//公有的函数部分const someMixins={

2018-03-19 19:38:51 5295

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

简要介绍：谈谈promise.resove,setTimeout,setImmediate,process.nextTick在EvenLoop队列中的执行顺序1.问题的引出event loop都不陌生，是指主线程从“任务队列”中循环读取任务，比如例1：setTimeout(function(){console.log(1)},0);console.log(2)//输出2...

2018-03-10 16:46:58 3601 3

原创 Webpack4.0初体验

简要介绍：Webpack4.0.1版本已经发布了2周了，下面用体验一下Webpack4.01 .安装Webpack4.0（1）Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version明确不支持node.js4.X，在本文中使用的是：node -vv...

2018-03-02 15:47:02 9640

原创 Webpack中的sourcemap以及如何在生产和开发环境中合理的设置sourcemap的类型

简要介绍：在webpack的官网，给出了十几种sourcemap，那么每一种sourcemap之间有什么区别，本文在理解sourcemap的基础上，分析在生产和开发环境中，应该采用何种形式的sourcemap一、从Sourcemap和Data URL说起（1）什么是Sourcemap?我们在打包中，将开发环境中源代码经过压缩，去空格，babel编译转化，最终可以得到适用于生产环境...

2018-03-01 16:39:34 50357

原创从javascript中Function.proto出发，再谈原型链

简要介绍：原型链的基础知识就不具体讲了，是js中继承的基础。下面我们来谈谈js中函数的原型链。1 . Function.proto(getPrototypeOf)是什么？获取一个对象的原型，在chrome中可以通过proto的形式，或者在ES6中可以通过Object.getPrototypeOf的形式。那么Function.proto是什么么？也就是说Function由什么对象继承而来...

2018-02-27 13:21:11 2403 1

原创 js对象深复制的方法总结（包装对象，Date对象，正则对象）

简要介绍：在文章http://blog.csdn.net/liwusen/article/details/74190031中介绍了简单实现深复制的方法，但是这种方法不管是ES6还是ES5实现，都有同样的缺陷，就是只能实现特定的object的深度复制（比如数组和函数），不能实现包装对象Number，String ， Boolean，以及Date对象，RegExp对象的复制。1 . 前文的方法...

2017-12-09 15:15:58 7510

原创 React 16.0中的新特性——Error Boundaries及其注意点

简要介绍：在之前的React版本中规定，如果在组件中javascript报错，那么会在下一次的render中阻断，并且现实空白页。React之前没有提供一种合适的处理组件错误的方法，而React16.0中通过Error Boundaries来处理组件内部的错误，从而可以修正错误组件。1.什么是Error Boundaries?单一组件内部错误，不应该导致整个应用报错并显示空白页，而Error Bou

2017-11-13 15:39:21 4804 3

原创 React 16.0中的新特性——portal及其注意点

简要介绍：React16.0中发布了很多新特性，我们来看portal,React提供了一个顶级API—portal，用来将子节点渲染到父节点之外的dom节点1.基本用法（1）在React15.X版本中，我们只能讲子节点在父节点中渲染，基本用法如下：render() { // React需要创建一个新的div来包含子节点 return ( <div> ...

2017-11-10 16:03:14 6093

原创 es5、promise、async以及generator中实现sleep的方法

简要介绍：在多线程编程中，sleep的作用是起到挂起的作用，使线程休眠，而js是单线程的，我们如何在js中模拟sleep的效果呢~ 也就是如何用同步的方式来处理异步。序：为什么不能用setTimeout来实现sleep的效果因为sleep要实现的是同步进程或者说同步程序的挂起，而setTimeout本身是异步的，我们来举个例子：function test(){ setTimeo...

2017-11-09 14:35:20 4079

原创 Redux源码拾遗，关于createStore的第三个参数

简要介绍：再看redux文档的时候，发现了createStore是允许第三个参数的，看了一下源码明白了第三个参数的作用。一、createStore的第三个参数的定义（1）官方定义：createStore(reducer, [initialState], enhancer)，第三个参数enhancer, 是一个组合 store creator 的高阶函数，返回一个新的强化过的 store creato

2017-07-29 19:04:30 5809 2

翻译翻译君Mobx,Ten minute introduction to MobX and React

简要介绍：最近看了一下Mobx，然后有一篇入门教程是英文的，这里翻译一下并写写自己的心得体会。原文地址：https://mobx.js.org/getting-started.html一、Mobx的核心思想（1）Mobx的核心思想概括：贯穿mobx状态管理机的核心思想是使得state保持一致性，我是这么理解的，任何来源于state的数据，显示都应该与state的改变保持一致性，换句话说，只要stat

2017-07-27 20:46:54 843

原创 React中的高阶组件（HOC）

简要介绍：React中不会用到组件的继承，作者选择用组合来代替继承，但是存在一种情况，就是两种组件方法类似，如果能有一种“类继承”的方式，在同一个函数中可以生产这两种组件，那么就可以大量的减少代码的冗余，在React的高阶组件实现了Decorator 模式来模拟继承或者说来代替继承。1、什么是高阶组件（high order component）高阶组件的定义：就是一个函数，这个函数传入一个组件，然后

2017-07-22 16:46:12 2771

原创 Redux源码深度解析

简要介绍：用了一段时间redux，今天看了一下redux的源码，大致整理了心得如下。1、什么是redux，这里就不做介绍，如想了解可以移步 ReadMe.redux，整体redux的代码只有800行，src下面分为一下几个部分。–applyMiddleware.js–bindActionCreators.js–combineReducers.js–compose.js–createStore.js–

2017-07-21 21:51:59 669

原创 javascript中的proto和prototype，以及ES6中class的原型相关

简要介绍：javascript基于原型链的继承与其他语言明显不同，在一些浏览器厂商中，通过proto可以得到对象的原型，ES6中补充了Class，类似于C++和java，那么Class是如何通过原型链实现的呢？1.function的原型function Student(){ //}var stu=new Student();stu.__proto__==Student //falses

2017-07-04 19:56:52 1353

原创 js中对象深度克隆，以及ES6中的深度克隆的实现

简要介绍：js中的对象的赋值，其实是实现了对象的引用，在赋值对象上修改属性会影响到原来的对象。–ES5中我们可以通过递归函数来实现深层次的克隆。 –ES6中我们可以通过Object.assign的方式来实现深度克隆。1.javascript(ES5)中对象的克隆function deepClone(obj){ var newObj= obj instanceof Array?[]:{};

2017-07-03 14:13:16 19297 4

原创 javascript实现数据结构中的基本排序方法

简要介绍：基本排序方法，不外乎为冒泡法排序法，插入排序法，选择排序法，归并排序法和快速排序法。1.冒泡排序法原理：比较任何相邻的项，如果第一个比第二个大，则交换它们，元素相步步上移，最大的元素依次沉底。//来一个冒泡排序function bobbleSort(myArr){ var length=myArr.length; for(var i=0;i<length;i++){

2017-06-15 14:30:08 358

原创 Node中GC机制以及如何防止内存泄露

在js本身的gc机制，可以自动释放内存，但是无论是通过计数引用法，或者是标记清零法，都不能完全的避免内存泄露，前端js内存泄露，可以通过刷新浏览器来人为避免，但是nodejs在服务器端的内存泄露呢，定时重启服务器是一种方法，但是更好的是尽量的去避免内存泄露本文先分析了gc机制，以及内存泄露的原因，最后总结了避免内存泄露的方法1.javascript的内存回收机制（gc机制）（1）计数引用法语言引擎

2017-05-01 13:28:37 3131 1

原创从观察者模式，简单实现Node的Events模块

简介：观察者模式或者说订阅模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。node中的Events模块就是通过观察者模式来实现的： var events=require('events'); var eventEmitter=new events.EventEmitter(); eventEmitter

2017-04-27 20:33:36 1225

原创深入理解ES6箭头函数中的this

简要介绍：箭头函数中的this，指向与一般function定义的函数不同，比较容易绕晕，箭头函数this的定义：箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。1、何为定义时绑定我们来看下面这个例子：（1）var x=11;var obj={ x:22, say:function(){ console.log(this.x) }}...

2017-04-20 14:05:49 32687 15

原创常见的异步实现方法以及ES7中如何通过async实现异步操作

简要介绍：异步贯穿了整个js，从ES5到ES6，ES7，也有很多为了解决异步的尝试。1、异步的几种实现方法（1）回调函数var fs=require('fs');fs.read('url',function(err,data){ fs.read('url',function(err,data){ })})这是一个简单的基于回调实现异步的过程，我们发现一旦异步嵌套过深，会导致“回调地狱”。（

2017-04-19 15:43:21 2430

原创 nodejs中的多进程

简要介绍：我们知道nodejs本身是一个单进程单线程，并且使用驱动模式来处理并发，对于多核CPU，如果仅仅使用单进程，其实是很浪费资源的，因此nodejs提供了cluster模块和child_process模块来创建多个子进程，从而提高cpu的利用率。1.首先我们来看用cluster来创建多个子进程的方式var cluster = require('cluster');var os = requi

2017-04-10 13:17:41 4133

原创通过<iframe>，实现图片（文件）的上传以及文件（附件）的下载

1.什么是iframe?iframe闭合标签，会创建包含另个文档的内联框架，针对不支持iframe的浏览器，可以将提示文字放在iframe之间。2.iframe的作用（1）通过iframe实现文件（附件）的下载 <a href="#" onclick="download()">download</a> <iframe id="ifile" style="display:none"></ifra

2017-03-22 19:40:02 4802

利用JS实现手机页面小球轮滑

空空如也