- 博客(172)
- 资源 (10)
- 收藏
- 关注
RSS订阅
原创 React 封装全局事件监听 GlobalEvent(发布订阅者)
类似于vue的$root和$on，可以全局触发和监听事件，采用发布订阅者模式实现，支持单事件多响应，简单易懂。
2023-05-31 19:15:37
2323
原创 Node ZooKeeper 服务发现获取服务节点信息并发送请求
公司服务治理需通过 ZK 来做服务发现，Java都被集成，有封装好的包，直接注释器调用即可。Node还需自己手搓。
2022-11-11 12:01:05
872
原创 源码探秘之 vue-property-decorator
本文只浅析@Prop属性装饰器和@Watch方法装饰器的核心源码，其他原理相似，暂不赘述。关于JS装饰器可查看本人另一篇：JS Decorator —— 装饰器(装饰模式)关于@Component类装饰器及vue-class-component源码可查看本人另一篇：源码探秘之 vue-class-component先回顾一下使用 vue+ts 开发的一个组件例子：<template></template><script lang="ts">// 此处是.
2022-03-07 12:12:34
925
原创 JS Decorator —— 装饰器(装饰模式)
一、简介官方定义随着TypeScript和ES6里引入了类，在一些场景下我们需要额外的特性来支持标注或修改类及其成员。 装饰器（Decorators）为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上。注意 Javascript里的装饰器目前处在 提案阶段，在未来的版本中可能会发生改变。属于一种设计模式，许多面向对象的语言都有这项功能。特点解耦可以在不侵入到原有代码内部的情况下而通过标注的方式
2022-03-06 00:30:50
1237
原创 解决因Docker网桥网段冲突导致访问不到容器问题
背景刚薅了阿里云服务器羊毛(新用户300块4年，点击购买)，在公司ssh远程登陆服务器后，将之前的Docker镜像拿来run，防火墙什么都配好后发现：容器内部可以访问，容器外(宿主机) curl localhost:8080 访问不到，后经排查是因为Docker0的网段和公司的网段冲突了，导致访问不到。Docker 服务启动后默认会创建一个 docker0 网桥（其上有一个 docker0 内部接口），它在内核层连通了其他的物理或虚拟网卡，这就将所有容器和本地主机都放到同一个物理网络。Docke
2021-11-02 11:47:06
1653
原创 Nuxt源码 — plugin (middleware) 参数之谜
在我们使用 Nuxt 框架的时候，往往在 Plugins or Middleware 中用到一些参数（$axios、app、store、redirect...）。很多喜爱研究的小伙伴不知道他们到底如何来的。如中间件中：// 中间件export default async function ({ app, $axios, store, error, redirect, req }) { if (req && req.url === '/__webpack_hmr') return
2020-12-11 16:19:04
2028
原创 JS浮点数—是谁偷走了你的精度？！（代码之谜）
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2020-10-28 16:26:47
426
4
原创 Nuxt 报错 Document / Window not defined 亲测解决方案（vue2Editor富文本编辑器之类三方包）
本文主要介绍 vue2Editor 在 Nuxt 中的使用，以及报错解决方案(亲测有效)。1、问题背景项目中要使用富文本编辑器，看了下一些流行的编辑器（UEditor、wangEditor、vue2Editor、quill…），最后选择了 vue2Editor，虽然功能不多，star 也不多，但是我喜欢它的超轻量（只有200+K），反正我们的需求也不需要那么多功能。但上天往往爱考验我，...
2020-03-27 14:47:14
7045
8
原创 全栈运维之 Docker 部署前后端
前期提要：本文案例中使用到的设备Windows 8 笔电一台阿里云 ECS 服务器一台本文案例中使用到的工具VS CodeMongoDB Compass本文案例中项目技术栈FrontEnd： Vue + NuxtBackEnd： Node + ExpressDataBase： Mongo1. 项目配置首先要有一个项目，本例中项目技术栈见 “前情提...
2020-03-25 15:31:44
807
原创 全栈之鉴权之旅 -- JWT + passport 实现 Token 验证（Node + Express）
登陆认证 (鉴权)，是每个应用都需要的基础功能。但很多的时候，却都被大家所忽略，不仅安全漏洞严重，而且代码紧耦合，混乱不堪。Passport & JWT，正是为了解决登陆认证的事情，让认证模块更透明，减少耦合！网上关于 JSONWebToken (以下简称 JWT ) && passport.js的中文学习资料较少，学习的时候还蛮吃力的。所以总结出此篇，文章若有错谬...
2020-01-09 16:55:40
2690
原创 从V8的内存管理算法出发-教你如何管理内存
文章目录导语一、V8引擎如何回收垃圾1、V8的内存分配（1）内存大小（2）新生代和老生代2、变量处理二、如何查看V8内存使用情况1、使用 node 来查看内存使用情况2、在 chorme 浏览器中查看内存使用情况三、内存优化实例1、优化内存技巧2、关于闭包和内存使用码字不易，觉得有帮助的小伙伴点个赞支持下~扫描上方二维码关注我的订阅号~导语什么是V8？V8 js运行的引擎（类似 ja...
2019-10-29 16:16:31
713
原创 前端面试题汇总大全（含答案）-- 持续更新
汇总了一些前端常见的面试题。一、HTML 篇1. 简述一下你对 HTML 语义化的理解？用正确的标签做正确的事情。html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;使阅读源代码的人对网站更容易将网站...
2019-08-07 14:10:29
167418
26
原创 git rebase 与 merge 的那些事儿~（详细图解，通俗易懂）
什么是 rebase?git rebase 你其实可以把它理解成是“重新设置基线”，将你的当前分支重新设置开始点。这个时候才能知道你当前分支于你需要比较的分支之间的差异。原理很简单：rebase 需要基于一个分支来设置你当前的分支的基线，这基线就是当前分支的开始时间轴向后移动到最新的跟踪分支的最后面，这样你的当前分支就是最新的跟踪分支。这里的操作是基于文件事务处理的，所以你不用怕中间失败会影...
2019-08-01 10:55:08
2402
原创 Formily原来是这样解决这些表单难题
古茗在中后台的场景中大量的使用 formily 来解决问题。在首次使用 formily 时第一感受，这玩意儿咋那么难用，能不用吗？在使用表单始终会存在几个问题（表单数据管理、表单字段依赖、表单精准更新等等）。formily 仅仅作为一个帮我们去处理这类问题，不使用 formily 也照样存在你反馈的难处（但上手成本会低点🐶）。那我们来看一下 formily 是如何解决中后台表单数据管理、字段依赖、精准更新问题吧～
2024-03-08 11:06:31
982
原创 React Umi 中实现缓存路由 KeepAlive
使用umi-plugin-keep-alive实现KeepAlive状态存储，并且实现进入下一个页面时缓存，后退页面时不缓存（卸载）类似微信小程序的页面缓存机制。
2023-05-31 19:18:13
5168
4
原创 AHooks无限滚动useInfiniteScroll使用
useInfiniteScroll 封装了常见的无限滚动逻辑。假如第一次请求返回数据为 { list: [1, 2, 3] }, 第二次返回的数据为 { list: [4, 5, 6] }, 则我们会自动合并 list，整合后的的 data 为 { list: [1, 2, 3, 4, 5, 6] }。注：这里官方说了对于返回的字段是list，才会帮你进行合并，所以可以跟后端的同学商量返回的数组数据用list做属性名，或者你也可以拿到后端的数据自己生成list属性名。
2023-05-31 19:10:59
3110
原创 文件上传校验文件是否更改（文件是否可读）
文件上传之后（文件信息暂存在前端，还未上传到后端），如修改原文件名，然后点击上传，会导致上传失败。所以在上传到后端之前需要校验文件。
2023-03-30 16:05:19
555
1
原创 Hiper：一款令人愉悦的性能分析工具
如上图，是hiper工具的测试结果，从中我们可以看到DNS查询耗时、TCP连接耗时、第一个Byte到达浏览器的用时、页面下载耗时、DOM Ready之后又继续下载资源的耗时、白屏时间、DOM Ready 耗时、页面加载总耗时。这段用法示例，我直接拷贝的文档说明，具体的可以看下文档，。当我们项目打开速度慢时，这个工具可以帮助我们快速定位出到底在哪一步影响的页面加载的速度。平时我们查看性能的方式，是在performance和network中看数据，记录下几个关键的性能指标，然后刷新几次再看这些性能指标。
2023-03-30 15:59:27
364
原创 vue获取数据的两种方式实践+简单骨架屏实现
从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。那么我们来实践一下这两种获取数据的方式，以及用户体验优化的一点思考。**一、首先是第一种：导航完成之后获取，**这种方式是我们大部分都在使用的，（因为可能一开始我们只知道这种方式使用这种方式时，我们会马上导航和渲染组件，然后在组件的created钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。
2023-03-30 15:55:49
2109
原创 webpack5升级踩坑（process、Buffer is not defined）
执行提示@types/node 版本和ts版本问题，https://www.npmjs.com/package/@types/node?activeTab=versions 可查看版本对应的ts版本。
2023-03-30 15:55:46
934
原创 Element el-table 等表格组件超出隐藏(show-overflow-tooltip)按需展示且可鼠标移入
表格文字超出列宽 … 隐藏，并显示 popover/tooltip 。虽然最新的 Element Table 提供了show-overflow-tooltip属性可以很容易实现。而且可以按实际是否超出展示/隐藏 提示窗。但却不可以将鼠标移入提示窗，导致一些关键信息不能选择复制等问题。特实现了一种即可按需展示提示框，又可移入鼠标的方案。...
2022-08-31 16:58:24
4762
1
原创 动态获取并设置 iframe 自适应高度
实际需求：页面中有一些固定元素 + 内嵌 iframe 页面，此时如果给 iframe 设置固定高度会导致 iframe 内部滚动，体验不佳。于是需要动态获取 iframe 实际高度并设置，但有些 iframe 页面会有占位 loading or 骨架屏等，导致一开始就获取高度会不准。所以给出解决方案如下：...
2022-08-31 16:19:55
2237
原创 一键复制文本实现（navigator.clipboard 和 execCommand(废弃)）
execCommand 已经被废弃了，所以不要再使用了！使用 navigator.clipboard.writeText(value); 相比以前更加简洁。//旧：let oInput = document.createElement('input');oInput.value = value;document.body.appendChild(oInput);oInput.select(); // 选择对象;document.execCommand("Copy"); // 执行浏览器复制命令
2022-05-29 07:13:26
4116
1
原创 Webpack 原理总结归纳面试
Webpack 是一个 模块打包器，可以分析各个模块的依赖关系，最终打包成静态文件（js、css、jpg）。三大阶段：初始化：启动构建，读取与合并配置参数，加载plugin,实例化Compiler编译：从Entry出发，针对每个Module串行调用对应的Loader去翻译文件中的内容，再找到该Module依赖的Module，递归的进行编译处理输出：将编译后的Module组合成Chunk,将Chunk转换成文件，输出到文件系统中细节：Webpack CLI 通过 yargs模块解析 CLI
2022-03-11 16:00:41
1659
原创 Vue 单/多图片（可全屏预览）翻页轮播组件
支持单/多张图翻页轮播可全屏预览自定义图片宽高自定义无图提示语自带图片加载loading可将源码根据实际需求改造。效果图全屏预览单图，多图翻页轮播使用<image-preview :imgList="['url1', 'url2']"></image-preview>源码<template> <div :class="['image-preview-wrapper', imgList.length ? 'has-border'.
2022-03-09 18:31:12
3056
2
原创 源码探秘之 vue-class-component
本文只浅析@Component类装饰器的核心源码，其他原理相似，暂不赘述。关于JS装饰器可查看本人另一篇：JS Decorator —— 装饰器(装饰模式)先看一个使用 vue+ts 开发的一个组件例子：<template></template><script lang="ts">// 此处是从vue-property-decorator 统一引入的，实际 Component 定义在 vue-class-component 包内import { Com.
2022-03-07 10:48:05
1274
原创 Jquery源码之--实现精简选择器 :contains 功能
特殊原因研究了下 Jquery 选择器中的 :contains 功能（例：$(‘p:contains(“测试”)’) ==> 找出所有内容文字包含“测试”的p标签节点）遂自己做了个简单实现：简单实现/** * Jquery 选择器 :contains 功能简单实现 * @param {string} selectorStr ID、Class、Tag等querySelectorAll支持的选择器语法 * @param {string} keyword 关键词 * @return {.
2022-01-25 20:29:40
904
原创 多个关键词高亮/标红-完美版（多种特殊情况均包含）
需求背景：将一段文本中的指定 多个关键词 标红。需求分析及特殊情况多关键词需要逐一匹配标红即：将 命中关键词 的套上 <span style="color: red"><span> 标签例1：['你好', '你好呀'] 为关键词，文本中有 ’你好呀‘ 时，’你好呀‘ 三个字都要标红例2：['真好', '好人'] 为关键词，文本中有 ’真好人‘ 时，’真好人‘ 三个字都要标红例3：['大大'] 为关键词，文本中有 ’大大大‘ 时，’大大大‘ 三个字都要标红解决代
2022-01-25 20:13:00
2255
原创 终极解决TS 或者 Vetur 报错，Cannot find module ‘@/xx/xxx‘，找不到*.vue 等编译问题
报错详情：类似于// 编译器报错：Cannot find module '@/xx/xxx' or its corresponding type declarations.Vetur(2307)// 编译器报错：找不到模块“XXX.vue”或其相应的类型声明。ts(2307)// 或者 控制台报错 this.$router 等解决方案配置：// tsconfig.json{ "compilerOptions": { "target": "esnext",
2021-12-13 10:23:46
32839
4
原创 Element 表格固定列横向滚动条无法拖动的问题解决
在Element-UI中，当对表格列进行固定后，底部的横向滚动条就无法拖动了，主要的问题就是固定区域盖住了横向滚动条，解决的办法就是将固定区域底部留出一个滚动条高度的距离。如下图所示为对固定列区域调整后的效果图：下面是解决问题所需的代码：.el-table .el-table__fixed { height:auto !important; bottom:16px; }需要注意的是，上面的代码需要放在全局的样式文件中才有效果。码字不易，觉得有帮助的小伙伴记得点个赞鼓励下~
2021-11-20 10:38:49
4223
3
原创 解决Chrome 无法保存密码问题
问题在80+版本的谷歌浏览器中，我的浏览器保存密码功能失效，输入账户，没有再弹出保存密码的弹窗，尽管我在设置中开启了保存密码的功能。解决Here’s a quick guide on how to do this:1. Navigate to the ~/<username>/Library folder.Note: <UserName> is just a placeholder for your own user name.2. Delete the main
2021-11-03 10:33:46
8948
原创 解决按钮点击后长按回车无限触发点击事件问题
思路：包一层 UI 库的 button，在里面监听 onkeydown 和 onkeyup，用 flag 阻止长按回车一直触发。然后在项目全局重新注册 el-button 覆盖掉UI内的按钮组件。优点即开即用，将组件添加到项目内，引入注册即可。也不会阻止第一次回车触发的点击事件，保留原有逻辑。不需要改项目中的原button代码。使用（Element-UI）// main.jsimport DDButton from '@/components/button.vue';// 覆盖
2021-11-03 10:28:00
1471
原创 Mac 禁止 Chrome 自动更新
最新的Mac上在“~/Library/Google”目录下执行操作同样可以禁用自动更新。请执行以下命令：cd ~/Library/Googlesudo chown root:wheel GoogleSoftwareUpdate 相当于修改了GoogleSoftwareUpdate这个文件夹的拥有者，而不仅仅是修改了权限，使Google对该文件夹没有写入权限重启Chrome完成以后通过“帮助->关于Google Chrome”可以查看信息。码字不易，觉得有帮助的小伙伴记得点个赞鼓励下~
2021-11-03 10:23:30
789
原创 Element DatePicker 日期最多选三十天
<el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>data() { return { pickerOptions: { onPick: fu
2021-11-03 10:21:38
506
原创 Element + Vue2.6.x 分页 Mixin 封装
<template> <el-table v-loading="tableLoading" :data="tableData" border :max-height="tableHeight - 100"> <!-- 分页参数 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page
2021-11-03 10:20:08
329
原创 Element 树表格自定义全选 Header
<el-table-column width="40" :render-header="headerRender"> <template slot-scope="scope"> <el-checkbox v-model="scope.row.isSelected" :disabled="scope.row.isDisabled" @change="val => selectRow(val, scope.row)" &
2021-11-03 10:17:56
453
原创 踩坑日记 - Sortable 拖动树表格排序
以 Element 树表格为例，实现了树表格的同级之间排序（跨级也有代码，但还有问题）踩坑点：onMove回调中 oldIndex 会随时变化，若想拿到最开始拖动的Row，需要使用onChoose 。在onChoose需将 oldIndex 或者 oldRow 存储一下，供后续onMove和onEnd使用。onMove 中可以使用return false 阻止拖动因为是树形结构，所以回调中返回的 Index 并不准确，所以要预先在onChoose 时将树数据扁平化，才能根据返回的Index获.
2021-09-15 10:59:40
2273
1
HAND技术顾问培训-SQL练习题_v1.0及答案
2018-01-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人