- 博客(65)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 【React hooks】useDebounce的封装
返回一个debounceValue，这个值会在delay后改变，这样用到它的地方的依赖，也会有这样的效果param变了，debouncedParam 不会立即改变，这样就达到了防抖的效果useEffect里的函数每次执行之前，都会清除掉上一次的effect，即执行上一次effect里return的函数。
2023-07-21 10:31:09
572
原创 移动端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
193
原创 【React】在不定高的情况下，实现锚点的跳转
注：Anchor.Link设置的href和在页面对应DOM元素设置对应的id，是一一对应的。（这里省略了DOM元素对应的id的HTML代码，只要是在.layout-box内的DOM元素即可）
2023-07-21 10:24:02
347
原创 复制粘贴即可使用! react封装echart图表基础组件
getOption(chart1)对应的option只要复制echart你需要的示例option即可。
2023-03-13 15:17:18
272
原创 【nestjs+mongodb】- 全栈- passport策略的用户登录
有上面的代码可知，我们需要取到jwt token校验后的user属性，因此我们需要封装对应装饰器去取到，由于该currentUser装饰器的逻辑简单，只需要取对应req的user即可import {import {
2023-03-10 19:12:32
869
原创 【web日程表fullcalendar】源代码贴上，教你开发日程表
如果使用vue实现则把useLayoutEffect里面的逻辑放mounted钩子里面。
2023-02-01 11:03:11
572
原创 【nestjs+mongodb】- 后端搭建和数据库抽离
## 控制器控制器负责处理传入的请求和向客户端返回响应。控制器的目的是接收应用的特定请求。路由机制控制哪个控制器接收哪些请求。通常，每个控制器有多个路由，不同的路由可以执行不同的操作。为了创建一个基本的控制器，我们使用类和装饰器。装饰器将类与所需的元数据相关联，并使 Nest 能够创建路由映射（将请求绑定到相应的控制器）。
2023-01-31 15:06:01
673
原创 【Typrscript】我将内置工具类型进行了分类！
● 差集，对于 A、B 两个集合来说，A 相对于 B 的差集即为 A 中独有而 B 中不存在的元素 的组成的集合，或者说 A 中剔除了 B 中也存在的元素以后剩下的部分。● 对既有类型的裁剪、拼接、转换等，比如使用对一个对象类型裁剪得到一个新的对象类型，将联合类型结构转换到交叉类型结构。● 基于 infer 的模式匹配，即对一个既有类型特定位置类型的提取，比如提取函数类型签名中的返回值类型。● 模板字符串专属的工具类型，比如神奇地将一个对象类型中的所有属性名转换为大驼峰的形式。
2023-01-05 16:15:23
271
原创 网页全体变灰【CSS3属性】filter(滤镜) gratscale(1)
CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。如何使网页变灰，css3提供了一个滤镜特效，通过filter:gratscale(1)
2022-12-01 14:52:19
197
原创 【手写webpack loaders】检测失效资源或者报错资源，并且删除或者替换
1.对于不稳定的图片资源，使用一张图片加以替换2.解决安全问题，对于“Web 应用程序包含了不存在的域的链接”的安全错误，在appscan扫描时往往会遇到。
2022-10-25 18:31:03
790
原创 【mask-image】为什么 B 站的弹幕可以不挡人物
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。为什么 B 站的弹幕可以不挡人物，以chrome浏览器为例子，-webkit-mask-image可以做到.mask-image CSS属性用于设置元素上遮罩层的图像。-webkit-mask-image是一个实验中的功能。
2022-10-25 17:30:40
139
原创 【手把手教学webpack5】构建现代JS工程环境
在Webpack 场景下，构建现代JS工程环境所需要 的三种常用工具：Babel、TypeScript、ESLint。
2022-09-28 19:43:18
386
原创 vuex-along - 页面刷新后vuex数据如何恢复
1.前端渲染优化：一些大数据的接口，刷新页面后需要重新获取接口，可以使用该插件。以上都是官方GitHub的用法，网上很多都没讲好，所以po在这里供大家参考。
2022-09-23 09:40:21
672
原创 【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
1837
原创 【手把手教学webpack5】webpack配置底层逻辑
2.模块递归处理：调用 Loader 转译 Module 内容，并将结果转换为 AST，从中分析出模块依赖关系，进一步递归调用模块处理过程，直到所有依赖文件都处理完毕；3.后处理：所有模块递归处理完毕后开始执行后处理，包括模块合并、注入运行时、产物优化等，最终输出 Chunk 集合；流程类：作用于打包流程某个或若干个环节，直接影响编译打包效果的配置项。工具类：打包主流程之外，提供更多工程化工具的配置项。4.输出：将 Chunk 写出到外部文件系统；1.输入：从文件系统读入代码文件；...
2022-08-05 17:35:40
546
原创 【手把手教学webpack5】前端为什么需要webpack
Webpack 之前社区虽然已经实现了许多模块打包器，例如 Gulp、Grunt、RequireJS 等，但它们或简单合并执行多种构建任务；或聚焦于模块化方案的兼容处理；或仅仅实现 JavaScript 层面的工程化（合并、压缩、混淆）能力，都缺乏一个能够兼容处理所有资源、普适的抽象思维框架。Webpack 则忽略具体资源类型之间的差异，将所有代码/非代码文件都统一看作Module —— 模块对象。...
2022-08-04 14:46:52
154
原创 【兼容Chrome和Firefox】浏览器滚动条美化
Css里面，-webkit开头的伪元素::实现了Chrome浏览器滚动条的样式，Firefox scrollbar-width: thin实现了FireFox浏览器滚动条的样式。首先，我们需要创建一个类名autoList的div元素（一般来说这个类应该挂载到顶层的bodyDom，也可以对一些聊天框进行美化），给类autoList的dom元素添加滚动条。对于项目系统的美化处理，除了UI设计稿与组件自定义设计，对于浏览器滚动条的美化也是必要的，谁也不想自己的界面和布局都设计得很完美，结果出现了下图的滚动条吧。
2022-07-05 10:55:08
982
原创 【多应用方案】由前端控制的单点登录
可以选择将 Session ID （或 Token ）保存到浏览器的 LocalStorage 中，让前端在每次向后端发送请求时，主动将LocalStorage的数据传递给服务端这些都是由前端来控制的，后端需要做的仅仅是在用户登录成功后，将 Session ID（或 Token）放在响应体中传递给前端单点登录完全可以在前端实现。前端拿到 Session ID（或 Token ）后，除了将它写入自己的 LocalStorage 中之外，还可以通过特殊手段将它写入多个其他域下的 LocalStorage 中
2022-05-25 16:56:16
169
原创 【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
2335
原创 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
3581
5
原创 Go入门之调试工具和热加载
讲起go的调试工具，通过 go get github.com/go-delve/delve/cmd/dlv ，Golang的Debug工具delve介绍，具体操作可以看大愚老师的这篇文章 https://blog.csdn.net/hel12he/article/details/106435952一般来说，我们希望go的文件能热加载，可以使用gowatch去启动go文件，这样可以做到热加载更新文件...
2022-04-21 14:15:20
654
原创 【让你的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
1496
原创 解决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
685
原创 基于deno和react实现同构SSR应用程序
SSR-Deno 是基于deno和react实现同构应用程序，在不需要webpack和node完成一个SSR应用程序Gitee ssr-deno地址 觉得不错的可以star
2021-12-07 11:08:53
602
原创 使用包管理器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
923
原创 面试题：MVC 阶段和MVVM阶段的对比
前端 MVC 阶段在对比之前，我们需要知道促使前端 MVC 阶段的背景，是因为前端脚本具备读写数据、处理数据、生成视图等功能，页面需求开始变得复杂起来。此时，前端生态迫切需要开发出轮子工具，目的是便利开发者来管理他们的代码，“时势造英雄”，属于前端的 MVC 框架诞生了。前端MVC模式主要分为三部分：视图（View）：用户界面控制器（Controller）：业务逻辑模型（Model）：数据模型View 作为用户界面，发送指令给 Controller，Controller 要求 Model 改变状
2021-10-11 18:26:52
703
原创 【手把手系列】用HTML5新增属性AudioContext实现一个动态的音乐播放界面
效果展示HTML代码如下<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="./css/music.css" /></head><body> &
2021-07-13 17:17:58
941
原创 node 支持es6的import和export（To load an ES module, set “type”: “module” in the package.json ）
问题：Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extensionnode 支持es6的import和export语法，其实问题已经描述得十分清楚，即需要在package.json里设置type为module。注意，当node得版本号为13.2以下时，需要额外在scripts脚本命令中添加，–experimental-modules代码如下： "scripts":
2021-05-06 14:02:07
1511
原创 ElementUI el-tree 树形控件自定义给节点添加图标
<el-tree :data="data" node-key="id" :props="defaultProps"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span> <!-- data.icon为data里的icon属性，用于识别icon图片 --> <i
2021-02-03 14:33:45
7085
原创 npm 封装并发布一个库
1.开始TypeScript实战01–封装并发布一个库2.踩到的坑（1）npm 发布包报错：have permission to publish “XXX”. Are you logged in…（2）注册的npm官网账号没有进行邮箱验证，没有发布的权限。In most cases, you or one of your dependencies are requesting...
2020-12-10 17:35:44
532
原创 DataV - 构建大屏数据可视化
DataV,主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用组件风格边框：带有不同边框的容器装饰：用来点缀页面效果，增加视觉效果图表：图表组件基于Charts封装，轻量易用其他：飞线图/水位图/轮播表/…可视化库特点开源免费：长期维护，不断添加新组件以丰富组件库开箱即用：大部分组件设置宽高或配置简单的数据即可使用视觉绚丽：通过组合不同的配置项可以达到多变的视觉效果优点：相比于产品使用的大屏，其布局以及样式可变性强抽象层次太高，入门简单组件样式炫酷痛点..
2020-11-13 18:25:13
1118
原创 解决display:flex在低版本chrome浏览器默认脱离文档流的bug
1，使用display:-webkit-box解决把display:flex改成display:-webkit-box解决问题
2020-09-02 09:46:00
1887
原创 使用display:table和table-cell进行div里面的文字居中，对上对齐，对下对齐
可以用于对div里面的文字进行居中，对上对齐，对下对齐。集体实现是：对上对齐<div style="display:table;width:100px"><div style="display:table-cell;width:100%">123123</div></div>对下对齐<div style="display:table;width:100px"><div style="display:table-cell;width
2020-08-26 10:42:33
601
原创 你所不知道的JavaScript开发技巧
1.延迟函数const delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms)) const getData = status => new Promise((resolve, reject) => { status ? resolve('done') : reject('fail') }) const getRes = async (data) => { t
2020-08-13 16:40:42
132
转载 Echarts-几个常见的 series.encode 设置方式举例
本文来源于Echarts中文文档 Echarts中文文档（1）如何把第四列设为X轴，第二列设为Y轴series:{ encode:{x:3，y:1}, ...}（2）如何把第四行设为X轴，第二行设为Y轴series:{ encode:{x:3，y:1}, seriesLayoutBy:'row', ...}``(3)如何让第一列和第二列出现在提示框中？series:{ tooltip:[1,2] ...}（4）数据没有维度名，如何定义维度名？dataset:{ d
2020-07-29 09:32:37
8045
原创 node-sass 安装失败 win32-x64-72_binding.node
解决方法：node-sass安装链接releases可以在该博客参考链接注意下载的链接路径必须准确
2020-07-21 10:28:32
1778
原创 前端架构，你需要知道的东西（1）
本文章主要思想由ThoughtWorks@李光毅授权分享@李光毅，知乎专栏「前端技术漫游指南」以及图书《高性能响应式Web开发实战》作者。曾就职于爱奇艺、百度、知乎等互联网公司，目前就职于 ThoughtWorks，从事全栈开发相关工作。1，理论性的讨论前端架构前端架构满足的是非功能需求，什么是非功能性需求？就是可拓展性，可用性，可靠性，可维护性，可测试性。一个业务功能需求，可以有多种多样的方法去实现，之所以称满足的是非功能性的是因为它们和我们的业务需求没有任何关系。可是，运用框架和模式，是能
2020-07-06 23:54:57
1067
原创 复习Vue2.0（1）之插值操作
Vue3.0已经推出，但是2.0依旧是稳定强大的生态系统。v-once当我们只是调用一次data里的值时，我们不希望它随着值的改变而改变，因此，可以使用v-once，例如，<div id="app"><h2>{{mess}}</h2><h2 v-once>{{mess}}</h2></div><script>const app=new Vue({el:"#app",data:{ mess:"你好"}
2020-06-20 17:58:48
118
数据挖掘之关联分析-数据集
2020-10-14
动物识别系统-专家系统.rar
2020-06-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人