- 博客(31)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 useEffect和useLayoutEffect的区别
react hook面世已经有一段时间了，相信很多人都已经在代码中用上了hooks。而对于 useEffect 和 useLayoutEffect，我们使用的最多的应该就是useEffect。那他们两个到底有什么不一样的地方？使用方式这两个函数的使用方式其实非常简单，他们都接受一个函数一个数组，只有在数组里面的值改变的情况下才会再次执行 effect。所以对于使用方式我就不过多介绍了，不清楚的可以先参考官网。差异useEffect 是异步执行的，而useLayoutEffect是同步执行的。u
2021-02-02 00:13:29
18220
2
原创 react的diff算法
起因React 的 key 相信大家都很了解，也不用我多说。但是平时对于key的使用可能没有那么严格，有可能不给 key ，有可能给 index ，其实一般来说不会出什么问题，顶多就是性能上会有一些损失，但是在某些特定的情况下使用不当也可能会导致 bug ，比如下面这种情况。key导致的bug在一个后台管理系统中，左侧是一个菜单可以选择不同的选项，右侧对应了不同的视频。但是左侧菜单切换的时候，右侧视频的封面图虽然重新加载了，点击播放后视频的内容并不是新的，还是上一个选项卡的视频，看起来就像没有重新渲染
2021-01-29 23:52:54
326
原创 你看这个东西是不是没居中
前端切图仔还原UI设计师的设计稿是对UI的一种尊重，不能还原那就是你太菜了。每次我们欢天喜地的去找UI走查的时候，UI是这样的你一看代码:.center { display: flex; justify-content: center; align-items: center;}心中一惊：这都能对不齐，那一定是你的机子有问题，建议换一台，UI可能要让你当场横尸街头。今天我们来深究一下这个问题。问题复现首先我们把问题复现出来，我们不用搞什么花里胡哨的内容，直接一个span标签扔上来
2021-01-29 23:51:48
237
原创 JS扫盲之隐式转换
隐式转换可谓是JS中的一大难点之一，也是我们平时写代码遇见最多的东西。如果搞不清楚，我们就不能完全掌控我们的代码，因为不知道它会有什么结果。今天我们就来好好唠唠这玩意。抽象操作ES5规范的第9节中定义了一些抽象操作(abstract operation)，这些操作仅供内部使用。通俗的解释就是我们不能去调用他们，你可以理解为这只是一个规则，用于隐式转换的规则，这些规则都有他们自己的名字，方便理解...
2020-05-02 15:09:00
359
原创 你不知道的CSS动画
CSS动画相信大家都非常熟悉，那么我们今天就聊一聊你不熟悉的CSS动画。本文不会讲解CSS动画的基础知识，对于这些内容还不了解的建议先去学习CSS动画的基础知识。贝塞尔曲线https://cubic-bezier.com/我们知道，CSS 动画中有一个属性叫做 animation-timing-function ，它定义CSS动画在每一动画周期中执行的节奏。我们平时最常见的几个值就是ani...
2020-04-18 11:56:36
259
1
原创 【干货】【建议收藏】chrome开发者工具最常见的使用方式
我相信 chrome 是每个前端开发者最常使用的浏览器了，而它为我们提供的 chrome 开发者工具其实是一个巨大的宝藏。今天我们就来解锁一下 chrome 开发者工具的各种常见的使用方式。首先先把 chrome 的官方文档放出来镇楼：chrome开发者工具如果下面介绍的一些选项你无法找到，都可以在 more tools 中找到PS：本文首先会为大家介绍开发工具最基本的使用方式，然后介绍一些...
2020-04-12 15:04:01
978
原创 你真的了解重排和重绘吗？
做过前端开发的小伙伴就算不是非常理解重排与重绘，但是肯定都听过这两个词。那为什么这两个东西这么重要？因为他与我们的页面性能息息相关，今天，我们就来好好研究一下这两个东西。浏览器的渲染流程在讲解重排和重绘之前，我们有必要说一下浏览器的渲染流程。下面是浏览器渲染过程中最关键的几个部分。如果想了解完整的浏览器渲染流程，推荐大家去阅读其他的博客，这不是本文关注的重点。JavaScript：一般来...
2020-04-09 18:11:05
6290
6
原创 发布一个npm包——以angular为例
一、前言 做前端的同学和npm打交道的次数可不算少，npm上有许多好用的库可以帮我们节省很多时间，那么今天我们就尝试发布一个angular组件到npm上。二、创建项目 首先，我们来创建一个angular项目，不同于平时我们使用ng new app 来创建项目，我们本次使用ng new angular-npm --createApplication=false 来创建我们的...
2020-02-23 11:22:45
339
原创 span标签的间距问题
一、前言 平时在实现ui的设计稿的时候会遇见一些小问题，比如莫名其妙的间距，明明没有加margin和padding，但是就是会出现间距，这就是两个span标签的间距问题。我们今天就这个问题进行分析。二、现象描述<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
2020-02-15 19:45:05
13260
3
原创 js中遍历对象的几种方法
一、前言我们知道，在js的对象中，有下面几种属性:可枚举属性不可枚举属性从原型链上继承的属性以Symbol作为key值今天，我们就来谈一谈如何遍历这些属性。二、遍历可枚举属性 首先，遍历可枚举属性是非常常见的一个需求，我们平时比较常用的方法是for in和Object.keys()，这两个方法都能遍历可枚举属性，我们看看如下的代码:let obj = { name: "...
2019-10-27 10:50:58
2948
原创 js中的浅拷贝与深拷贝
一、引言 深拷贝浅拷贝是一个老生常谈的问题了，那么，到底什么是深拷贝，什么是浅拷贝，又如何实现一个深拷贝。今天，我们就来谈一谈这些问题。首先，我推荐你阅读我之前写过的一篇文章js的栈内存和堆内存，其实，它就是深浅拷贝的底层原理，话不多说，我们现在开始。二、深拷贝和浅拷贝 如果你仔细阅读了我之前的那篇文章，相信你已经很了解js中的两种内存了，而深浅拷贝正是与他们的存储方式有关。 对于基...
2019-09-16 09:54:48
161
原创 利用nginx反代实现跨域
一、前言 我们知道跨域在前端开发中是一个非常常见的问题，我们平时也有很多方法去解决他，比如说降域、cors、jsonp、postMessage等。还有一种很常用的方式是用nginx反代的方式去实现跨域，今天我们就来谈一谈关于使用nginx反代来实现跨域的问题。二、原理 我们都知道，跨域问题的产生是因为不同源的问题，那么，同源是指什么呢？同源，即域名、协议、端口都一样即同源。如果有一个不一...
2019-09-09 09:17:33
362
原创 js原型链解析
一、前言 学前端的人不能不会js, 学js的人不能不懂原型链。原型链可以说是js中非常关键的一环，今天借此机会好好剖析一下原型链，也加深一下自己的理解。二、js对象的几个属性 在js中, __proto__和prototype是两个比较重要的属性，这两个的区别其实也非常简单。首先，每个对象都会有__proto属性，他会指向自己的构造函数的原型。而并不是每个对象都有prototype属性，...
2019-09-02 22:45:08
126
原创 基于blob对象动态封装一个web worker
一、前言 在html5出来以后，有许多新特性值得我们关注, 其中一个就是web worker。相信如果关心前端发展的同学就算没有使用过web worker也听过这个东西。今天我们就来讲一讲web worker。二、基本使用 其实，web worker的作用十分简单，就是可以在后台运行一个js文件，所以我们在实际使用中可以将一些非常耗时的计算交给web worker去做。但是值得注意的是，...
2019-08-18 21:19:20
1670
1
原创 web开发中实现页面记忆的几种方式
一、前言 在前段时间公司有个需求是对前一个页面的操作进行记忆，例如分页的样式，选中的条件等。之前是用的session去存储记忆数据，老大让我调研一下目前比较合理的方式然后分析一下，这里以本篇博客作为总结。二、核心思想 既然需要返回上一个页面时能够回到上一次的操作界面, 势必需要对某些数据进行记忆, 所以关键点就是缓存数据.随之而来的问题是:需要缓存哪些数据数据缓存在什么位置缓存的...
2019-08-11 15:45:23
1927
原创 经典排序算法之堆排序
一、前言 各种排序算法的掌握对于一个程序猿来说还是有必要掌握的, 所以自己打算对各种排序算法都分析一遍，首先从堆排序开刀。二、基本思想 堆的定义如下:n个元素的序列{k1k_1k1, k2k_2k2, …\ldots…, knk_nkn}, 当且仅当满足下列关系时，称之为堆:{ki≤k2i,ki≤k2i+1, \begin{cases} k_i ...
2019-08-04 16:30:59
221
原创 node中的package.json和package-lock.json
一、前言 如果使用npm来管理依赖包的同学可能会经常遇见package和package-json这两个文件，但是可能并不是每个人都知道这两个文件的含义，今天我们来简单介绍一下这两个文件。首先我们先来介绍一下语义化版本控制二、语义化版本 什么是语义化版本？我们使用npm引入的包版本都是0.1.93或者0.1.97，这就是语义化版本，这几个数字可不是随随便便写的，那么他们到底都是什么意思呢？...
2019-07-27 15:28:27
220
原创 关于js中的变量提升和函数提升的思考
一、前言 如果没有接触过js的人可能对于这两个概念比较陌生, 但是对于使用js的人来说这应该是在熟悉不过的两个概念了, 但是在es6出来以后， 函数提升的行为有了很大的变化。最根本的原因就是因为es6中有了块级作用域的概念, 下面我们开始本文的介绍。二、es6之前的变量提升和函数提升 变量提升:使用var声明的变量会提升到作用域顶部。是不是听起来很简单, 我们来看一个简单的例子:con...
2019-07-27 10:34:02
145
原创 三列等高布局实现
前言 三列等高布局可能是我们平时开发中用的比较多的布局, 因为有时为了美观必须让三列等高, 但是我们的div又是被内容撑开的, 不能提前设置高度, 这时候就需要我们利用一些骚操作。不过在flex布局出来以后, 这个问题就变得很简单了, 我们后面再介绍。margin+padding实现 首先我们先来看一下最后的效果: 左边两列都会自动和第三列对齐, 下面我们一步步来实现。 首先很...
2019-07-14 20:59:31
861
原创 深入理解js闭包
一、什么是闭包 在JS高程上，是这样介绍闭包的:闭包是指有权访问另一个函数作用域中的变量的函数。比如下面这个最简单的例子：function returnf() { var a = 1; return function f() { console.log(a); }} 在f中可以访问returnf函数中的a变量，所以这样就创建了一个闭包。当我们用变量接到f函数的时候，就可以在...
2019-07-06 17:52:26
276
原创 React实战 Tree组件简单实现
一、前言 这个简单树组件也是自己为了熟悉react而做的，所以只是简单实现了基本功能，但是做完之后感觉其中也有很多需要自己总结的地方。其中还有几个未解决的问题自己在解决之后会修改这篇博文。话不多少，首先来看看我们到底要实现什么效果我们的目标很简单，就是实现这样一个功能就行了，但是注意需要有一个半勾选的状态，就是父节点的某个子结点被选中了，那么这个结点就是半勾选状态。二、思路分析 当我...
2019-07-06 15:52:56
5422
原创 js的栈内存和堆内存
一、引言 首先，我们应该对于栈内存和堆内存有一个大概的了解。存储在栈内存中的变量应该是大小固定并且不可扩展的。而存储在堆内存中的变量则灵活许多，可以动态增加或减少。通过理解js的栈内存和堆内存能够帮助我们理解很多js中的内容，下面我们正式开始。首先介绍一下js中的基本类型和引用类型。二、基本类型和引用类型 我们知道在js中的数据类型可以分为基本类型和引用类型。基本类型是存在栈内存中的，引...
2019-06-30 17:08:58
666
原创 vue双向绑定原理解析
一、前言 Vue可以说是最近比较火的一个框架了，自己也用vue写过几个小项目了，所以在空余时间研究了一下vue双向绑定的原理，最后形成博客让自己印象更加深刻，也算给大家分享一些经验。二、实现原理 首先我们来说一下vue的双向绑定到底是如何实现的。其实vue是使用了数据劫持+订阅发布模式来实现的双向绑定。其中最主要的一个函数就是Object.definProperty()，如果不清楚这个函...
2019-06-21 20:56:45
206
原创 DNS服务器原理解析
1.引言 我们在日常生活中经常浏览各种各样的网页，大多数时候我们是通过类似于www.baidu.com这样的域名来访问的，那么对计算机有一点了解的人可能会知道其实每个网址最后还是会被解析成ip地址去请求页面，由域名到ip这个过程就是DNS干的事情。2.DNS是什么 DNS,Domain Name System，其实是一个域名系统，自发明以来，一直是Internet的关键组成部分。DNS的...
2019-06-15 20:59:00
717
原创 js中this的理解
1.前言 对于前端开发人员来说，js中的this指向一直是一个非常难以搞懂的东西，若你没有花一定的时间去理解它，在开发的过程中还真的会踩很多坑。所以，我也借此博客来分享一下自己对于js中this的理解。2.规则总结 对于js中的this到底指向什么，我借用我在别人博客上看见的几点总结。因为我看那篇文章离现在的时间比较久远，所以目前也找不到那篇文章了。只能对原作者说一声抱歉，如果有人在其他...
2019-06-11 22:18:29
248
原创 js中的bind、apply、call的原生实现及其思考
一、引言 说起这三个函数，可能大部分人都觉得，这有啥，我用的贼熟练。对，没错，这是js中十分常见的三个改变this指向的函数，但是里面其实还是有一些细节的地方值得大家注意。下面我们先简要介绍一下这三个函数。二、函数的用法 其实这三个函数的用法挺简单的，所以我就不过多介绍了，只是简要的介绍一下。apply函数接受两个参数，第一个是要绑定给this的值，第二个是一个数组，call函数和ap...
2019-06-09 10:55:03
187
原创 从0开始实现一个promise
一、前言 promise是es6中一个比较重要的东西，解决了之前的回调地狱的问题。也是在各种面试中出现比较频繁的问题，之前自己在面京东的时候就被问到了finally是如何实现的。可惜当时自己自认为会用promise了，殊不知对其原理了解过于肤浅，自然这次面试也挂掉了。话不多少，本文将从0开始介绍如何实现一个promise，包括then,reject,resolve,race,all,final...
2019-06-08 20:00:52
266
原创 spring boot+mybatis环境配置
一、开发环境win10+idea+jdk1.8二、项目目录controller:控制器，其中写业务逻辑domain:实体类，对应数据库中的表mapper:数据库交互接口，相对于其他目录结构中的daoservice:对各个数据库的具体操作，其中UserService为接口，在impl中实现该接口SpringbootApplication：项目入口static：静态...
2019-03-28 22:28:13
566
原创 vue.js学习（一）
之前本人花了一天时间粗略阅读了vue.js的文档，这是官方文档链接，然后再开始在视频的帮助下进行学习。今天学习的内容主要有以下几点:1.vue.js的基本语法2.一些基本指令3.事件修饰符4.vue中的样式5.区分MVC和MVVM，区分框架和库5.写了两个简单的实例下面我将阐述个人认为的难点以及重要的地方，vue的基本语法以及事件修饰符我将不再过多阐述，官方文...
2018-09-18 17:45:29
218
正则表达式到dfa（graphviz输出图像）
2018-10-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人