自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端361

深层前端技术交流

原创 从源码分析express中间件和路由添加方式的区别

express中间件添加时可以使用app.use,也可以使用app.get(),app.post()或者app.route(), app.Router().get(),app.Router().post()等,这些方式有什么区别呢,接下来熊源码执行上区分一下这些方法。 app.use()最终会执...

2019-10-16 17:17:35

阅读数 4

评论数 0

原创 express中间件实现原理和源码分析

中间件的添加逻辑:如下图 中间件添加实现主要源码: 请求路由绑定逻辑:如下图: 路由绑定相关源码: 接收请求处理逻辑: 接收请求主要源码: 中间件的添加逻辑:如下图 这里是app.use()逻辑 其他方式参见从源码分析express中间件添加方式的区别 中间件添加实现主要源码...

2019-10-15 18:05:15

阅读数 6

评论数 0

原创 express源码解析思维导图(4.17.1版本)

源码结构: 入口文件为express文件,思维导图如下,下图是我根据代码运行逻辑和关联关系作出的思维导图,有错误的地方,提出来哦

2019-10-15 17:35:41

阅读数 15

评论数 0

原创 koa中间件实现原理和源码解析

在实际使用中可以看出,koa中间件的执行是洋葱模型,请求进入时依次执行中间件,返回结果时再反过来依次执行中间件,如下图: 那么这种执行机制是如何实现的呢,接下来探讨一下该执行机制的实现原理: 首先看koa中间件执行源码: listen(...args) { debug(...

2019-10-14 13:29:11

阅读数 3

评论数 0

原创 react高级技术点总结

Mixin mixin允许我们定义可以再多个组件中共用的方法,它们就是混合近组件中的对象而已,React的Mixin 能够防止静默函数覆盖,同时支持多个Mixin混合 React.createClass({ mixins : [{ getInitialState: f...

2019-10-10 15:38:35

阅读数 801

评论数 0

原创 前端性能监控总结和实现原理

挖坑待填写

2019-09-29 10:37:40

阅读数 3

评论数 0

原创 关于链表数据结构的探讨以及链表数据结构的应用场景

链表存储有序的元素集合,但不同于数组,链表中的元素在内存中并不是连续放置的。 每个 元素由一个存储元素本身的节点和一个指向下一个元素的引用(也称指针或链接)组成。  链表数据结构  向链表添加元素  从链表移除元素  使用 LinkedList 类  双向链表  循环链表  ...

2019-09-29 10:37:02

阅读数 4

评论数 0

原创 数据结构系列-递归(recursive function)

递归是一种使操作树和图数据结构变得更简单特殊 的方法。 递归是一种解决问题的方法,它从解决问题的各个小部分开始,直到解决最初的大问题。递归通常涉及函数调用自身。 每个递归函数都必须有基线条件,即一个不再递归调用的条件(停止点),以防 止无限递归。 function understandRe...

2019-09-29 10:36:24

阅读数 27

评论数 0

原创 关于babel转化后AST语法树的解析

AST语法树 结构: AST语法树每一层都拥有相同的结构,这样的每一层结构也被叫做节点(Node)。 一个 AST 可以由单一的节点或是成百上千个节点构成。 它们组合在一起可以描述用于静态分析的程序语法。 单层AST节点示例: { type: "BinaryExpressi...

2019-09-29 09:45:46

阅读数 12

评论数 0

原创 数据结构系列-树(二叉树和二叉搜索树)

树是一种非散列数据结构,和非散列表一样,它对于存储需要快速查找的数据非常有用。 树是一种分层数据的抽象模型。现实生活中最常见的树的例子是家谱,或是公司的组织架构 几个专业术语: 根节点:位于树顶部的节点叫作根节点(11)。它没有父节点。 节点:树中的每个元素都叫作节点,节点分 为内部节...

2019-09-23 17:29:52

阅读数 8

评论数 0

原创 node服务端开发必备知识点总结

node.js基础: node.js发展历史 环境搭建 npm包管理 异步编程 单元测试 应用场景 事件循环 异常处理 node核心模块 http/https/http2 Net(网络) Event(事件) Stream(流) ...

2019-09-10 17:15:55

阅读数 14

评论数 0

原创 数据结构系列-字典和散列表(ES6中的map,WeakMap,WeakSet)

字典 在字典中,存储的是[键,值] 对,其中键名是用来查询特定元素的。 字典也称作映射、符号表或关联数组。 和集合的区别:字典和集合很相似,集合以[值,值]的形式存储元素,字 典则是以[键,值]的形式来存储元素。 应用场景 在计算机科学中,字典经常用来保存对象的引用地址。例如,打开 Ch...

2019-09-05 18:07:23

阅读数 13

评论数 0

原创 浏览器requestIdleCallback的原理和应用场景

一般的浏览器每秒钟会绘制60帧,也就是每帧需要16ms左右,如果js计算任务长时间占用线程那个,会导致一些ui无法及时得到渲染,出现卡顿。 一帧内需要完成如下六个步骤的任务: 处理用户的交互 JS 解析执行 帧开始。窗口尺寸变更,页面滚去等的处理 requestAnimationFram...

2019-09-05 01:05:06

阅读数 11

评论数 0

原创 数据结构系列-集合(ES6中的set)

集合是一种不允许值重复的顺序数据结构。 通过集合我们可以进行并集、交集、差集等数学运算, 还会更深入的理解如何使用 ECMAScript 2015(ES2015)原生的 Set 类。 构建数据集合 集合是由一组无序且唯一(即不能重复)的项组成的。该数据结构使用了与有限集合相同的数学概念,但应...

2019-09-04 17:56:07

阅读数 39

评论数 0

原创 数据结构系列-队列和双端队列(javascript任务队列)

队列是遵循先进先出(FIFO,也称为先来先服务)原则的一组有序的项。 队列在尾部添加新元素,并从顶部移除元素。最新添加的元素必须排在队列的末尾。 class Queue { constructor() { this.count = 0; // {1} ...

2019-09-04 16:25:07

阅读数 45

评论数 0

原创 数据结构系列-栈

栈是一种遵循 后进先出(LIFO)原则的有序集合。 LIFO:Last In First Out 新添加或待删除的元素都保存在栈的同一端,称作栈顶,另一端就叫栈底。在栈里,新元素都靠近栈顶,旧元素都接近栈底。 表示方法: 1,创建一个基于数组的栈,内部使用数组表示栈的元素,数组的最后一个元...

2019-09-04 14:53:36

阅读数 12

评论数 0

原创 js点击事件的执行过程分析和实例

js事件对象event包括很多事件类型,这里用onclick事件为例,探讨一下在js事件捕获机制和冒泡机制下的执行过程,以及如何阻止事件的捕获和冒泡。 首先看下当我们点击一个元素后,浏览器的执行过程。 1,当某个元素绑定的事件被触发时,这时浏览器就会从顶级document元素发出一个事件流 ...

2019-08-30 11:06:00

阅读数 11

评论数 0

原创 js实现快速排序

const testArr = [3,3,3,3,3] function sort(arr){ if(arr.length <=1) return arr; //获取中间值 const centerIndex = Math.floor(arr.length/...

2019-08-24 17:49:26

阅读数 12

评论数 0

原创 编写一个webpack的loader

loader在webpack打包流程中,有着比较重要的地位,很多资源类型需要经过loader的转化改变成浏览器能够识别的资源类型。 1,loader的本质是一个node模块,它输出了一个函数,当某个资源需要用这个loader转换时,该函数就会被调用。 形式如下: module.export...

2019-08-24 15:03:50

阅读数 10

评论数 0

原创 关于中间件设计模式的深入探讨

中间件作为一些辅助处理功能,应用非常广泛,例如express中间件,redux中间件,koa中间件,那么中间件的设计模式到底是怎样的呢。结合中间件的使用实例探讨和总结一下中间件的设计思想和一般实现模式。 仿照redux中间件实现模式,看如下一个例子: function fn2(next){ ...

2019-08-23 19:40:49

阅读数 36

评论数 0

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