Luax的博客

场景：在启动3d虚拟仿真时注册一个keydown事件，用来触发3d基本体的复制粘贴操作 遇到的问题：在这个页面有一个blocky积木块控制面板区域，调起这个面板，同样可以进行复制粘贴操作，而且快捷键一样，这就出现了在复制积木块的时候同时也进行了3d基本体的复制操作，在复制3d基本体同时也进行了复制积木块的操作 解决：1、运用 document.activeElement 获取当前获得焦点的元素 ，判断是否为积木块区域，如果是，则不进行3d基本体的复制操作 2、在注册3d基本体keydown事件里面执行阻止冒泡操作，避免进行到积木块的复制操作 相关知识点：区分不同区域的事件处理： 使用 closest 方法检查当前获得焦点的元素是否位于指定区域（例如 #blocklyDiv 或 #customDiv）。 根据事件来源区域执行不同的逻辑。 .stop修饰符：.stop 是 Vue.js 事件修饰符之一，用于阻止事件传播（即阻止事件冒泡）。当你在 Vue 模板中使用 .stop 修饰符时，相当于在事件处理函数中调用了 event.stopPropagation()。 语法： 1< ...

WebSocket 是一种网络通信协议，旨在通过单个持久连接在客户端和服务器之间进行全双工（full-duplex）的实时通信。WebSocket 协议由 IETF 于 2011 年标准化，RFC 6455 文档中详细描述了它。以下是 WebSocket 的主要特点和应用场景：主要特点 全双工通信：WebSocket 允许客户端和服务器之间进行双向通信，即双方都可以随时发送和接收数据，而不必像 HTTP 那样由客户端发起请求。 持久连接：WebSocket 连接一旦建立，就会保持打开状态，直到明确关闭。相比传统的 HTTP 短连接，WebSocket 减少了频繁建立和关闭连接的开销。 低延迟：由于 WebSocket 连接是持久的，它避免了 HTTP 请求-响应周期中的延迟，使得数据可以更快地传输，适合需要实时通信的应用。 较少的开销：WebSocket 消息头部较小，只有 2 字节的开销，而 HTTP 每次请求的头部通常较大，这使得 WebSocket 更高效。 基于 TCP：WebSocket 协议建立在 TCP 协议之上，确保了可靠的数据传输。 工作原理 握手阶段：WebSoc ...

虚拟dom-在js中动态创建销毁组件代码例子：1234567891011121314151617181920212223242526272829303132333435363738394041424344454647import { createVNode, render } from 'vue';import LableInput from './LableInput.vue';const div = document.createElement('div')div.setAttribute('id', 'LableInput')//用来判断是否渲染组件，比如重复渲染let flag=false;//定义响应式数据，用来动态更新同一个组件dom的信息，也就是说外界调用这个函数时候，reactive定义的数据发生了改变，//组件可以实验commputed或者watch来监听这个数据，绑定在显示dom上，从而实现动态更新数据//也可以动态更新dom的位置，这里传入xy就 ...

前端开发涉及3D的话，通常会涉及以下几个方面： Three.js 或其他 3D 库： Three.js 是一个流行的用于在 Web 上创建和展示 3D 内容的 JavaScript 库，它提供了许多用于创建 3D 场景、渲染模型、添加光照效果等功能。其他的库还有 Babylon.js 等。 模型创建和处理： 你需要了解如何创建或者获取 3D 模型，并且对这些模型进行处理和优化以在 Web 上高效渲染。通常会使用工具如 Blender 或者 Maya 来创建和编辑模型。 着色和纹理： 在前端 3D 开发中，你需要了解如何给模型添加纹理和着色以增加细节和真实感。这可能涉及到 UV 映射、贴图、材质等方面的知识。 光照和阴影： 熟悉如何在 3D 场景中模拟光照效果，并且实现阴影效果以增强场景的逼真度。 交互和动画： 与传统的 Web 开发类似，前端 3D 开发也需要处理用户交互和动画效果。这可能包括鼠标交互、键盘控制、触摸事件等，以及实现模型的动态效果和过渡动画。 性能优化： 3D 场景通常需要大量的计算资源，因此性能优化对于保持良好的用户体验至关重要。你需要了解如何优化模型的多边形数量、 ...

JavaScript API 可以分为几类，根据其提供的功能和用途： 浏览器 API： 这些 API 提供了与浏览器相关的功能和特性的接口，包括： DOM API：文档对象模型（Document Object Model），用于操作和管理网页的内容和结构。 Fetch API：用于发起网络请求和处理响应的接口。 Canvas API：用于在网页上绘制图形的接口。 Web Storage API：提供了本地存储（localStorage 和 sessionStorage）的能力。 Web Workers API：允许在后台线程中执行脚本以避免阻塞主线程。 浏览器 API： 大多数浏览器 API 是直接内置在现代浏览器中的，不需要额外的导入或下载。您可以通过 JavaScript 直接访问这些 API。例如，DOM API、Fetch API、Canvas API 等都是浏览器原生支持的，可以直接在网页中使用。 第三方 API： 这些 API 由第三方服务提供，通过网络请求或其他方式提供特定服务的接口，如 Google Maps API、Twitter API 等。 No ...

防抖和节流防抖和节流是JavaScript 中常用的两种性能优化方式。面试中我们也会经常碰到。它们的作用是减少函数的执行次数，以提高代码的性能。 什么是防抖？防抖（Debounce）是指在事件被触发 delay 时间后再执行回调 function 函数，如果在这设置的 delay 时间内事件又被触发，则重新计时。这可以使用在些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。 （通俗易懂的理解：王者荣耀里面的回城按钮，重复触发会重新计时） 应用场景 搜索框实时搜索：当用户在搜索框中输入内容时，通常需要实时进行搜索。使用防抖函数可以延迟搜索请求的发送，只在用户停止输入一段时间后才真正发送请求，避免频繁的请求操作。 表单输入验证：在表单输入过程中，每次用户输入都可能触发验证操作。使用防抖函数可以延迟触发验证操作，只在用户输入完毕一段时间后进行验证，避免频繁的验证操作。 浏览器窗口调整事件：当用户调整浏览器窗口大小时，会触发resize事件。使用防抖函数可以延迟resize事件的触发，只在用户停止调整窗口一段时间后才执行对应的操作，避免频繁的计算和布局操作。 鼠标移动事件：在一些 ...

Pinia状态管理库-数据状态同步pinia状态管理库在 Vue.js 中，Pinia 是一种状态管理库，它使用了响应式的数据流。当使用 Pinia 管理的数据发生变化时，与 Vue 2.x 中的 Vuex 类似，Pinia 也会触发组件的重新渲染，以确保 UI 反映最新的数据状态。 当你在 Pinia 存储中使用 ref 或 reactive 定义的数据发生变化时，相关的组件会在下一个事件循环周期内更新，这是 Vue.js 的响应式系统的一部分。这种自动的响应式更新机制使得你不需要手动调度组件的重新渲染，Vue.js 会负责处理这些变化。 cartStore.js的封装： 123456789101112131415161718192021222324252627282930313233343536//封装购物车模块import { defineStore } from "pinia";export const useCartStore = defineStore({ id: 'cart', state: () ...

vue项目组件分类通用型组件（ElementPlus）-Dialog模态框 业务定制化组件=商品热榜组件 主题色定制-sass引入安装sass 1npm i sass -D axios实例化配置使用实例化的 Axios 对象后，在发起请求时不需要再写完整的 URL。当使用实例化对象发起请求时，实例的 baseURL 会作为请求的基础 URL，而只需要提供相对路径即可。 比如，如果创建了一个实例 instance，设置了 baseURL 为 'https://api.example.com'，那么在使用这个实例发起请求时，只需要提供相对路径： 123456789101112131415javascriptCopy code// 创建实例const instance = axios.create({ baseURL: 'https://api.example.com', // 其他配置...});// 使用实例发起请求instance.get('/users') // 实际请求的URL为 ' ...

js中的事件冒泡、事件捕获、事件委托事件流JavaScript和HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。可以使用监听器（或事件处理程序）来预定事件，以便事件发生时执行相应的代码。通俗的说，这种模型其实就是一个观察者模式。（事件是对象主题，而这一个个的监听器就是一个个观察者）。 DOM事件流（event flow ）存在三个阶段： 事件捕获阶段 处于目标阶段 事件冒泡阶段 Dom标准事件流的触发的先后顺序为： 先捕获再冒泡。即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。 addEventListener的第三个参数在我们平常用的addEventListener方法中，一般只会用到两个参数，一个是需要绑定的事件，另一个是触发事件后要执行的函数，然而addEventListener还可以传入第三个参数： 1element.addEventListener(event, function, useCapture); 第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数； 如果参数为true ...

路由缓存问题使用带有参数的路由需要注意的是，当用户从/users/id1导航到/users/id2时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。 如何解决问题？ 思路1：让组件实例不再复用，强制销毁重建； 思路2：监听路由变化，变化之后执行数据更新操作； 方案一：给router-view添加key以当前路由完整路径为key的值，给router-view组件绑定 为什么用key？我们最常见的用例是与v-for结合，但是key也可以用于强制替换一个元素/组件而不是复用它。 在适当的时候触发组件的生命周期钩子 触发过渡 1<RouterView :key="$route.fullPath" /> 但是这种方法也存在问题，过于粗暴，如果每次导航都销毁组件重建，说明每次导航都要重新发送一次数据请求，如果有相同数据，则存在浪费。那怎么做到只发送需要的数据请求呢？ 方案二：使用beforeRouterUpdate导航钩 ...