自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(64)
  • 收藏
  • 关注

原创 前端面试题之将自定义数据结构转化成DOM元素

如下图所示:给你一个嵌套的dom数据结构,如何将它转化成jsx的dom元素;

2025-06-11 22:54:45 191

原创 深入了解Javascript局部变量

是指在。

2025-05-17 14:56:59 614

原创 leeCode算法之独一无二出现次数

给你一个整数数组arr,如果每个数的出现次数都是独一无二的,就返回true;否则返回false。true在该数组中,1 出现了 3 次,2 出现了 2 次,3 只出现了 1 次。没有两个数的出现次数相同。falsetrue。

2025-05-07 18:24:23 223

原创 使用原生javascript手动实现一个可选链运算符

在ES2020标准里面有一个可选链运算符,比如一个obj={};如果直接使用obj.a.b就会在控制台报错,而使用obj?.a?.b的返回结果为undefined并且不会报错;这是因为如果引用是或),它不会导致错误,而是使表达式短路并返回undefined。

2025-05-06 22:54:44 353

原创 macbook使用duti工具来设置文件的默认打开方式

/ 使用brew安装// 默认使用vscode打开所有js文件// 默认使用vscode打开所有less文件。

2024-12-25 14:40:06 358

原创 iterm2 focus时灰色蒙层出现的解决办法

当前我的iterm2版本是3.5.10,是我最近才更新的,然后就出现以下页面显示问题,如图所示:我个人对终端、编辑器等使用存在洁癖,尤其是页面显示效果不满意更是不能忍受,之前找了很久没有找到满意的方案,后来经过我的摸索发现只需要改一个配置项就能解决:

2024-12-22 18:27:03 392

原创 serviceworker简单应用

Service Worker 是一种运行在浏览器后台的脚本,它为网络应用提供了事件驱动的API,使得开发者可以创建更丰富的离线体验和实时功能。Service Worker 运行在它自己的线程中,因此不会影响页面的性能。离线体验: Service Worker 允许开发者缓存文件,这样即使用户处于离线状态,应用仍然可以工作。消息推送和通知: Service Worker 支持推送消息,即使应用没有打开,也可以发送通知给用户。后台同步。

2024-12-21 12:52:51 1579

原创 http1.1 vs http2.0 速度对比实测

HTTP/2.0 相比 HTTP/1.1 在性能和效率上有显著提升,特别是在处理大量请求和高延迟网络环境中。通过并行处理、头部压缩和服务器推送等特性,HTTP/2.0 提供了更快的加载速度和更好的用户体验。

2024-12-15 19:46:00 976

原创 Mac上使用ln指令创建软链接、硬链接

在Mac、Linux和Unix系统中,软连接(Symbolic Link)和硬连接(Hard Link)是两种不同的文件链接方式。

2024-12-14 18:03:41 3439

原创 nginx: [emerg] open() “/usr/local/var/log/nginx/access.log“ failed (13: Permission denied)

看报错信息描述,是access.log文件没有加管理员权限。

2024-12-13 20:53:55 376

原创 深入理解JavaScript模块化

在NodeJS之前,由于没有过于复杂的开发场景,前端是不存在模块化的,后端才有模块化。以上就是 ES6 Module 输出引用和 CommonJS 输出值的区别,模块内部引用的变化,会反应在外部,这是 ES6 Module 的规范。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在成为浏览器和服务器通用的模块解决方案。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。,模块的加载不影响它后面语句的运行。命令的时候,用户需要知道所要加载的变量名或函数名。

2024-12-11 15:35:44 1026

原创 leeCode算法之字符串中第二大的数字求解

出现在 s 中的数字包括 [1, 2, 3]。第二大的数字是 2。出现在 s 中的数字只包含 [1]。的数字,如果不存在第二大的数字,请你返回。由小写英文字母和数字组成。

2024-12-03 14:57:24 185

原创 leeCode算法之最接近的三数之和求解

2.初始化一个用于保存结果的值 result = nusm[0] + nums[1] + nums[2] (直接从数组中抽取三个元素,假设这是最接近的三数之和,后续再更新即可,这样做的好处是后面for循环的次数会减少2次)7.如果 sum 的值比 target 大,那么我们让 right--,因为数组是有序的,right --会使得下一次的 sum 更小,也就更接近 target 的值。4.每次遍历的过程中设置两个指针,分别是 left = i + 1、right = nums.length - 1。

2024-12-02 21:55:07 502

原创 leeCode算法之两数之和求解

因为 nums[0] + nums[1] == 9 ,返回 [0, 1]。不推荐:暴力解法就是两层遍历,如下图所示: 但时间复杂度是O(n^2)你可以假设每种输入只会对应一个答案,并且你不能使用两次相同的元素。插入到哈希表中,此时只会遍历一次,时间复杂度是O(n)推荐:使用哈希表算法,对于每一个。,我们首先查询哈希表中是否存在。整数,并返回它们的数组下标。你可以按任意顺序返回答案。,请你在该数组中找出。

2024-12-02 18:04:52 271

转载 基于qiankun微前端从0到1搭建

微前端是指存在于浏览器中的微服务,其借鉴了微服务的架构理念,将微服务的概念扩展到了前端。如果对微服务的概念比较陌生的话,可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块,每个微前端模块可以由不同的团队进行管理,并可以自主选择框架,并且有自己的仓库,可以独立部署上线。一般呢,微前端多应用于企业中的中后台项目中,因为企业内部的中后台项目存活时间都比较长,动辄三五年或者更多,最后演变成一个巨石应用的概率往往高于其他类型的web应用。这就带来了技术栈落后编译部署慢两个问题。

2024-11-30 16:40:11 160

原创 常见的包管理器

包管理器是用于自动化软件的安装、更新、配置、删除等任务的工具。它们通常用于操作系统和编程语言环境中,以简化依赖管理和软件部署过程。

2024-11-23 09:58:59 382

原创 【面试题】发起一次网络请求,当请求>=1s,立马中断

以上代码:需要使用npm install express, 再使用node http.js启动服务;在用户提交表单时,如果请求处理时间过长,可以中断请求并提示用户检查网络连接或重试。在多人在线游戏中,玩家的操作需要快速响应。如果请求延迟过长,可能会影响游戏体验。在用户查看动态或消息时,如果请求超时,可能会选择中断请求以避免显示过时的信息。在股票交易或加密货币交易中,快速的响应时间至关重要,延迟可能导致错失交易机会。

2024-11-14 17:49:07 218

原创 解决mac chrome浏览器运行掉帧问题

在chrome浏览器 - 设置 - 系统,打开图形加速功能即可。

2024-05-17 17:57:20 736 1

原创 vue $nextTick简单实现

nextTick 是 Vue.js 中的一个方法,用于在下次 DOM 更新循环结束之后执行延迟回调。其原理是在当前 DOM 更新循环结束之后,将回调函数推入微任务队列中,等待下一个微任务执行时调用。这样可以确保在 DOM 更新完成后执行回调,以便获取更新后的 DOM 状态。

2024-04-09 16:50:09 271

原创 on-my-zsh 命令自动补全插件 zsh-autosuggestions 安装和配置

4.查看效果,我们在输入git命令时,就能实现命令自动补全的功能了。

2024-03-29 18:40:38 7416

原创 企业微信如何接入第三方应用?

3. 此时可以看到已经创建好的应用,并且生成应用的唯一id(agentId)4. 第三方应用申请域名 (举例:https://baidu.com)5.企业微信打开该应用,就可以打开对应的地址;

2024-03-14 20:05:11 4723

原创 一起offsetLeft值引发的样式错乱问题

问题描述:问题描述:首先我们来看一下正常样式和异常样式,正常样式的左侧菜单会正常显示出来,而异常样式的左侧菜单会被覆盖;

2024-01-04 20:06:43 515

原创 npm run start启动时提示 A decorated export must export a class declaration报错

上面是一个react hoc高阶组件,es6装饰器的语法是要包裹class组件的,所以要改成以下这种写法就ok了;

2024-01-04 19:24:06 780

原创 Vscode编辑器保存时一直提示正在保存“index.vue”: 正在从“‘Vetur‘, ‘ESLint‘”获取代码操作

因为Vscode同时开启了editor.formatOnSave 和 editor.codeActionsOnSave, 如果只要eslint只需开启editor.codeActionsOnSave就可以了。这样就不会去走Vetur的情况。正在保存“index.vue”: 正在从“'Vetur', 'ESLint'”获取代码操作;

2023-11-14 15:40:08 3987

原创 vim 中批量添加注释

进入块选择模式,然后移动光标选中你要注释的行,再按大写的。会自动将你选中的所有行首都加上注释,保存退出完成注释。进入块选择模式,选中你要删除的行首的注释符号,注意。进入行首插入模式输入注释符号如。要选中两个,选好之后按。,输入完毕之后,按两下。

2023-11-09 17:08:53 860

原创 nginx -s reload, 提示 [emerg] duplicate location “/“

执行nginx -s reload, 提示 `duplicate location /`

2023-11-09 11:01:21 1508

原创 antd Table单元格文字超长处理

我们在开发React + antd 项目过程中,经常会遇到表格单元格文字超长此类问题,超长的文字会影响表格布局,那么我们该如何解决呢?话不多说,先直接看一下效果。

2023-09-18 20:57:06 973

原创 Mac终端命令总结

查看本机的显示系统中所有网卡的信息。重做,也就是撤销的逆向操作。打印当前工作目录的路径。查看本机网卡的IP地址。返回上一个访问的目录。

2023-09-12 16:57:53 3430

原创 企业微信电脑端开启chrome调试

然后我们点击 『浏览器、webView相关』菜单,勾选上 『工作台使用cef浏览器』子菜单,此时我们就可以chrome的开发者工具进行调试了。以实际的H5项目举例,鼠标右键,通过『打开调试』 按钮就可以唤起chrome开发者工具进行调试了;Mac端调试开启的快捷键:control + shift + command + d。Window端调试开启的快捷键: control + shift + alt + d。

2023-08-18 08:04:55 2416

原创 git push --force 后如何恢复上次提交

在我们日常的开发中,往往会出现这样的情况,一次commit提交是错误的,需要进行撤回;但是当改动内容过多,直接改代码比较麻烦,那么有些人可能就有一些取巧的办法,使用。但是当多人开发时,很可能将merge的代码或者其他人提交的代码也一并撤回了,这里问题就大了;撤回代码,并且可以撤销提交记录,看起来非常完美;这个命令一定要慎用,可能会导致一些代码丢失;那么遇到上述这种情况,我们应该怎么解决呢?来显示所有历史操作记录;

2023-04-09 14:31:27 3068 1

原创 记录一次由nginx配置引发出来的一系列的缓存问题

如果每次打开是上一次的缓存,那可能就是index.html的根文件被缓存住了,因为index.html里面会加载所有css、js文件,当时打开network看了下,响应头里面并没有Cache-Control: no-store, no-cache的字段,那问题的原因肯定是出在这儿了,上线的相关的部署配置是放在nginx上的;因为公司走的都是统一的容器化部署,当时nginx的部署也可以定制化的;经过一番摸索,问题其实是出在下面这个配置上了,因为项目代码存放的文件夹是freight。最终问题得到解决了!

2023-04-01 13:59:59 1189

原创 记一次前端cookie冲突,导致同一个浏览器其他系统被踢下线问题分享

虽然最终解决了问题,但是我觉得后端在cookie的设置上还是不够谨慎,一些重要cookie key信息不设置httponly, 及其容易发生cookie劫持攻击,因为cookie完全是后端设置的,所以也更应该设置成httponly,防止前端修改导致出现的一系列的问题了。最后如有不足之处,还望在留言区进行补充说明!

2023-03-25 16:29:33 919

原创 什么是前端构建工具?

构建工具是可以帮助开发者管理本地源文件,优化开发流程,降低开发复杂度,使开发者更加专注在业务逻辑开发上的一种工具。

2023-03-12 09:03:44 174

原创 React 中如何在非组件的函数中使用history的hooks函数

最近遇到一个问题,针对登陆的token失效时,需要跳转到首页刷新页面。肯定是要跳转到登陆页面让用户重新登陆的,但是React中和Vue不同,跳转依赖于router的hooks函数useHistory.但是在组件中才可以使用history,push()进行跳转,在函数中直接是使用不了的。于是看到这样的解决办法// 针对如何在非组件的函数中使用history的hooks函数。

2023-03-12 08:46:18 346

翻译 n– 交互式管理您的 Node.js 版本

删除已安装的 Node.js(不影响缓存版本)。这对于恢复到 node 的系统版本(如果在不同的位置),或者如果你不再希望使用 node 和 npm,或者正在切换到管理它们的不同方式很有用。Node.js 版本管理:没有子 shell,没有配置文件设置,没有复杂的 API。如果您已经安装了 Node.js,一种简单的安装方法。即可下载并安装一个 Node.js 版本。自行执行以查看您下载的版本,并安装所选版本。安装 Node.js 版本。

2023-01-10 15:51:15 241

原创 node debugger技巧

端口,然后打开控制台的node图标就能进入node debugger模式了( 如下图所示 )运行 nodejs 代码的时候,如果带上了。接着我们通过浏览器访问。

2022-12-17 14:27:14 393

原创 一段eslint jsx-a11y/anchor-is-valid警告背后的原因

我们在做React项目时,经常用到a标签做一些跳转动作,但是每次eslint都要提示 jsx-a11y/anchor-is-valid这段代码,我们可以通过/* eslint-disable jsx-a11y/anchor-is-valid */把这个规则屏蔽掉,但是显然不够优化,那到底是什么原因导致的呢?接下来我们打开以下这个链接,它详细的讲解了导致该现象的原因,以及我们该如何更好的处理这个问题。eslint-plugin-jsx-a11y/anchor-is-valid.md at 4abc751

2022-12-08 09:13:01 940

原创 记一次移动端封装自定义时间选择控件

近期在做一个移动端项目,遇到一个自定义选择时间控件的需求;具体要实现的交互逻辑如下:1. 预约下单的时候必须大于当前系统时间30分后,选择时间按照24小时制,分钟按照每隔15分钟进行显示(例如:15、30、45、00);2. 如当前时间为14点30分,此时预约时间只能大于15点之后的时间用车(包含15点整);3. 如当前系统时间为14点31分,此时预约时间只能大于15点整之后的时候用车(不包含15点整);

2022-12-02 19:55:45 808

原创 React.memo总结

当父组件某些state值更新时,子组件其实没有必要渲染,此时就可以使用React.memo对组件进行缓存,从而提高性能优。如果memo的对比开销大于组件实际的渲染开销,这种情况下使用React.memo往往会起到反作用。子组件渲染很耗时,属性的变更不是很频繁。做缓存的,便于我们做性能优化。

2022-11-22 09:16:11 258

原创 React为什么要使用Hooks以及个人的一些理解

和Hooks组件相比,它组件本身是没有状态的,并且没有任何的副作用;完全受控于父组件,后期如果业务调整,那函数式组件需要改成class组件,非常麻烦并且具有破坏性。本身是有状态的,所以后期业务调整,也是可以在此基础上去修改。React16.8之前, 是有函数式组件(没有hooks)

2022-11-14 11:42:31 881

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

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