- 博客(135)
- 收藏
- 关注
RSS订阅原创 input , change ,blur 事件的区别，以及在vue和react中的表现
当一个 , , 或 元素的 value 被修改时，会触发 input 事件。
2023-12-13 14:52:15
500
原创 正确使用React组件缓存
正常来讲的话当我们点击组件的时候，该组件以及该组件的子组件都会重新渲染，但是如何避免子组件重新渲染呢，我们经常用memo来解决。
2023-12-10 23:21:50
772
原创 前端 Web Workers 简介
以前我们总说，JS 是单线程没有多线程，当 JS 在页面中运行长耗时同步任务的时候就会导致页面假死影响用户体验，从而需要设置把任务放在任务队列中；执行任务队列中的任务也并非多线程进行的，然而现在 HTML5 提供了我们前端开发这样的能力 - Web Workers API，我们一起来看一看 Web Worker 是什么，怎么去使用它，在实际生产中如何去用它来进行产出。Web Workers 使得一个 Web 应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。
2023-12-10 17:03:32
372
原创 JS 模块 CJS AMD UMD ESM 的区别
define(id?, factory) 函数的第一个参数是模块名，第二个是依赖模块的数组，被异步加载。AMD 是为浏览器端设计的。在运行时，AMD 加载器知道整个应用的依赖树，所以可以同时加载不互相依赖的模块/库，这样首次加载的速度会更快，用户体验也就更好。上面的几中都不是原生 JS 支持的，但是 ESM 是 ES6 开始提供的导入和导出模式，同时支持同步和异步操作。但是如果在浏览器端，等待模块导入的时间由网络速度决定，慢的话会阻塞浏览器加载，所以采用异步的导入会更好。
2023-12-10 16:25:14
170
原创 vue3解构赋值失去响应式的原因解析
我们知道他是基于proxy 实现响应式的能力， 解决了vue2所遗留下来的一些问题，同时也正由于proxy的特性，也提高了运行时的性能凡事有利有弊， proxy虽然无敌，但是他也有本身的局限，从而产生一些我认为的弊端（其实就是不符合js语言的自然书写方式，有的人觉得就是个特殊写法，他不属于弊端）原始值的响应式系统的实现 导致必须将他包装为一个对象， 通过 .value 的方式访问ES6 解构，不能随意使用。会破坏他的响应式特性。
2023-12-10 15:39:48
923
原创 react re-render的解决方案
这样在Father组件re-render的时候，由于App（父组件）中的组件没有变化，所以拿到的children依然是上一次的（没有发生变化的）所以children部分不会re-render。当我们在点击n+1时，会导致App组件重新渲染，然后Child组件虽然不依赖n，但是由于父组件re-render,他自己也会进行无效的re-render。将state下沉到与之相关的组件中去，也就是将与该状态相关的组件抽离成一个单独的组件。但是如果我们假设是App中的div依赖n呢。这样就避免了无效的刷新。
2023-12-10 15:16:16
260
原创 ElasticSearch在安装了IK分词器无法启动的原因
将ik分词器插件放在plugins上时elasticsearch启动失败。之所以没有下载相同版本的插件是因为插件没有。两个版本不一致导致的问题。1.使用相同版本的包。
2023-05-19 10:42:48
962
原创 Live2D使用分享
3.如果你想使用自己的服务器，可以讲模型上传到自己的服务器然后用nginx代理。创建l2d.js(由于这个库是js写的所以ts不友好直接用js来写了)1.配置中的model为模型配置有现成的。2.如果还不够用可以看看这个仓库。
2023-04-06 02:24:32
985
2
原创 CentOS7清理yum缓存和释放内存方法
清理yum缓存使用yum clean 命令，yum clean 的参数有headers, packages, metadata, dbcache, plugins, expire-cache, rpmdb, all。
2023-03-16 19:01:59
1322
原创 brew 的安装与使用 （Apple Silicon CPU的Mac机型完成适配）
意思是如果你只是使用一个版本Homebrew，直接执行命令即可，如果你想多个版本共存或者使用了别名，就把brew关键字替换为别名名称，如前面的abrew、ibrew。ARM版Homebrew需要安装在/opt/homebrew路径下，早期的时候需要手动创建目录执行命令，目前使用最新脚本不需要手动操作。注意：本文中的安装脚本会设置中科大源镜像，如果你也想设置cask和bottles的镜像，请按下面注释部分选择执行代码。因为目前很多软件包没有支持ARM架构，我们也可以考虑使用x86版的Homebrew。
2023-03-09 18:36:40
963
原创 Mac 添加 PATH
在 ~/.bashrc 里面添加一句 export PATH=“新的路径:$PATH”，你需要把新的路径写进去，其他任何一个符号都不能改。摸一下 ~/.bashrc，用命令 touch ~/.bashrc 可以做到。在终端执行 source ~/.bashrc 即可。
2023-03-03 15:00:00
716
原创 包管理器源切换
提供商 搜索地址 registry地址淘宝 https://npmmirror.com/ https://registry.npmmirror.com腾讯云 http://mirrors.cloud.tencent.com/npm/华为云 https://mirrors.huaweicloud.com/repository/npm浙江大学 http://mirrors.zju.edu.cn/npm/
2023-01-18 10:34:52
503
原创 rollup打包vue组件
然后npm发布做完这些你就可以使用pnpm add 你的包名import {xxx } from '你的包名'！！！！！！！！！！！//注意npm发布的时候一定要注意main和module字段的指定路径是否正确，不然这么引入将报错。
2022-12-13 09:55:17
1430
转载 vite 插件制作
通过本文你可以学到如何创建一个 vite 插件模板vite 插件的 各个钩子作用vite 插件的 钩子执行顺序如何写一个自己的 vite 插件了解 vite 插件建议包管理器使用优先级：pnpm > yarn > npm > cnpm长话短说，直接开干 ~创建 vite 插件通用模板复制代码1.4 安装 vite// 进入 package.json{…}…}复制代码2. 配置 eslint 和 prettier（可选）安装 eslint。
2022-11-27 12:21:19
1279
原创 vue 修改v-for 循环内的item数据视图不刷新
1.子组件不应该修改外部数据，应该通知父组件修改数据2.在不方便通知父组件修改数据时，父组件应该传ref给子组件不然子组件修改的数据永远数复制品，没有效果。
2022-11-15 17:30:24
1953
原创 在input元素下面做一个弹出框，点击弹出框弹出框不消失，点击其他地方弹出框消失
/这里是关键，关闭弹窗应当是有条件的关闭，只有条件为false是才关闭。//弹窗在onblur后将条件变成false,并手动关闭弹窗。2.监听input元素的focus事件。//弹窗被点击时要把条件改成true。1.将弹出框定位到input元素下面。3.点击弹出框以外的地方弹出框消失。2.点击弹出框的文字弹出框不消失。1.点击input弹出弹出框。
2022-11-11 14:44:40
1518
原创 input type=‘radio‘ 默认样式的去除以及样式修改
元素的样式除了可以更改宽高外其他样式都修改不了。在css上加上下面代码就可以对。默认情况下用css修改。元素的样式随意修改了。
2022-11-09 18:55:59
669
原创 用opcity做动画，值为0时仍然可以点击元素，解决方法
为了动画性能，用opcity做动画时，当他的值为0的时候这些元素虽然看不见但是仍然可以点击，如果这些元素上添加事件监听那么可能会产生bug。
2022-11-03 17:28:24
512
原创 div失去焦点事件onblur()不触发解决方法
做一个弹出框组件，文字点击时会在文字下方弹出一个框，在vue3中监听div元素的blur事件发现事件并不会在div失去焦点时触发。bug原因：在vue中div默认不触发事件,除非将元素添加。在react中div元素是能触发onblur事件的。属性才会触发blur事件。
2022-11-02 02:52:51
3262
原创 踩坑react虚拟dom的type属性里面的name属性打包后发生变化，react获取之组件的标签名
上图是组件打包后的效果，组件的名字发生了变化，这也是我遇到的bug的原因。但是在打包以后name属性的值却发生了变化，这几导致了一系列的bug。可以看到虚拟dom上的type属性上可以看到标签的名字。............
2022-08-10 18:29:11
463
1
原创 react-transition-group使用总结
1)in传入boolean值，传入的是true代表开启enterenter-active和enter-done的这一变化过程，传入false代码开启exitexit-activeexit-done这一过程(必传)(2)timeout表示执行时间，enter-active到enter-done或者exit-active到exit-done的执行时间(必传)(3)classNames定义添加的类名，这里定义的类名会被添加到enter-xxx及exit-xxx的之前。.........
2022-07-22 07:45:24
670
原创 onBlur和onChange冲突解决方法
如上图，我想当点击xxx或yyy时将弹出层关闭，点击dom上的其他元素弹出层也关闭于是我监听了xxx和yyy元素的onClick事件和input元素的onBlur事件但是当我点击xxx或yyy时onBlur事件会先执行，导致xxx或yyy的onClick事件直接不执行。...
2022-07-20 23:38:45
686
原创 监听拖拽事件，第一次拖拽得不到上传的文件内容，第二次以后就能正常得到上传的文件内容
监听拖拽事件，第一次拖拽得不到上传的文件内容，第二次以后就能正常得到上传的文件内容。错误原因，api调用错误。
2022-07-16 00:16:54
366
原创 canvas绘制的线条位置错乱
canvas标签的宽高可以通过js的方式设置,也可以在style样式中直接设置,但是这两种设置的方式显示的效果天差地别，Canvas的默认宽高是width150使用canvas标签一定要用js指定元素的宽高，不然就是bughttpshttps。...
2022-07-15 21:36:10
927
原创 引入@import-normalize；在webstorm中报错，不认识的样式规则
鼠标悬浮在上面，然后按ctr会出现一个小灯泡，根据提示禁用他的提示就行
2022-07-13 11:09:10
254
原创 webpack支持scss文件，webpack sass配置
注意：这里是个坑，如果你在前端项目上配置webpack一定要安装的是而不是,这两个依赖不要同时装，同时装的话webpack优先使用那么就会报错
2022-07-12 21:18:12
1150
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人