- 博客(75)
- 收藏
- 关注
RSS订阅原创 antd Menu + Modal + Textarea导致光标不可被键盘控制问题
说一下问题出现的需求场景，需要点击出现一个下拉框，不同的下拉框对应不同的Modal组件，包括显示账号信息，禁用/启用账号并填写原因等需求。就是用的Dropdown组件+Modal+Input.Textarea组件来做，做完以后发现出了一点bug。文本域中点击上下左右键，光标不随着移动。经过排查，发现Dropdown内如果点击选中MenuItem后，不使其回缩，会发现，在文本域中输入文字后，如果点击上下键，光标不动，但是MenuItem的选中会跟着键盘事件移动。这说明MenuItem或者Menu对键盘事件也
2022-04-22 15:51:03
1226
原创 antd 分页组件的pageSizeOptions属性使用需注意
问题描述在近期的开发中，使用的UI框架是antd，列表展示少不了用到分页组件。在使用 antd的分页组件Pagination的时候，关于每页大小的设置有两个相关属性PageSize和pageSizeOptions。根据下拉框可以选择pageSizeOptions的元素，来设置PageSize，但是修改PageSize并不能影响pageSizeOptions的被选项。且组件如果被卸载，但是想要保存PageSize也会出问题，因为pageSizeOptions不可以由代码指定选择第几项。当组件被卸载又挂载后，
2022-04-18 16:19:04
7065
原创 关于内存泄漏
内存泄漏什么是内存泄漏内存泄漏是指无用的数据还占用内存，使得该内存无法释放和归还，内存泄漏情况严重时过多内存被占用会导致整个系统卡顿，甚至崩溃。引擎中有垃圾回收机制，主要针对一些程序中不再使用的对象，对其清理回收并释放响应内存空间。引擎针对垃圾回收做了各种优化，为了尽可能的确保垃圾能够被回收，但在开发过程中不当的操作会使的引擎并不能确认当前对象是否不会再被使用，无法进行回收，造成内存泄漏的情况。相关概念内存管理像c语言这样的底层语言一般都有底层的内存管理接口，比如malloc()和free()
2022-04-14 16:38:36
446
原创 keep-alive原理
keep-alive原理什么是keep-alive <keep-alive>是vue实现的一个内置组件，是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive的作用所以我们可以把一些不常变动的组件或者需要缓存的组件用<keep-alive>包裹起来，这样keep-alive就会帮我们把这些组件保存在内存中，而不是直接销毁，这样就可以保留组件的状态并且避免多次重新渲染。属性&l
2022-02-28 21:08:14
618
原创 Vuex原理
Vuex注入Vuex是作为vue的一个插件而存在的，它只能应用在vue中，是因为其高度依赖vue中的computed依赖检测系统以及其插件系统。在vue中，每一个插件都需要一个公开的install方法，在vuex中，它的install方法中调用了applyMixin方法。这个方法的主要作用是在所有组件的beforeCreate生命周期中注入this.$store这样一个对象。源码如下：// src/store.jsexport function install (_Vue) { if (Vue
2022-02-28 14:59:24
1073
原创 面试题——判断一个树是否为满二叉树
在一次面试中，面试官出题：判断一棵二叉树为满二叉树。由于比较紧张，有大概思路，但是最终没有实现。面试结束后整理了一下思路，将最后的逻辑捋清楚，完成了这道算法题，这里来总结一下。思路其实具体思路很简单，就是去遍历每一次每层节点，判断当前层的节点数与上层节点的关系。如果为满二叉树，一定每一层的节点数都是上层节点数的两倍。实现createTree看import {createTree} from '../算法模板/二叉树节点.js'let root = createTree(1, 2, 3, 4,
2022-02-23 22:02:38
940
原创 手写Promise系列之——all
面试过程中少不了手写题，而promise相关的手写题也是很经常被问到，这里就来整理一下promise手写系列。整个系列预计有以下几个函数的手写文章，今天先来实现all函数allanyraceallSettledresolve+rejectpromise手写实现Promise.all作用Promise.all()方法用于将多个Promise实例包装成一个新的Promise实例。const a = Promise.all([p1, p2, p3])最终a的状态由p1,p2,p3决定。
2022-02-16 10:16:37
646
原创 bundle、chunk、module的区别
概念bundlebundle由许多不同的模块生成，包含已经经过加载和编译过程的源文件的最终版本chunkchunk主要是在内部用于管理捆绑过程。输出是由bundle由chunk组成，其中有几种类型entry child等。通常，chunk直接与bundle对应，但是有些配置不会产生一对一的关系，例如MiniCssExtractPlugin可从chunk中抽离出css文件，单独生成bundle。生成chunk有三种方式，entry、动态加载、splitChunks抽取共有代码Modulemodul
2022-02-13 19:51:53
2532
1
原创 webpack构建过程
大致流程webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程初始化参数：从配置文件和Shell语句中读取与合并参数，得出最终的参数开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译确定入口：根据配置中的entry找出所有的入口文件编译模板：从入口文件出发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤知道所有入口依赖的文件都经过本步骤的处理完成模块编译：再经过第4步使用Loader翻译
2022-02-13 19:47:01
524
原创 Webpack相关概念
什么是webpack本质上，webpack是一个用于javascript应用程序的静态模块打包工具。当webpack处理应用程序时，他会在内部从一个或多个入口构建一个依赖关系，然后将项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示我们的内容。配置项概念使用webpack需要做好相应的配置，在使用之前我们需要先了解其相关的核心概念入口（entry）输出（output）loader插件（plugin）模式（mode）浏览器兼容性（browser compati
2022-02-12 14:13:16
739
原创 重绘与回流
前言关于浏览器渲染我们需要知道：浏览器使用流式布局模型浏览器会把HTML解析成DOM，把CSS解析成CSSOM,DOM和CSSOM合并就产生了Render Tree。有了RenderTree,我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。由于浏览器使用流式布局，对Render Tree的计算通常只需要比那里一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一浏览
2022-02-10 22:30:07
123
原创 Object 常用API
写这篇文章主要是用来整理一下常用的Object API，加深记忆以及方便后期自己查阅构造函数Object()构造函数Object构造函数将给定的值包装为一个新对象如果给定的值是null或undefined，它会创建并返回一个空对象 否则，将返回一个和给定的值相对应的类型的对象 如果给定值是一个已经存在的对象，则会返回这个已经存在的值（相同地址）静态方法Object.assign()通过复制一个或多个对象来创建一个新的对象。Object.assign()方法用于将所有可枚举属
2022-02-10 17:55:53
916
原创 JavaScript之数组去重
数组去重也算是前端面试的一道经典题了，这里我们来总结一下具体有哪些方法，各自的逻辑：1. 双层for循环function distinct(arr){ let len = arr.length for(let i = 0; i < len; i++){ for(let j = i + 1; j < len; j++){ if(arr[i] === arr[j]){ arr.splice(j, 1)
2022-01-20 15:17:33
827
原创 使一个dom不可见的几种方法——隐藏元素
隐藏元素的方法有很多，这里我们就来整理具体有哪几种方法，它们谁是真正的隐藏，谁只是视觉不可见，以及效果上都有什么区别，在开发过程中大家斟酌使用。隐藏元素的方法display: nonevisibility: hiddenopacity: 0<div hidden></div>position: absolute; top: -9999px; left: -9999px;clip-path: polygon(0 0, 0 0, 0 0, 0 0)width: 0; h
2022-01-20 11:37:24
4004
原创 cookie、session和localStorage
cookieCookie 是服务器发送到用户浏览器并保存在本地的一小块数据，他会在浏览器下次向同一服务器再次发起请求时被携带并发送到服务器上。主要用于告知服务端两个请求是否来自统> 一浏览器，如保持用户登陆状态。什么是cookiehttp协议是无状态的，也就是说浏览器对服务器的每次请求是单独的，服务端无法判断用户身份是否已经被认可。Cookie时机是一小段的文本信息(key-value格式)。客户端向服务端发起请求，如果服务器需要记录该用户状态，就是用response向客户端浏览器发送一个
2022-01-10 14:05:10
2260
原创 Vue模版编译
什么是vue模板编译在使用vue开发过程中，我们把写在<template></template>标签中的内容称之为模板。除去一些html原生的内容还有solt、v-if、v-on、{{}}这些原生html不存在的语法，但是仍然可别浏览器识别，其中最重要的一个原因就是vue的模板编译了。Vue会把用户在<template> </template>标签中写的内容进行编译，找出原生的html和非原生的html内容，经过处理生成渲染函数，也就是render函数
2022-01-08 20:25:41
1509
原创 script标签中的defer与async
defer和async是script标签的两个属性，主要用于异步加载执行脚本，在不阻塞的页面文档解析前提下，控制脚本的下载和执行。页面加载和渲染过程浏览器通过http协议请求服务器，获取html文档并开始从上到下解析，构建dom在构建dom过程中，如果遇到html文本里面引用外部资源链接，比如css、js等，会立即启用别浏览器线程下载这些静态资源。需要注意的是，当遇到js文件时，html解析会停下来，等js文件下载结束并执行完，html解析工作才会继续。但是css的加载并不会阻塞渲染过程，下载完成后
2022-01-08 16:17:10
411
原创 Doctype
什么是DoctypeDOCTYPE是html中一种标准通用标记语言的文档类型声明，他的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对css代码甚至javascript脚本的解析，必须生命在html文档的第一行标准模式与兼容模式各有什么区别？CSS1Compat：标准模式，默认模式，浏览器使用W3C标准解析渲染页面，在标准模式中，浏览器以其支持的最高标准呈现页面BackCompat：怪异模式（混杂模式），浏览器使用自己的怪异模式解
2022-01-08 15:07:08
253
原创 src和href的区别
href和src是有区别的，而且是不能相互替换的。我们在可替换的元素上使用src，然后把href用于涉及的文档的外部资源之间建立一个关系。hrefhref（Hypertext Reference）表示超文本引用，指定网络资源的位置，建立和当前元素或文档的链接关系。当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理。常用在alink等标签上。比如以下情况：<link href="style.css" rel="stylesheet" />浏览器明白当前资源是一个样式
2022-01-08 14:02:13
490
原创 meta标签详解
描述HTML文档的元数据<head> <meta name="description" content="免费在线教程"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="runoob"> <meta charset="UTF-8"></head>简介元数据（Metadata）是数据的数据
2022-01-08 10:43:15
1098
原创 Vue双向绑定原理（v-model）
之前有整理过Vue响应式原理，响应式主要的效果是数据改变了就会引起页面修改。关于v-model我们也不陌生，vue的双向绑定指令，页面修改会引起数据修改，数据修改页面也会跟着改变。我们直到数据->页面是由vue的响应式原理实现的，那么该怎么做到页面->数据的修改呢？表单绑定v-model一般我们是在表单元素上进行使用，因为视图能影响数据，本质上是这个视图需要可交互，因此表单是实现这一交互的前提。表单的使用是以<input>、<textarea>、<select&
2022-01-06 21:15:46
3626
原创 ES6之Proxy
简介Proxy用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种"元编程"（meta programming），即对编程语言进行编程。Proxy可以理解为，在目标对象之前架设一层"拦截"，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy这个词的原意是代理，用在这里表示由它来"代理"某些操作，可以译为"代理器"。简单来说Proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。va
2022-01-05 18:04:35
460
原创 Set、Map、WeakSet与WeakMap的区别
前言ES6中有了Set和Map两种结构，那么Set和Map分别是什么样的结构，有什么区别呢。简单介绍一下：Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构什么是集合？什么又是字典集合是由一堆无序的、相关联的，且不重复的内存结构【数学中成为元素】组成的组合字典是一些元素的集合。共同点：集合、字典都可以存储不重复的值不同点：集合是以[值，值]的形式存储元素，字典是以[键，值]的形式存储Set、WeakSetSet基本用法ES6提供了新的数据结构Set。它类似
2022-01-03 21:04:49
508
原创 数组扁平化【JS】
前言今天整理一道面试中的经典高频题：数组扁平化。先说一下什么是数组扁平化，简单来说就是把多为数组的元素按顺序放置在一维数组中，使其扁平。比如说[1, 2, 3, 4]这是一个拥有3个元素的数组，是一个一维数组（不存在数组嵌套）。[[1, 2, 3], [4, 5], [6, 7]]从整体上看是一个数组，但是其中的元素又是数组，即数组中嵌套数组。可以有二维，三维，n维数组。而数组扁平化就是把多为数组转化成一维数组，比如上文中的二维数组通过扁平化就变成[1, 2, 3, 4, 5, 6, 7]那么实现数组扁
2021-12-31 17:09:57
551
原创 var与let、const之间的区别
说到JavaScript中声明变量的几种方法也就是var、let、const了，let和const是es6中新增的命令。那么它们之间有什么区别呢？我们先整体说一下三者的区别，在详细介绍，var、let、const的区别主要从以下几点分析：作为全局变量时的不同变量提升暂时性死区块级作用域重复声明修改声明的变量作为全局变量时在ES5中，顶层对象的属性和全局变量是等价的，用var声明的变量既是全局变量，也是顶层变量的属性但是ES6中用let声明的变量可以在全局访问到，但是并没有在顶层变量的
2021-12-30 20:51:00
553
原创 05. 70爬楼梯
题目描述假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？注意：给定 n 是一个正整数。示例 1：输入： 2输出： 2解释： 有两种方法可以爬到楼顶。1 阶 + 1 阶2 阶示例 2：输入： 3输出： 3解释： 有三种方法可以爬到楼顶。1 阶 + 1 阶 + 1 阶1 阶 + 2 阶2 阶 + 1 阶递归实现不得不说递归总是最容易被想到的一种方案，我们可以稍微思考一下怎么来规划最小单元呢。第
2021-12-23 18:18:19
72
原创 04. 二叉树中最大路径【力扣124】
题目描述路径 被定义为一条从树中任意节点出发，沿父节点-子节点连接，达到任意节点的序列。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点，且不一定经过根节点。路径和 是路径中各节点值的总和。给你一个二叉树的根节点 root ，返回其 最大路径和 。示例 1：输入：root = [1,2,3]输出：6解释：最优路径是 2 -> 1 -> 3 ，路径和为 2 + 1 + 3 = 6示例 2：输入：root = [-10,9,20,null,null,
2021-12-23 10:57:19
181
原创 BFC（Block Formatting Context）
在讲BFC之前我们需要先来说说Formatting Context1. Formatting Context1.1 什么是Formatting ContextFormatting Context（格式化上下文）：是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互之间的作用。一个格式化的内容是在其中一组相关的盒中规定的环境。不同的格式化上下文根据不同的规则布置它们的框。例如flex格式上下文根据flex布局规则布
2021-12-23 09:40:21
274
原创 浮动布局【CSS】
1. 什么是浮动浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。1.1 特征1.1.1 脱离文档流脱离文档，也就是说浮动不会影响普通元素的布局。即其他div不会被设置浮动的div浮动位置影响，但是文字仍会为被浮动div让位。因为设置浮动的div只脱离了文档流并未脱离文本流。从上图可以看出，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元
2021-12-22 22:28:14
1400
原创 JavaScript创建与遍历二叉树
二叉树可以算得上是数据结构和算法的必学项，很多关于树的算法题给的输入直接就是树结构，关于怎么构建一颗二叉树很多关于数据结构的树都说烂了。但是大都是基于c语言讲的，这里主要是想总结一下前端人都在用的JavaScript怎么来构建一颗二叉树。本文章是基于对象结构构建的二叉树，大致的结构也很简单，二叉树的每个节点无非就是三个属性值val、left、right分别代表节点值，左孩子，右孩子。为什么考虑用对象结构在实现二叉树构建而不是数组结构呢？其实是写这个构建之前考虑到树各个节点之前是通过地址连接的，数组是一个连
2021-12-22 22:13:57
2238
原创 Vuex 模块化详解
本篇主要讲vuex的模块化，虽然官网已经讲得比较细致了，但是在实践的时候还是踩了不少坑。今天就在这里把模块化使用过程中的细节都讲清楚，方便大家学习，也方便自己以后复习。1.Vuex简单介绍1.1 Vuex是什么官方：Vuex是一个专为Vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化（即通过提交mutation来更新状态）Vuex是适用于Vue项目开发时使用的状态管理工具。把组件中的共享状态抽取出来，以一个全局单例模式管理
2021-12-20 22:25:53
7292
原创 防抖节流【JS】
概念在项目开发中避免不了使用防抖节流来限制频繁触发函数。既然要了解这个东西，首先要们要知道什么是防抖什么是节流防抖（debounce）在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。节流（throttle）规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。总结来说，防抖和节流都是防止同一时间内多次触发某个操作，但是其作用和原理又不尽相同。防抖相当于每次触发重新计时，只有最后一次操作有效，举个不起恰当的例子，比如说我们刷新页面时加载页面资源需要
2021-12-20 19:41:16
419
原创 Vue组件通信
前言Vue中不管是每个页面，还是从多个页面中抽取出来的公共代码封装，都属于组件。在Vue项目中组件开发是必不可少的。那么组件与组件之间必定不是完全分离的，大多业务组件之间涉及到数据交互，组件通信必不可少。那么在Vue项目中都有哪些通信方式，应用场景分别是怎么样的呢？为什么要用到组件通信组件是Vue最强大的功能之一，组件实例的作用域是相互独立的，这意味着不同组件之间的数据无法相互引用。所有组件都无法直接访问其他组件的data、methods、computed，每个组件都是一个局部作用域，这样做的目的是为
2021-11-02 17:17:39
339
原创 Vue面试题之——v-if、v-show的区别
今天看到一个问题v-if、v-show有什么区别。有什么区别呢，脑子中只有一个v-if是对节点的删除增加做到节点的出现和隐藏的，v-show是通过添加和取消display: none，来实现可见不可见的。其他呢，想不起来了，赶紧全面了解整理一下吧。v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。<h1 v-if="awesome">Vue is awesome!</h1>也可以搭配v-else使用，添加一个else块。
2021-10-28 10:57:51
423
原创 JavaScript——二叉树层序遍历
题目描述给你一个二叉树，请你返回其按 层序遍历 得到的节点值。 （即逐层地，从左到右访问所有节点）。示例二叉树：[3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 7返回其层序遍历结果：[ [3], [9,20], [15,7]]递归实现代码 var levelOrder = function(root) { if (root === null) return [] l
2021-10-28 09:17:42
1800
原创 Js面试题之——箭头函数与普通函数的区别
在项目开发中，包括面试的时候经常会遇到或问到箭头函数和普通函数有什么区别当我们猛然去想，好像一直以来只记得箭头函数中没有this，当我们在箭头函数中使用this会获取该函数上层的this值。那么除此之外，就没有其他区别了吗，当然不是。这里我们就来总结总结。mdn中对箭头函数特点的描述是这样的：箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this、arguments、super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且不能作构造函数。由此可以看出箭头函数和普通
2021-10-27 17:42:38
620
原创 实现水平垂直居中方式
在开发过程中不可避免的就是各种居中，块级、行内级、定高、不定高、垂直、水平还是水平垂直居中。都有哪些实现方案，在开发中应该选用哪个方案比较合适，这里我们就来梳理一下。以便以后使用的时候更加得心应手。水平居中行内元素水平居中1. text-align:center当我们想要给一个行内元素设置水平居中时，只需要对其父元素设置text-align:center;，我们可以看一下示例：<body> <div class="parent"> <span
2021-10-27 12:43:20
566
原创 js面试题之——深浅拷贝
一直以来倒是没有仔细的思考过深浅拷贝的问题，最近有听到小伙伴在讨论，全面了解了一下，深拷贝并没有那么简单。现在让我们来一起探讨深浅拷贝相关的内容吧。基本数据类型、引用数据类型为什么会出现深浅拷贝的问题，主要因为在于js中所有的数据类型分为基本数据类型和引用数据类型两大类。那么基本数据类型有哪些呢：Number、String、Boolean、Undefined、Null、Symbol、BigInt引用数据类型，就是Object了，但是js封装了几个继承了Object原型属性的一些对象，Array、Fu
2021-10-26 20:59:16
1229
原创 JavaScript——获取两个链表的第一个公共节点
题目描述输入两个无环的单向链表，找出它们的第一个公共结点，如果没有公共节点则返回空。（注意因为传入数据是链表，所以错误测试数据的提示是用其他方式显示的，保证传入数据是正确的）数据范围： n≤1000要求：空间复杂度 O(1)，时间复杂度 O(n)示例1：输入：{1,2,3},{4,5},{6,7}返回值：{6,7}说明： 第一个参数{1,2,3}代表是第一个链表非公共部分， 第二个参数{4,5}代表是第二个链表非公共部分， 最后的{6,7}表示的是2个链表的公共部分这3个参数最后
2021-10-25 20:06:05
401
原创 JavaScript——反转链表
题目描述输入一个长度为n链表，反转链表后，输出新链表的表头。数据范围： n≤1000要求：空间复杂度 O(1) ，时间复杂度 O(n)。如当输入链表{1,2,3}时，经反转后，原链表变为{3,2,1}，所以对应的输出为{3,2,1}。以上转换过程如下图所示：示例1：输入：{1,2,3}返回值：{3,2,1}示例2：输入：{}返回值：{}说明：空链表则输出空 递归实现先看代码：function ReverseList(pHead){ if(pHead === nul
2021-10-23 10:16:57
2085
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人