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









