LeeTikPaak19-优快云博客

原创 2分钟知晓Vscode 插件发布流程

点击 New Extension -> Visual Studio Code，进行插件的上传，等待一段时间就可以在插件时长看见插件了。修改发布者为刚刚创建的发布者用户名，并且修改对应的插件名称和插件在应用市场展示的名称和版本信息等。此时，在vscode插件中搜索我们发布的插件就可以进行使用了。进入终端安装使用命令行安装 vsce。进入插件的根目录下，执行打包命令。

2024-12-31 13:41:11 663

用户点击文档，客户端会对打开 url 这一行为进行监听，同时解析 url，取出唯一标识符，判断本地是否已经存在并且符合要求的数据，如果条件命中，直接使用已经打开的容器切出，通知到容器内的 web，web 收到通知，通过 url 取出标识符，从本地进行数据获取，然后对数据进行替换渲染，从而完成页面切换。下一次切换容器时，在取本地数据去解析的同时，会判断对应 id 在快照表是否存在缓存，如果有，直接取出来，覆盖在 html 上，用户可以提前看到上一次渲染的数据，等本地数据真正解析完，再展示可交互界面。

2024-12-31 13:37:02 834

原创【React hooks】useDebounce的封装

返回一个debounceValue，这个值会在delay后改变，这样用到它的地方的依赖，也会有这样的效果param变了，debouncedParam 不会立即改变，这样就达到了防抖的效果useEffect里的函数每次执行之前，都会清除掉上一次的effect，即执行上一次effect里return的函数。

2023-07-21 10:31:09 800

原创移动端300ms延迟以及fastClick原理剖析

假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。

2023-07-21 10:25:13 432

原创【React】在不定高的情况下，实现锚点的跳转

注：Anchor.Link设置的href和在页面对应DOM元素设置对应的id，是一一对应的。（这里省略了DOM元素对应的id的HTML代码，只要是在.layout-box内的DOM元素即可）

2023-07-21 10:24:02 447

原创手写常见的typescript类型

【代码】手写常见的typescript类型。

2023-06-06 17:16:23 153

原创复制粘贴即可使用! react封装echart图表基础组件

getOption(chart1)对应的option只要复制echart你需要的示例option即可。

2023-03-13 15:17:18 463

原创【nestjs+mongodb】- 全栈- passport策略的用户登录

有上面的代码可知，我们需要取到jwt token校验后的user属性，因此我们需要封装对应装饰器去取到，由于该currentUser装饰器的逻辑简单，只需要取对应req的user即可import {import {

2023-03-10 19:12:32 996

原创【web日程表fullcalendar】源代码贴上，教你开发日程表

如果使用vue实现则把useLayoutEffect里面的逻辑放mounted钩子里面。

2023-02-01 11:03:11 793

原创【nestjs+mongodb】- 后端搭建和数据库抽离

## 控制器控制器负责处理传入的请求和向客户端返回响应。控制器的目的是接收应用的特定请求。路由机制控制哪个控制器接收哪些请求。通常，每个控制器有多个路由，不同的路由可以执行不同的操作。为了创建一个基本的控制器，我们使用类和装饰器。装饰器将类与所需的元数据相关联，并使 Nest 能够创建路由映射（将请求绑定到相应的控制器）。

2023-01-31 15:06:01 776

原创【Typrscript】我将内置工具类型进行了分类！

● 差集，对于 A、B 两个集合来说，A 相对于 B 的差集即为 A 中独有而 B 中不存在的元素的组成的集合，或者说 A 中剔除了 B 中也存在的元素以后剩下的部分。● 对既有类型的裁剪、拼接、转换等，比如使用对一个对象类型裁剪得到一个新的对象类型，将联合类型结构转换到交叉类型结构。● 基于 infer 的模式匹配，即对一个既有类型特定位置类型的提取，比如提取函数类型签名中的返回值类型。● 模板字符串专属的工具类型，比如神奇地将一个对象类型中的所有属性名转换为大驼峰的形式。

2023-01-05 16:15:23 310

原创网页全体变灰【CSS3属性】filter(滤镜) gratscale(1)

CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。如何使网页变灰，css3提供了一个滤镜特效，通过filter:gratscale(1)

2022-12-01 14:52:19 253

原创【手写webpack loaders】检测失效资源或者报错资源，并且删除或者替换

1.对于不稳定的图片资源，使用一张图片加以替换2.解决安全问题，对于“Web 应用程序包含了不存在的域的链接”的安全错误，在appscan扫描时往往会遇到。

2022-10-25 18:31:03 909

原创【mask-image】为什么 B 站的弹幕可以不挡人物

此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。为什么 B 站的弹幕可以不挡人物，以chrome浏览器为例子，-webkit-mask-image可以做到.mask-image CSS属性用于设置元素上遮罩层的图像。-webkit-mask-image是一个实验中的功能。

2022-10-25 17:30:40 200

原创【vue】解决favicon 401报错问题

在webpack.config.js里配置。在vue.config.js里配置。

2022-10-17 19:03:30 762

原创【手把手教学webpack5】构建现代JS工程环境

在Webpack 场景下，构建现代JS工程环境所需要的三种常用工具：Babel、TypeScript、ESLint。

2022-09-28 19:43:18 425

原创 vuex-along - 页面刷新后vuex数据如何恢复

1.前端渲染优化：一些大数据的接口，刷新页面后需要重新获取接口，可以使用该插件。以上都是官方GitHub的用法，网上很多都没讲好，所以po在这里供大家参考。

2022-09-23 09:40:21 719

原创【jq】如何优雅在shell脚本处理json？

jq 是一款命令行的 json 处理工具。类似于 lodash 一样，它可以对 json 做各种各样的处理: pick，get，filter，sort，map…如果需要更多的细节，可以参考jq 主要可以分作两部分，options 即选项，filter 即各种转换操作，类似于 lodash 的各种函数常用以下几个选项filter 拥有 JSON 处理的各种操作，如 get，map，filter，map，pick，uniq，group 等操作。

2022-08-23 00:54:49 2325

原创【手把手教学webpack5】webpack配置底层逻辑

2.模块递归处理：调用 Loader 转译 Module 内容，并将结果转换为 AST，从中分析出模块依赖关系，进一步递归调用模块处理过程，直到所有依赖文件都处理完毕；3.后处理：所有模块递归处理完毕后开始执行后处理，包括模块合并、注入运行时、产物优化等，最终输出 Chunk 集合；流程类：作用于打包流程某个或若干个环节，直接影响编译打包效果的配置项。工具类：打包主流程之外，提供更多工程化工具的配置项。4.输出：将 Chunk 写出到外部文件系统；1.输入：从文件系统读入代码文件；...

2022-08-05 17:35:40 617

原创【手把手教学webpack5】前端为什么需要webpack

Webpack 之前社区虽然已经实现了许多模块打包器，例如 Gulp、Grunt、RequireJS 等，但它们或简单合并执行多种构建任务；或聚焦于模块化方案的兼容处理；或仅仅实现 JavaScript 层面的工程化（合并、压缩、混淆）能力，都缺乏一个能够兼容处理所有资源、普适的抽象思维框架。Webpack 则忽略具体资源类型之间的差异，将所有代码/非代码文件都统一看作Module —— 模块对象。...

2022-08-04 14:46:52 203

原创【兼容Chrome和Firefox】浏览器滚动条美化

Css里面，-webkit开头的伪元素::实现了Chrome浏览器滚动条的样式，Firefox scrollbar-width: thin实现了FireFox浏览器滚动条的样式。首先，我们需要创建一个类名autoList的div元素（一般来说这个类应该挂载到顶层的bodyDom，也可以对一些聊天框进行美化），给类autoList的dom元素添加滚动条。对于项目系统的美化处理，除了UI设计稿与组件自定义设计，对于浏览器滚动条的美化也是必要的，谁也不想自己的界面和布局都设计得很完美，结果出现了下图的滚动条吧。

2022-07-05 10:55:08 1176

原创【多应用方案】由前端控制的单点登录

可以选择将 Session ID （或 Token ）保存到浏览器的 LocalStorage 中，让前端在每次向后端发送请求时，主动将LocalStorage的数据传递给服务端这些都是由前端来控制的，后端需要做的仅仅是在用户登录成功后，将 Session ID（或 Token）放在响应体中传递给前端单点登录完全可以在前端实现。前端拿到 Session ID（或 Token ）后，除了将它写入自己的 LocalStorage 中之外，还可以通过特殊手段将它写入多个其他域下的 LocalStorage 中

2022-05-25 16:56:16 243

原创【Intersection Observer 介绍】React 中使用 Intersection Observer 和 LazyLoad来实现无限滚动，分页和懒加载

实现前需要了解这些Intersection Observer API根据MDN的文档，“Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档viewport的交集中的变化的方法。”。通俗讲，就是一个能够监听元素是否到了当前视口的事件，一步到位使用例子对于实现一张图片的懒加载，我们可以采用ntersection Observer + dataSet。假如我们的电脑是1920*1080的话，现在有个图片，他距离顶部有1500px，我们希望在它在滚动到可视区

2022-05-25 10:49:56 2663

原创 vite在linux环境打包时，找不到esbuild-linux-64 0.12.29导致报错

问题：在内网的linux环境打包构建时，npm install出现找不到esbuild-linux包Trying to install “esbuild-linux-64” using npmFailed to install “esbuild-linux-64” using npm: EACCES: permission denied, mkdir ‘/opt/devops/node-v14.17.0-linux-x64/lib/node_modules/esbuild/esbuild-pb51v5

2022-05-06 14:26:49 4350 5

原创 Go入门之调试工具和热加载

讲起go的调试工具，通过 go get github.com/go-delve/delve/cmd/dlv ，Golang的Debug工具delve介绍，具体操作可以看大愚老师的这篇文章 https://blog.youkuaiyun.com/hel12he/article/details/106435952一般来说，我们希望go的文件能热加载，可以使用gowatch去启动go文件，这样可以做到热加载更新文件...

2022-04-21 14:15:20 771

原创【让你的md的代码块高亮】 react-showdown codeBlock高亮

import React from 'react'import ReactDom from 'react-dom'import ReactMarkdown from 'react-markdown'import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'import {atomDark} from 'react-syntax-highlighter/dist/esm/styles/prism'// Did you kn

2022-02-11 15:19:42 1792

原创解决Echarts+antV组件Tabs的警告：Can‘t get DOM width or height.

问题描述不同标签页下进行切换时，会导致echart图的切换，当切换时标签页中的echart图会缩在一起,如下图所示：原因antV中该组件不能刷新视图重新执行render，也即不会触发echarts图的初始化销毁等阶段，这几个tab中的echarts是同时加载的。解决useState声明一个变量a并把它绑定antv的组件Tabs属性activeKey，并且添加onchange方法，方法里setState改变该变量a，触发render触发echarts图的初始化销毁等阶段...

2022-01-19 10:58:51 740

原创基于deno和react实现同构SSR应用程序

SSR-Deno 是基于deno和react实现同构应用程序，在不需要webpack和node完成一个SSR应用程序Gitee ssr-deno地址觉得不错的可以star

2021-12-07 11:08:53 687

原创使用包管理器Chocolatey(choco)安装deno遇到的问题

包管理器Chocolatey官网地址以管理员权限打开cmd.exe命令行提示，执行如下内容：@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System

2021-11-08 18:50:13 1095

数据挖掘之关联分析-数据集

动物识别系统-专家系统.rar

空空如也