森叶

JavaScript 异步与 Promise 笔记 1. JavaScript 异步机制概览1.1 执行栈与事件循环 JS 是单线程执行 执行栈（Call Stack）：存储同步任务 任务队列（Task Queue / Microtask Queue）： 宏任务（Macro Task）：setTimeout、setInterval、I/O、UI 渲染 微任务（Micro Task）：Promise.then/catch/finally、MutationObserver 事件循环（Event Loop）： 执行同步任务直到栈空 执行微任务队列 执行宏任务队列 重复循环 1.2 异步类型示意 类型 示例 队列类型 微任务 Promise.then, MutationObserver Microtask 宏任务 setTimeout, setInterval, I/O Macrotask 12345678910console.log('script start');setTimeout((...

记一次不使用代码库，手写游戏内角色点击移动（也可应用到按键移动） 代码还可优化，也可以线性插值（Lerp）算法来实现一下平滑移动代码库版本：cocos 3.8 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869import { _decorator, Component, Node, UITransform, v3 } from 'cc';const { ccclass, property } = _decorator;@ccclass('MapScript')export class MapScript extends Component {    @property(Node)    people: Node;    private MoveXInterval = null;   ...

JavaScript 拷贝笔记1. 浅拷贝浅拷贝只复制对象的第一层属性，如果属性是引用类型，拷贝的是引用地址。 12345const obj = { a: 1, b: { c: 2 } };const copy = { ...obj }; // 或 Object.assign({}, obj)copy.b.c = 3;console.log(obj.b.c); // 3，浅拷贝无法隔离引用对象 数组浅拷贝 1234const arr = [1, [2, 3]];const arrCopy = [...arr];arrCopy[1][0] = 99;console.log(arr[1][0]); // 99 2. 深拷贝深拷贝会递归复制对象及其嵌套对象，完全独立。 JSON 方法（简单对象） 1const deepCopy = JSON.parse(JSON.stringify(obj)); 手写递归深拷贝（支持循环引用） 123456789101112function deepClo...

线性插值（Lerp）算法 当涉及到线性插值时，有几个关键概念需要理解： 线性插值的基本概念： 线性插值是一种用于在两个已知数值之间生成新数值的方法。在线性插值中，生成的新值是两个已知值的加权平均。插值的过程可以在一维、二维、三维或更高维度上进行。 单位向量： 单位向量是长度为1的向量，它指向特定方向。在二维空间中，单位向量通常表示为 (cos θ, sin θ)，其中 θ 是向量与x轴的夹角。 线性插值的公式： 在二维空间中，线性插值的公式通常表示为 Lerp(A, B, t)，其中 A 和 B 是两个已知点的坐标，t 是插值因子，表示在A和B之间选择的位置。插值因子 t 通常在 [0, 1] 的范围内。在二维空间中，如果 t 为0，结果为A点；如果 t 为1，结果为B点；如果 t 在0和1之间，结果则在A和B之间插值。 应用： 线性插值广泛用于计算机图形学、动画、游戏开发等领域。在这些领域中，它通常用于在两个关键帧之间平滑地插值动画的位置、颜色、旋转等属性，以产生流畅的动画效果。 遇到过的应用在游戏中，在不使用代码库的情况下，让人物在两点之间线性运动在如下代码中： 12...

Vue 性能优化笔记1. 常见性能问题 大型列表渲染过慢 不必要的组件重渲染 频繁 watch 或计算属性计算 过度使用 v-if/v-for 2. 优化策略 v-for + key 优化1<div v-for="item in items" :key="item.id">{{ item.name }}</div> key 唯一可追踪，减少 DOM 重建 组件懒加载 1const LazyComponent = defineAsyncComponent(() => import('./MyComponent.vue')); 列表虚拟化 只渲染可视区域节点，减少 DOM 可使用 vue-virtual-scroll-list 或自定义虚拟滚动 避免不必要的 watch watchEffect 自动追踪依赖，减少手动依赖计算123watchEffect(() => { console.log(sta...

JavaScript 性能优化笔记1. 常见性能问题 频繁操作 DOM：每次操作 DOM 都会触发重排与重绘。 大数组循环：高复杂度循环影响渲染。 闭包滥用：内存占用大，可能导致泄漏。 递归深度大：可能导致调用栈溢出。 2. 优化策略 DOM 操作最小化 1234567891011// 不推荐for (let i = 0; i < 1000; i++) { document.body.appendChild(createDiv(i));}// 推荐：使用 DocumentFragment 批量操作const fragment = document.createDocumentFragment();for (let i = 0; i < 1000; i++) { fragment.appendChild(createDiv(i));}document.body.appendChild(fragment); 防抖和节流 防抖：适合输入搜索、resize1234567function debounce(fn, d...

前端安全笔记1. 常见问题 XSS（跨站脚本） CSRF（跨站请求伪造） 本地存储敏感数据泄露 2. 防护策略 XSS 防护 输出编码（v-html 警惕）12const div = document.createElement('div');div.textContent = userInput; // 安全输出 CSRF 防护 使用 token 验证请求来源 SameSite Cookie 设置 敏感信息保护 不在 localStorage / sessionStorage 存储敏感信息 使用 HttpOnly Cookie

Vue 生命周期 & Hook1. Options API 生命周期 Hook 名称 时机 beforeCreate 实例初始化之后，数据观测与事件配置之前 created 实例已创建，数据观测和方法可用 beforeMount 模板编译前，挂载之前 mounted 挂载完成，DOM 可操作 beforeUpdate 数据变化，但 DOM 未更新 updated 数据变化，DOM 更新完成 beforeUnmount 卸载之前 unmounted 卸载完成 2. Composition API123456789101112131415161718import { ref, reactive, onMounted, watch } from 'vue';export default { setup(props) { const count = ref(0); const state = reactive({ name: '...

虚拟 DOM 笔记1. 概念 JS 对象表示真实 DOM 的结构 减少直接操作 DOM 提升性能 2. 原理 创建虚拟节点树（VNode） 数据更新 -> 生成新 VNode 树 对比旧树 -> 生成最小差异 patch patch 应用到真实 DOM 3. 示例1234567const vnode = { tag: 'div', props: { id: 'app' }, children: [ { tag: 'span', children: ['Hello'] } ]}

Vue Hooks & 高级操作1. 自定义 Hook12345678import { ref, onMounted } from 'vue';export function useCounter() { const count = ref(0); const increment = () => count.value++; onMounted(() => console.log('hook mounted')); return { count, increment };} 2. watch 与 watchEffect watch：监听特定数据变化 1watch(() => state.value, (newVal, oldVal) => { ... }) watchEffect：自动追踪依赖数据 123watchEffect(() => { console.log(stat...