- 博客(210)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 MQTT协议使用总结
（QoS0）：消息发布完全依赖底层 TCP/IP 网络。这一级别可用于如下情况，环境传感器数据，丢失一次读记录无所谓，因为不久后还会有第二次发送。即是推送之后就完事了，至于对方有没有收到，收到是什么，数据有没有丢失，都不管。（QoS1）：确保消息到达，但消息重复可能会发生。即是你收到推送后，你还得返回一个puback给对方，告诉对方收到了，不然对方会以为你没收到，隔一段时间后重新给你推送，直到你给对方返回一个Puback为止。这一级别可用于如下情况，在计费系统中，消息重复或丢失会导致不正确的结果。
2024-06-04 10:17:26
376
原创 jenkins部署vue项目
安装插件 NodeJS、Publish Over SSH （下图为安装教程）这三个插件都这么安装。接下来添加凭证（这里我认为的是添加全局账号密码例如服务器账号、git账号密码）部署时候用。设置好 勾选自动安装然后应用=》保存（听说不要选择18版本的node）这里步骤是 把你的代码构建成文件并且压缩下一步应该发到你的服务器。下面源码管理的地方需要将你默认的分支换为${上面起的名称}部署指定分支（后面我会下载插件选择部署指定分支或标签）输入git地址并且选择配置好的git账号密码。
2024-02-04 09:49:18
556
原创 Vue组件分装之$attrs、$listener传递属性及事件
获取父组件所有插槽以及作用域插槽对应的参数#[name]="scopeData"这样，自定义按钮就能够直接响应父组件的事件，而不需要手动触发。使用v-on="$listeners"将父组件的事件监听器传递给自定义按钮。使用v-bind="$attrs"来将父组件的属性传递给自定义按钮。
2023-12-03 15:24:00
396
原创 JS严格模式（use strict）详解
严格模式是在 ECMAScript5（ES5）中引入的，在严格模式下，JavaScript 对语法的要求会更加严格，一些在正常模式下能够运行的代码，在严格模式下将不能运行。
2023-11-28 17:20:18
286
原创 使用nvm管理node多版本
来回安装肯定是很麻烦的，所以需要一个方法能够使电脑系统安装多个node版本，并且使用一句命令就能自由切换。nvm进行切换node，卸载node，更换当前电脑使用node版本。使用node工程，有时不同项目需要使用不同。win10环境使用nvm安装管理多版本。1.nvm安装，首先在官网下载。这两句到setting.txt。
2023-11-28 17:08:32
198
原创 vue项目本地开发构建速度优化 hard-source-webpack-plugin
有些项目因为项目需求点多、功能复杂、管理混乱、引入第三方插件/样式库过多、本身项目页面较多、文件较多等等原因，会导致项目体积变大、本地构建速度明显变慢，这时就需要对项目webpack进行一些设置来提高打包效率、加快打包时间。hard-source-webpack-plugin会进行文件的启动缓存，第一次启动之后，会给文件添加一次缓存，然后在第二次启动的时候，直接在本地缓存进行。缺点：每次修改配置项之后，需要项目重新启动的时候，这个时候是需要重新进行项目的热更新，跟没有配置一样。
2023-11-18 18:22:44
1275
原创 用volta管理不同项目node版本
volta是一个node.js的版本管理工具，你的电脑上安装了很多个node版本，volta可以让你在不同的项目中使用不同版本的node.js,并且可以切换node.js版本Volta会自动将安装的Node.js版本与该项目绑定，使得您在该项目中执行 node、npm、yarn等命令时，都会使用该项目指定的Node.js版本。
2023-11-11 16:01:30
1383
原创 vue的.sync修饰符用法及原理详解
利用EventBus，子组件触发事件，父组件响应事件并实现数据的更新，避免由子组件直接修改父组件传过来的内容。（如果子组件直接操作，vue会有警告提示）。v-on:update:word="wrd = $event" 则被简写为 :show.word。当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。
2023-10-30 11:29:40
423
原创 requestAnimationFrame详解
简单来说，requestAnimationFrame 就是约定在下一次浏览器刷新前执行的一个定时器。类似setTimeout。window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。1、什么是requestAnimationFrame。
2023-10-26 11:19:32
1065
原创 MutationObserver详解
所以 MutationObserver 相比 Mutation events 性能要更高。MutationObserver API 让我们能监听 DOM 树变化，该 API 设计用来替换掉在 DOM 3 事件规范中引入的 Mutation events。比如使用MutationObserver实现图片懒加载，监视img标签的visibilitychange事件，做出响。监听style或者class的变化做出响应，比如我之前的应用：监听antd的模态窗变化，做出后续操作。
2023-10-26 10:26:57
384
原创 clip-path图片裁剪
语法：clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;stroke-box 使用笔触边界框（stroke bounding box）作为引用框。view-box 使用最近的 SVG 视口（viewport）作为引用框。阅读关于 initial。fill-box 使用对象边界框作为引用框。
2023-10-25 17:11:28
274
原创 getBoundingClientRect使用场景（table固定表头）
的需求，这时候需要给table设置一个固定的高度，可以使用添加一个元素通过getBoundingClientRect计算top的距离，然后获取浏览器可视范围高度，进行计算。使用场景：在使用框架进行开发是，经常会遇到需要给。下面以VUE为例，分装通用组件。
2023-10-18 14:03:07
265
原创 Form表单Input中按enter键自动提交的问题
按钮绑定回车事件后按回车表单执行js方法后表单自动提交刷新，先执行了js的方法后自动提交表单，使它相当于没有执行js方法，查阅资料得知在一个。，按回车键表单会自动提交，但是当表单中存在多个。时，按回车键不会执行任何操作，这是。
2023-10-17 17:32:03
1895
1
原创 记录 UniApp开发中遇到的坑
inpu的cursor-spacing属性，可以设置键盘到输入框的距离。原因：picker带有动画，在滑动选择时，当动画结束后才会真正选中值。方案：使用其它插件，推荐：uni-data-picker。解决：使用scrollIntoView。
2023-10-16 16:52:12
215
原创 JS取消http请求
MLHttpRequest（以下简称XHR）是一个Web API接口，用于发送HTTP请求和接收HTTP响应。通过XHR发送的请求可以使用abort()方法中断。在中断请求时，该方法会将请求的状态置为abort，并会终止请求的发送和响应的接收。创建了一个AbortController对象，并将其signal属性传递给Fetch请求。在中断请求时，我们可以使用AbortController对象的abort()方法。
2023-10-16 16:20:48
391
原创 css3自动吸附scroll-snap
我们希望可以一块一块的滚动，比如当前一个块滚出去了一部分并且后一个块滚进来一部分的时候，实现后一个块自动滚入或者前一个块回弹到初始位置这种效果，以前的时候用js需要写比较复杂的判断逻辑，后来有了一个css。scroll-snap-type指明了一个可以滚动的容器是否是scroll snap container , snap地是否严格() , 在哪个轴上实现snap效果。1、scroll-snap-type（吸附模式：添加到父元素中）snap这个方法，可以比较方便的实现想要的效果了，基本够用。
2023-10-16 15:32:58
1355
原创 Vue路由守卫有哪些，怎么设置，有哪些使用场景？
Vue 路由守卫是在 Vue Router 中提供的一种功能，它允许您在导航到某个路由前、路由变化时或导航离开某个路由时执行代码。
2023-10-14 18:26:54
328
原创 html资源提示符
正常dom解析 中遇到script标签 ，会暂停主线程 去下载js，拿到资源后，主线程再执行js。那么主线程在等待网络线程下载这个空闲很浪费解决方案： script标签增加属性 async defer。
2023-10-14 18:16:03
513
原创 浏览器渲染只之---回流、重绘
当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流。当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是。对于如何优化动画，我们知道，一般情况下，动画需要频繁的操作DOM，就就会导致页面的性能问题，我们可以将动画的。局部范围：对渲染树的某部分或者一个渲染对象进行重新布局。，将动画脱离文档流，这样他的回流就不会影响到页面了。全局范围：从根节点开始，对整个渲染树进行重新布局。回流比重绘的代价要更高。
2023-10-14 18:09:51
143
原创 前端面试宝典
第二章 HTML5面试题1.H5的新特性有哪些画布(Canvas) API 地理(Geolocation) API 音频、视频API(audio,video) localStorage和sessionStorage webworker和 websocket header,nav,footer,aside,article,section web worker是运行在浏览器后台的js程序，他不影响主程序的运行，是另开的一个js线程，可以用 这个线程执行复杂的数据操作，然后把操作结果通过po
2023-10-14 17:51:12
93
原创 Vue封装组件并发布到npm仓库
想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到，创建对应的公有组织（私有的要收费）到这里为止，我们的组件封建基本就完成了，当然组件封装成什么样得看自己得业务需求了，接下来我们就需要将组件进行打包了。这一步是封装组件中的重点，用到了Vue提供的一个公开方法：install。打包执行完成后我们项目目录下就会多出一个lib文件夹，存放的是打包后的文件。时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。
2023-10-14 17:09:45
627
原创 git之分支代码合并
此处如果有冲突会给出提示哪个文件有冲突，修改冲突文件后再继续下面的步骤。5. 将master上合并的文件add和commit到自己的分支。推荐vs code插件：GitLens — Git supercharged，冲突不知如何解决时，可查看代码由谁提交。4. 合并master到自己的分支dev上。2. 将master更新的代码拉取到本地。6. 将自己分支dev上的代码提交到远程。7.查看合并后的状态（红色的代表有冲突）1. 切换到master主分支上。3. 再切换到自己的分支dev上。
2023-10-08 14:35:53
432
原创 vue 项目打包性能分析插件 webpack-bundle-analyzer
找到 package.json 在 build 后面加 --report。new BundleAnalyzerPlugin 参数配置说明。
2023-10-07 16:19:49
2920
原创 JavaScript实现跨标签页通信
是 H5 引入的 API，该方法允许来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档、多窗口、跨域消息传递，多用于窗口间数据通信，这也使它成为跨域通信的一种有效的解决方案。结合 window.addEventListener('storage', cb) 完成 A、B 标签页间通信。它允许同一来源的不同文档（在不同窗口、选项卡、框架或 iframe 中）之间进行通信。表示一个命名频道，给定。
2023-10-07 09:15:42
289
原创 前端每日小计
跨平台：虚拟DOM只有一份，不同平台（PC、小程序、APP）有不同的真实DOM，可以对比。进入项目根目录运行depcheck，查看Missing dependecies。添加git config core.ignorecase false配置。1，提升效率，不一定，大量静态的页面，虚拟DOM反问慢。框架设计：数据劫持，方便对比，准确定位变更区域。项目package.json中依赖确实，可用。
2023-09-12 09:22:17
417
原创 node-sass 安装失败解决办法
很多小伙伴在安装node-sass的时候都失败了，主要的原因是node版本和项目依赖的node-sass版本不匹配。node-sass依赖node版本，而sass则不需要。解决方案：卸载node-sass，安装sass，项目全局搜索/deep/, 把/deep/替换为::v-deep即可。
2023-07-02 21:07:21
4103
原创 CSS小计之动画
CSS3动画有两点：动画效果：transform（设置动画表现形式）translate(x,y)：x/y轴移动scale(x,y)：缩放rotate(angle)：旋转动画效果控制：transition （设置动画过程，属性名称transition-property、动画时长transition-duration延迟时长transition-delay等） .div { //该动作会向右缓慢移动100像素 transform: translateX(100
2022-03-30 15:34:54
217
原创 React Hook 理解使用 useState、useEffect、useContext、useRef、自定义hook
React Hookreact hooks 的出现，是对 react 中无状态组件的一种升级，使得函数组件也能state 和 生命周期React Hooks 要解决的问题是状态共享，是继 render-props（渲染属性） 和 higher-order components（HOC；高阶组件） 之后的第三种状态逻辑复用方案，不会产生 JSX 嵌套地狱问题。1. useStatehooks 的能力，就是让我们在函数组件中使用 state, 就是通过 useState 来实现的const [
2022-03-08 09:37:38
843
转载 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen.height每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度
2022-03-04 09:50:00
203
转载 前端部署总结
先上灵魂拷问在文章之前，先抛一些灵魂拷问： 前端代码从 tsx/jsx 到部署上线被用户访问，中间大致会经历哪些过程？ 上述过程中分别都有哪些考虑、指标和优化点，以满足复杂的业务需求？ 可能大部分同学都知道强缓存/协商缓存，那前端各种产物（HTML、JS、CSS、IMAGES 等）应该用什么缓存策略？以及为什么？ 若使用协商缓存，但静态资源却不频繁更新，如何避免协商过程的请求浪费？ 若使用强缓存，那静态资源如何更新？ 配套的
2022-02-09 09:35:09
1942
原创 前端自动化测试
测试自动化的好处在于反馈及时，能够极大地提高前端的开发效率。在我们日常的开发过程中，是不是经常需要在项目跑起来之后去人工测试某些操作或者流程是否能够正常运行？是不是经常需要打断点或者使用 console.log 查看控制台信息来检查某个函数是否执行？这些需要我们自己手工测试代码的执行结果是否符合预期的场景，完全可以使用自动化测试的脚本代替。现有的很多成熟的自动化测试框架完全可以模拟我们的手工操作，使用脚本自动运行测试用例，通常只需要几秒就能给出准确的反馈，同时还能侦听代码变化，自动执行项目中发生
2022-01-06 15:20:34
2472
原创 Promise.any()、Promise.all()、Promise.race()
共同点：1：接收promise数组参数2：所有promise都会执行不同点：Promise.any();有一个子实例成功就算成功，全部子实例失败才算失败；Promise.all()；全部子实例的成功才算成功，一个子实例失败就算失败；Promise.race()；rece是赛跑机制，看最先的promise子实例是成功还是失败，返回最先执行完的promise...
2021-09-14 11:09:10
336
2
原创 5 分钟学会 Nginx 负载均衡实用知识点
不会也没关系，先给各位贴一个最简单的nginx.conf配置，看完就会http{includemime.types;default_typeapplication/octet-stream;sendfileon;keepalive_timeout65;server{listen8081;server_namelocalhost;...
2021-07-09 15:16:58
133
原创 几张动图带你回顾JS的变量提升
首先，看看mdn对它的解读:变量提升（Hoisting）被认为是， Javascript中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。在 ECMAScript® 2015 Language Specification 之前的JavaScript文档中找不到变量提升（Hoisting）这个词。不过，需要注意的是，开始时，这个概念可能比较难理解，甚至恼人。我们可以理解成，在编译的阶段，js引擎帮我们把变量和函数的声明放在最前面，但实际上变量和函数声明在代码里的位置是不会动的。知道了个
2021-06-02 15:49:18
203
1
原创 3个模块熟练使用vue3
项目架构//1.封装项目的基础库优秀的基础库可以保证项目的最低质量下限和更好的可扩展性。通常我们说的基础库包括-组件库、基础 css 库、基础工具库。//2.层级管理管理你的请求，建议把你项目的 api 层独立出来为一个层级管理，这样有利于在复杂接口下，更好的管理，降低复杂度。02性能优化//1.缓存缓存可以减少请求，加快速度。比如从商品列表跳往详情页，可以用 cookie 或localstore 缓存商品详情，如果这个详情已经被加载过了，就拿出来重复...
2021-06-02 15:18:31
170
原创 Junit单元测试之多线程的情况
在做mybatis的多个线程修改内容时候的遇到的问题；主线程执行完毕之后，子线程全部自动被杀死！！！验证测试：@Testpublic void multiTheadUpdate() { for(int i=0;i<10000;i++){ int finalI = i; new Thread(()->{ try { Thread.sleep(100); } catc...
2021-06-02 14:53:57
335
原创 JavaScript 部分基础知识点
JavaScript (JS)是一种编程语言，为通常用于客户端（client-side）的网页动态脚本，不过，也常通过像Node.js这样的包，用于服务器端（server-side）。今天，发一篇关于Js基础知识点的文章，为更多的新人指路。总会有人在你的前方为你探路，前行之路，你不孤单~ 目录 {:toc} 先来个目录结构───1、变量声明│└───JavaScript的数据类型分类和判断│└───引用类型和值类型───2、原型与原型链（继承）│└─...
2021-05-14 17:20:08
244
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人