- 博客(126)
- 收藏
- 关注
RSS订阅原创 Vue3实现mqtt的订阅与发布
MQTT（Message Queuing Telemetry Transport）是一种轻量级的、基于发布/订阅模式的通信协议，通常用于连接物联网设备和应用程序之间的通信。它最初由IBM开发，现在由OASIS（Organization for the Advancement of Structured Information Standards）进行标准化。MQTT的工作原理很简单：它采用发布/订阅模式，其中设备（称为客户端）可以发布消息到特定的主题（topics），而其他设备可以订阅这些主题以接收消息。
2024-12-08 21:37:53
339
原创 从输入url到页面加载的全过程
3.生成渲染树：从DOM树的根节点开始，遍历每个可见节点，对于每个可见节点，找到CSSOM树中对应的规则并应用，根据每个可见节点及其对应样式，组合生成渲染树。当页面元素样式改变不影响元素在文档流中的位置时，如color、visibility等，浏览器只会将新的样式赋予元素并进行重新绘制的操作。2.如果缓存中没有，浏览器向DNS服务器请求解析url中的域名对应的ip地址。5.根据渲染树及其回流得到的集合信息，得到节点的绝对像素，绘制页面像素信息。4.根据生成的渲染树，进行回流，得到节点的集合信息。
2024-12-01 22:40:58
120
原创 echarts 柱状图
如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用(中间的柱子)。4.如何固定最后一根柱子的高度在同一个位置，data: dataArry.map(item => fixedTotal)3.第一根柱子的 position: "right", 相当于百分比跟随柱子的最右边，data是百分比的数据。数据过多会导致下拉的时候，触发y轴formatter，更新序号，序号会重新排列，不准确。1.y轴显示的序号和名称需要在数据中拼接，而不是在y轴data中拼接，
2024-11-26 17:53:38
119
原创 vue2和vue3版本区别
在vue2中定义数据变量是data(){}，创建的方法要在methods:{}中。而在vue3中直接在setup(){}中，在这里面定义的变量和方法因为最终要在模板中使用，所以最后都得return。setup里面没有this。setup() {//使用ref，说明这个数组就是全局在面板中可以使用了//设置一个函数//改变selectGirl的值要加value//要得到值要加value ，这些都因为使用了ref函数//在标签中使用的变量要使用return。
2024-11-17 21:17:39
277
原创 浅谈JavaScript中的Promise、Async和Await
使用Promise，可以避免所谓的“回调地狱”，即多层嵌套的回调函数，从而使代码更加清晰和易于维护。它可以暂停async函数的执行，等待Promise的解决（resolve），然后以Promise的值继续执行函数。使得处理复杂的异步逻辑更加简单，尤其是在涉及多个依次执行的异步操作时。在很多情况下可以提供更清晰和简洁的代码，但Promise也有其独特的优势。是建立在Promise之上的高级抽象，使得异步代码的编写和阅读更加接近于同步代码的风格。后的代码变成同步代码，但是再往后的代码依旧会被推入微任务队列。
2024-11-10 19:57:27
919
原创 Javascript 中的回流和重绘
当您只想隐藏元素而不影响布局时，请使用visibility:hidden而不是display:none。重绘不涉及重新计算布局，因此比回流更快，但仍然需要重绘页面的部分内容，这需要一些时间。如果许多元素受到一次更改的影响，则回流的成本可能会很高，并且会降低网站的性能。当浏览器重新计算页面上元素的位置、大小和布局时，会发生。当元素的视觉属性发生变化但布局不变时，会发生。以上就是Javascript 中的。降低 css 的复杂性。最小化 dom 操作。
2024-10-20 19:44:54
696
转载 JS怎么实现电子签名呢
通过以上步骤，我们实现了一个简单的前端签名功能。这个功能可以用于各种需要用户签名的Web应用中。通过进一步扩展，可以添加更多的功能，比如不同颜色的签名笔、签名的缩放和撤销功能等。
2024-09-22 20:59:23
197
原创 前端面试刷题必备（CSS篇）
盒子模型它包含了内容（content）、内边距（padding）、边框（border）、外边距（margin）正常模式下，也就是标准盒子模型，盒子的宽度就是 width = content怪异模式下，盒子的宽度是 width = content + padding + border通常我们可以使用box-sizing来修改盒子模式，border-box会将 padding 和 border 都算入 width；就是默认的标准模式。
2024-09-17 21:23:45
983
原创 丢弃掉模板语法和‘+‘来拼接url，解决无效代码
在前端开发中，我们经常需要处理URL，例如在发起HTTP请求时构建API端点，或在页面导航时构建动态链接、拼接动态参数。过去，我们习惯于使用模板语法和字符串拼接来构建这些URL，现在在代码中依然可以看到新的代码还在使用这种方法。但这种方法不仅容易出错，而且在维护和阅读代码时也不够直观。本文将介绍更现代和更安全的URL构建方法，并展示如何在实际项目中应用它们。传统上，我们常使用字符串拼接或模板语法来构建URL。
2024-09-08 18:22:52
555
原创 JS的执行原理，了解Event Loop事件循环、微任务、宏任务
在事件循环中，当主线程执行完当前的同步任务后，会检查事件队列中是否有待处理的事件。如果有，主线程会取出事件并执行对应的回调函数。这个循环的过程被称为事件循环（Event Loop），它由主线程和任务队列两部分组成。主线程负责执行同步任务，而异步任务则通过任务队列进行处理。这种机制保证了异步任务在适当的时机能够插入执行，从而实现了JavaScript的非阻塞异步执行。主线程读取JavaScript代码，形成相应的堆和执行栈。当主线程遇到异步任务时，将其委托给对应的异步进程（如Web API）处理。
2024-09-01 21:01:52
990
原创 TypeScript类型定义及复用
我还注意到，在类型复用时，团队成员往往只是简单地为已有类型新增属性，而忽略了更高效的复用方式。例如，有一个已有的类型Props需要复用，但不需要其中的属性c。在这种情况下，团队成员会重新定义Props1，仅包含Props中的属性a和b，同时添加新属性e。a: string;b: string;c: string;a: string;b: string;e: string;实际上，我们可以利用TypeScript提供的工具类型Omit来更高效地实现这种复用。a: string;
2024-08-25 20:48:36
548
原创 鸿蒙关于可以实现滚动效果的容器组件的相关知识
在开发的过程中，用户在使用app的过程中对于滚动条样式审美的提升，不断向开发人员提出建议，开发人员不得不改变滚动条样式。通过使用ScrollBar组件（需要和Grid公用同一个Scroller）来自定义样式。Grid的属性属性名类型说明scrollBarBarState设置滚动条状态。默认值：BarState.autoBarState.off 关闭BarState.on 常驻BarState.auto 按需显示设置滚动条的颜色。设置滚动条的宽度。
2024-08-18 21:17:21
1490
原创 Vue自定义指令
在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过方式注册全局指令。然后在入口文件中进行Vue.use()调用。批量注册指令，新建文件在main.js引入并调用下面分享几个实用的 Vue 自定义指令v-copyv-debouncev-emojiv-LazyLoad。
2024-08-11 21:45:04
980
原创 DevEso Studio的使用试题
3. DevEco Studio支持使用多种语言进行应用/服务的开发，包括ArkTS、JS和C/C++。2. module.json5文件中的deviceTypes字段中，配置了phone，tablet，2in1等多种设备类型，才能进行多设备预览。1. 如果代码中涉及到一些网络、数据库、传感器等功能的开发，均可使用预览器进行预览。1. 用哪一种装饰器修饰的组件可作为页面入口组件：（@Entry）4. 组件预览通过在组件前添加下面哪个注解： (@Preview)
2024-08-02 17:45:56
396
转载 深度选择器探秘：/deep/、＞＞＞、::v-deep 与 v-deep() 的区别与用法
深度选择器允许我们从父组件中穿透到子组件内部，直接修改子组件的样式。这在需要定制第三方UI库组件样式时尤为有用。
2024-07-21 19:11:50
398
原创 vitest 单元测试应用与配置
jsdom 是一个在 Node.js 环境中使用的纯 JavaScript 实现的 DOM（文档对象模型），它模拟了足够多的浏览器环境，使得你能够在服务器端（如 Node.js 应用程序）中运行那些原本只能在浏览器中运行的脚本。Vitest的配置可以通过多种方式实现，包括在package.json中直接配置，或者创建一个专门的配置文件（如vitest.config.ts或vitest.config.js）。在你的Vue项目中，你可以为组件、函数、工具等编写测试。你可以根据项目的具体需求来配置这些选项。
2024-07-12 16:44:05
1474
原创 【js基础巩固】深入理解作用域与作用域链
先看一段代码，下面代码输出的结果是什么？当执行到这句代码的时候，其调用栈的状态图如下所示：此时，和foo都包含变量myName，那么bar函数里面的myName值到底该选择哪个呢？myNamefoofoomyNamefoomyName如果按照这种方式来查找变量，那么最终执行bar函数打印出来的结果就应该是“极客邦”。但实际情况并非如此，而是打印“极客时间”。要解释这个问题，就涉及到了。其实在每个执行上下文的中，都包含了一个外部引用，用来指向外部的执行上下文，我们把这个外部引用称为。
2024-07-07 22:01:31
1074
原创 浏览器中如何获取用户网络状态
以下代码是 ahooks 中的 useNetwork 自定义 Hook 实现方式，其核心原理是通过以上的navigator.onLine和navigator.connection中提供的API进行分装的。其他的自定义Hooks也有类似实现的封装。since?: Date;online?: boolean;rtt?: number;type?: string;downlink?: number;saveData?: boolean;: number;: string;if (!
2024-06-30 22:33:35
618
1
原创 vue中provide和inject的使用
vue中组件传值是比较常见的，也是我们日常编写代码最常用到的，这里主要讲讲provide和inject的用法。我是子组件,我获取的内容是 我是DemoTwo级组件的值。
2024-06-23 21:58:42
250
原创 如何判断一个js对象是否存在循环引用
在前端是我们常用的一个方法，可以将一个对象序列化。例如将如下对象序列化我们发现上面对象是可以使用JSON.stringfy序列化的。personowner我们对上面这个对象进行JSON.stringfy,结果如下，会报错：我们发现他说不能转化一个“圈结构体为JSON”,是因为这个对象的owner属性指向了自己。在转化的时候会变成死循环。
2024-06-16 21:24:10
453
转载 前端如何判断上传图片尺寸（宽度和高度）
在上传图片时，存在需要判断图片的宽高是否符合需求的场景（如指定Icon尺寸）。那么前端如何判断上传图片尺寸（宽度和高度）？
2024-06-10 18:16:43
422
转载 BFC是什么？
BFC（Block Formatting Context，块格式化上下文） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。详见MDN看不明白？那就对了！官方解释若不搞得抽象难懂些，怎能显出高大上？！（手动滑稽）还是让逆战在新冠疫情期的我来给你解答吧！1、可以利用BFC解决两个相邻元素的上下margin重叠问题；2、可以利用BFC解决高度塌陷问题；3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。
2024-05-26 21:12:32
776
原创 uniapp引用第三方组件样式无法穿透
在通过uniapp编写小程序过程中发现，引用第三方组件库的样式无法穿透修改。微信小程序文档也给出对应的解决思路。
2024-05-12 23:20:10
1102
原创 如何用JS校验HTTP和HTTPS地址
在日常开发过程中，我们有时候对某些应用功能进行封装，但是在请求接口又不能写死，这个时候我们需要对他进行多方面考虑。
2024-04-21 21:36:13
1373
转载 JavaScript的新特性
新特性的引入总是带来了新的编程范式和工具，我们可以利用它们来提升我们的开发效率和代码质量。随着新特性逐步融入我们的日常工作，我们需要保持学习的态度，不断适应和采纳这些新工具。尽管如此，我们也要考虑到项目的现实需求，如浏览器兼容性和团队的熟悉度，以确保新特性的引入不会对项目造成负面影响。最终，合理利用现代JavaScript特性，我们能够编写出更加现代化、高效且可维护的前端代码。
2024-04-14 20:42:03
56
原创 详解Vue3中如何使用动态组件
在 Vue 3 中,动态组件是一种允许在运行时动态切换组件的机制,本文主要为大家详细介绍了动态组件在Vue3中的具体使用。Vue 3 提供了 元素以及 is 特性来实现动态组件的切换。
2024-04-09 09:40:05
2064
原创 Cesium实现渐变面
使用着色器，通过纹理坐标和其他参数计算出材质的颜色和透明度。通过给定的颜色、漫反射强度和透明度，计算出最终的反射颜色和透明度，并且根据给定的中心点位置和当前像素的纹理坐标，计算出距离中心的距离用来做透明度的参考值，然后计算得到的颜色加载到对应的材质上。
2024-03-31 20:58:40
1517
4
原创 VUE父子组件生命周期执行顺序
一、父子组件异步传值的坑子组件的生命周期只会执行一次，但是当子组件渲染的时候父组件的数据还没接受完就会造成子组件没有任何内容渲染。二、解决父子组件异步传值的方法1. 给子组件添加渲染条件，使用v-if，当父组件数据接收完毕后在渲染子组件。2. 在子组件中添加watch监听，当父组件数据传输过来时，改变原有的默认数据，重新渲染页。
2024-03-24 21:52:40
389
翻译 vue3的＜script setup＞是干啥的？
在这种情况下，你可以在同一文件中使用 <script setup> 和<script>标签，将主要的逻辑放在 <script setup>中，而将额外的逻辑或 API 放在。这些选项需要在 <script setup> 外部的 <script> 标签中定义，或者使用特定的语法在<script setup>内部定义。使用 <script setup>，你可以在一个地方同时编写组件的逻辑和模板，而不需要像传统的 Options API 那样在不同的地方分别编写。关键字：在<script setup> 中，
2024-03-10 20:38:15
289
原创 Nginx最常用的指令
包含请求参数的原始URI，不包含主机名，如：/foo/bar.php?不带请求参数的当前URI，$uri不包含主机名，如 /foo/bar.html。当前请求的文件路径，由 root 或alias指令与URI请求生成。这个变量等于请求行中的参数，同 $query_string。请求使用的协议，通常是HTTP/1.0或HTTP/1.1。请求头中的 Content-length 字段。客户端请求的动作，如 GET/POST。当前请求在 root 指令中指定的值。有服务器宕机，标记的机器接收请求。
2024-03-03 21:39:21
2146
转载 vue3定时刷新
业务场景：某个模块有多处数据刷新处理，为了减少或setTimeout线程的消耗，统一使用一个定时器，然后结合watch监听实现刷新同步，更具体的可以再结合各个接口的请求时间来判定是否刷新。
2024-02-25 20:24:03
638
原创 cavas自适应父元素宽高
canvas的默认宽高为300px*150px，在css中设置canvas的宽高，实际上是把canvas在300px*150px的基础上进行了拉伸。所以绘制出来的图像会发生变形。我们在使用cavas画布的过程中，有时候需要修改他的宽高，但是如果通过css样式去修改，有个弊端，就是显示内容比较模糊，为此需要让他的宽高自适应父元素宽高。
2024-01-28 20:12:44
1349
原创 cesium实现动态围栏
在网上也找了好多案例，通过着色器来实现效果，为此也有好多博主也附上了自己的代码，也许是因为使用方法不同，复制代码并修改依旧还是没有通过他们的方式实现效果【着色器】。我这里先附上我的代码，便于跟我一样的，第一接触cesium的人，解决当下的需求。项目中使用到了cesium,需要实现动态的围栏的效果，
2024-01-21 22:39:47
853
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人