三月的一天-CSDN博客

原创 Three.js机器人与星系动态场景（四）：封装Threejs业务组件

实际在写业务的时候不会在每个组件里都写几十行的threejs的初始化工作。我们可以将通用的threejs的场景、相机、render、轨道控制器等进行统一初始化。同时将非主体的函数提到组件外部，通过import导入进组件。将业务逻辑主体更清晰一些。下面的代码是基于react+threejs开发，感兴趣可以看看之前的博客关于这部分详细的介绍。

2024-07-08 09:03:17 505

原创 Three.js机器人与星系动态场景（三）：如何实现动画

在前面的博客中分别介绍了如何快速搭建3D交互场景以及通过坐标辅助工具加深对坐标系的理解。本文将继续探讨其中动画实现的细节。通过调整rotation加深对动画的印象。动画说白了就是一张张照片，连起来依次展示，这样就形成一个动画效果，只要帧率高，人的眼睛就感觉不到卡顿，是连续的视频效果。实现上述效果只需要添加如下动画，在动画中给物体旋转增加一个正向或负向的增量，在方法中调用自身达到一个循环。

2024-07-04 15:20:35 949

原创 Three.js机器人与星系动态场景（二）：强化三维空间认识

在上篇博客中介绍了如何快速利用react搭建three.js平台，并实现3D模型的可视化。本文将在上一篇的基础上强化坐标系的概念。引入AxesHelper辅助工具，带你快速理解camer、坐标原点、可视区域。引入字体标签辅助坐标系，并让字体使用朝向用户

2024-07-03 11:16:48 785

原创使用React复刻ThreeJS官网示例——keyframes动画

最近在看three.js相关的东西，想着学习一下threejs给的examples。源码是用html结合js写的，恰好最近也在学习react，就用react框架学习一下。本文参考的是threeJs给的第一个示例。

2024-07-01 16:02:52 1039

原创 Three.js机器人与星系动态场景：实现3D渲染与交互式控制

使用Three.js库构建了一个交互式的3D场景。组件中创建了一个机器人模型，包括头部、眼睛、触角、身体和四肢，以及两个相同的机器人实例以实现动态效果。场景中还加入了粒子效果，模拟星系环境，增强了视觉效果。通过OrbitControls，用户可以对机器人进行旋转控制。组件在渲染时会根据用户界面的变化动态调整渲染，并在指定的div容器中显示。整体上，这个组件提供了一个基础的3D动画展示和用户交互的框架。

2024-07-01 09:34:55 1246

原创 Vue3组件库开发项目实战——03封装Button组件/输出vitePress文档

对于Button的封装是很简单的，核心就是button.tsx文件，创建一个可定制样式的按钮组件 UButton，根据传入的 props 动态渲染按钮的样式和行为。比较复杂的就是样式的定义，对于一个Button组件，我们写了很多css的样式，定义变量、全局的、局部的变量。其实组件库开发就是干这几件事：写样式、定义父子通信、插槽然后组件库开发还涉及到组件的结构设计、文档编写、测试等方面。综合考虑这些方面，可以开发出功能完善、易用且易维护的组件库。

2024-05-14 21:08:14 807 3

原创 Vue3组件库开发项目实战——02项目搭建（配置Eslint/Prettier/Sass/Tailwind CSS/VitePress/Vitest）

在现代前端开发中，构建一个高效、可维护且易于协作的开发环境至关重要。特别是在开发Vue3组件库时，我们需要确保代码的质量、一致性和文档的完整性。本文将带你从0搭建vue3组件库开发环境，以下是配置代码规范、格式化、CSS样式工具、文档工具、单元测试技术选型的必要性。

2024-05-11 18:05:32 1230

原创 Vue3组件库开发项目实战——01组件开发必备知识导学

组件化开发的重要性：在现代前端开发中，组件化已经成为一种标准实践。组件化允许开发者将复杂的用户界面分解成小的、独立的、可复用的部分。通过解决组件开发中的问题，开发者可以学习到如何处理数据流、状态管理、事件处理等关键概念。组件库的开发往往需要考虑如何组织代码、如何进行模块化、如何处理依赖管理等工程问题。这些实践有助于提升工程架构能力，使开发者能够构建出可扩展、可维护的大型应用。

2024-05-10 23:39:40 1243

原创 JavaScript原理篇——Promise原理及笔试题实战演练

你真的完全了解promise吗，请输出以下代码题的结果答案：如果你回答的和答案不一致，请务必接收下面的Promise解题指南。

2024-05-10 13:44:09 919 2

原创 JavaScript原理篇——理解对象、构造函数、原型、继承

在JavaScript中，几乎所有的东西都是对象，包括基本数据类型的包装对象。对象是属性的集合，每个属性都有一个键和一个值。对象可以通过字面量、构造函数或Object.create()等方式创建。:构造函数是用来创建对象的函数，通过new关键字调用构造函数可以创建对象实例。构造函数可以定义对象的属性和方法，实例化后的对象可以共享构造函数中定义的方法。:每个JavaScript对象都有一个原型对象，可以通过__proto__访问。原型是对象的模板，包含对象共享的属性和方法。构造函数的prototype。

2024-05-09 15:31:41 578

原创 JavaScript手写专题——图片懒加载、滚动节流、防抖手写

在一些图片量比较大的网站（比如电商网站首页，或者团购网站、小游戏首页等），如果我们尝试在用户打开页面的时候，就把所有的图片资源加载完毕，那么很可能会造成白屏、卡顿等现象，因为图片真的太多了，一口气处理这么多任务，浏览器做不到啊！我们再想，用户真的需要这么多图片吗？不对，用户点开页面的瞬间，呈现给他的只有屏幕的一部分（我们称之为首屏）。只要我们可以在页面打开的时候把首屏的图片资源加载出来，用户就会认为页面是没问题的。至于下面的图片，我们完全可以等用户下拉的瞬间再即时去请求、即时呈现给他。

2024-05-09 13:33:35 947 1

原创 JavaScript原理篇——深入理解作用域、作用域链、闭包、this指向

执行上下文描述了代码执行时的环境，包括变量对象、作用域链和 this 值；而作用域则决定了变量和函数的可访问性范围，分为全局作用域和局部作用域。变量对象用于存储变量和函数声明：是与执行上下文相关联的数据结构，用于存储在上下文中定义的变量、函数声明和形参等信息。作用域链用于解析标识符的查找路径：是 JavaScript 中用于解析标识符（变量名）的机制，它由多个执行上下文的变量对象组成的链表结构。当代码在某个执行上下文中查找变量时，会首先查找当前上下文的变量对象，如果找不到，则会沿着作用域链向上一级上

2024-04-26 00:57:21 784 1

原创 vue源码解析——diff算法/双端比对/patchFlag/最长递增子序列

虚拟dom——virtual dom，提供一种简单js对象去代替复杂的 dom 对象，从而优化 dom 操作。virtual dom 是“解决过多的操作 dom 影响性能”的一种解决方案。virtual dom 很多时候都不是最优的操作，但它具有普适性，在效率、可维护性之间达到平衡。diff 算法是一种优化手段，将前后两个模块进行差异化比较，修补(更新)差异的过程叫做 patch，也叫打补丁。只有当新旧子节点的类型都是多个子节点时，核心 Diff 算法才派得上用场。diff的目的是时间换空间：尽可能通

2024-04-14 21:39:10 1266

原创 vue源码解析——v-if和v-for哪个优先级高，如何避免两者同时使用

官方不推荐v-if和v-for在同一个元素上使用。其次，如果两者同时使用，v-if和v-for的优先级怎么确定？在vue2和vue3中这两者的优先级顺序不一样。vue2是v-for优先，条件不存在时也会渲染多个注释节点。在vue3中进行了改进，v-if优先级高。在vue3中，v-if在编译阶段进行了静态节点提升，所以在v-for遍历每个节点，v-if对单个节点判断，这种情况会报错。不管是vue2还是vue3，都推荐，将v-for遍历的数组用计算属性改写，根据v-if依赖的条件返回过滤后的数组。

2024-04-10 12:33:45 1250

原创 javaScript手写专题——实现instanceof/call/apply/bind/new的过程/继承方式

手写实现函数的三种调用方式：call、apply 和 bind；手写new的过程；手写类的继承包括原型链继承、构造函数继承和组合继承

2024-04-08 21:10:03 1509

原创 javaScript手写专题——防抖/节流/闭包/Promise/深浅拷贝

本文介绍了面试中常见的手写JS场景题目：如手写防抖、节流；手写Promise封装、手写深拷贝浅拷。手写深拷贝需要考虑很多细节，需要根据具体情况来进行处理。在前面的实现中，我们已经考虑了一些常见的情况，但是还有很多其他的情况需要考虑。在手写深拷贝时，需要考虑以下几种场景：特殊的对象：正则表达式、日期对象、Error 对象，使用构造函数创建新的对象Fuction对象：对象可能会有函数属性，例如构造函数或方法，这种情况下需要将函数原样复制过来，而不是执行函数。特殊类型：symbol迭代复制：Map

2024-04-07 15:57:31 1131

原创 vue2/vue3手写专题——实现双向绑定/响应式拦截/虚拟DOM/依赖收集

手写双向绑定，真实DOM转虚拟DOM，虚拟DOM渲染为真实DOM，vue2响应式和vue3响应式简单实现，vue2的依赖收集实现。

2024-04-06 20:51:26 1102

原创 vue2/vue3手写专题——实现父子组件通信、祖先通信的方法

Vue 组件通信可以使用以下几种方法：父组件向子组件传递数据：使用 props 将数据从父组件传递给子组件，子组件可以通过 props 接收和使用数据。子组件向父组件传递数据：使用 $emit 触发自定义事件，父组件可以通过事件监听器来接收数据。非父子组件之间的通信：使用一个中央事件总线或 Vuex 状态管理库来管理和共享数据。通过 provide 和 inject 传递数据：在父组件中使用 provide 提供数据，在子组件中使用 inject 注入数据，可以实现

2024-04-06 18:42:47 721

原创 vue2源码解析——vue中如何进行依赖收集、响应式原理

vue每个组件实例vm都有一个渲染watcher。每个响应式对象的属性key都有一个dep对象。所谓的依赖收集，就是让每个属性记住它依赖的watcher。但是属性可能用在多个模板里，所以，一个属性可能对应多个watcher。因此，在vue2中，属性要通过dep对象管理属性依赖的watcher。在初始化时编译器生成render函数，此时触发属性的依赖收集dep.depend。组件挂载完成后，操作页面，当数据变化后，对应的响应时对象会调用dep.notify方法通知自己对应的watcher更新。

2024-04-03 22:22:22 1295

原创 vue2源码解析——new Vue()这个过程究竟做了什么？

new Vue() 是 Vue.js 框架中用于创建根 Vue 实例的语法。当我们使用 Vue.js 构建一个单页面应用时，通常会先创建一个根 Vue 实例，然后在该实例中定义应用的数据、方法、计算属性等，以及挂载根组件。具体来说，new Vue() 的作用是：创建一个 Vue 实例，该实例代表整个 Vue 应用的根实例。通过传入的选项对象来配置该 Vue 实例，包括数据、计算属性、方法、生命周期钩子函数等。将该 Vue 实例挂载到一个真实的 DOM 元素上，使得应用

2024-04-02 21:13:11 1083

原创 vue源码解析——vue如何将template转换为render函数

Vue 将模板（template）转换为渲染函数（render function）是 Vue 编译器的核心功能，它是 Vue 实现响应式和虚拟 DOM 的关键步骤。在 Vue 中，模板（template）是开发者编写的类似 HTML 的代码，用于描述页面的结构和交互逻辑。渲染函数（render function）是 Vue 编译器将模板转换为JavaScript 函数，用于生成虚拟 DOM，并最终渲染到页面上。vue模板渲染是个很复杂的过程，牵扯vue的响应式和虚拟dom。

2024-04-02 14:13:43 1489

原创 vue3源码解析——watch和watchEffect区别

在这部分源码分析中，用了很长的篇幅取介绍doWatch的实现，因为watch和watchEffect都调用了doWatch，只是第二个参数不同，watchEffect传入的是null，watch传入的是cb。doWatch干了什么事情呢？首先由要收集数据依赖，收集的是哪写属性呢？source传入的可能是ref\reactive属性、数组或者函数，这个时候需要对source进行计算，看最终依赖的是什么东西？通过定义一个getter函数，根据source类型不同，得到监听数据最后的执行结果。怎么收集数据依赖呢。

2024-03-31 14:02:06 1469

原创 vue3源码解析——ref和reactive定义响应式的区别

ref 和 reactive 是 Vue 3.0 中用于定义响应式数据的两个新 API。它们有以下区别：ref 定义单个响应式数据数据类型可以是任意类型。它通常用于定义原始数据类型为响应式数据。返回一个响应式对象，该对象包含一个 .value 属性，可用于获取和设置数据。底层采用Object.defineProperty()实现reactive 定义多个响应式数据数据类型必须是对象返回一个响应式对象，必须使用响应式对象来获取属性和设置数据

2024-03-29 23:39:09 1296

原创 vue源码解析—— watch/computed的实现逻辑和区别

watch和computed是 Vue 中的两个重要的响应式属性，它们在实现机制和使用上存在一些区别。watchdeepimmediatecomputedgetsetVue 2 中，使用来实现数据响应式，并且在数据变化时通过getter函数来依赖收集和发布订阅。在 Vue 3 中，使用Proxy来实现数据响应式，并且在数据变化时通过get函数来依赖收集和发布订阅。这也导致了在源码实现上vue2和vue3的不同。

2024-03-29 15:43:35 1221

原创 vue源码解析——v-if和v-show各自是如何实现的元素的隐藏

在Vue.js中，v-if和v-show是常用的指令，用于控制元素的显示和隐藏。虽然它们都可以隐藏元素，但实现的方式略有不同。在这篇博客中，我们将深入探讨v-if和v-show各自是如何实现元素的隐藏的。

2024-03-29 10:51:24 978

原创 vue2源码解析——Vue.set/$set方法如何给响应式对象添加属性

在Vue 2中需要向响应式对象添加新属性时，可以使用Vue.set或$set方法来实现。这两个方法的作用是向响应式对象添加属性并确保这个新属性也是响应式的。vue.set方法首先会区分是对数组还是对象进行新增属性。，利用vue2改写后的splice方法进行元素插入（此时$set是向数组里新增一个元素）。对象本身没有这个key。考虑对象是否为响应式对象。如果是响应式对象，调用defineReactive给当前对象的key增加响应式依赖。对象不是响应式的，直接给对象加属性，不用考虑响应式问题。

2024-03-28 19:04:41 986

原创 leetcode刷题（javaScript）——回溯、递归、dfs相关场景题总结

递归通常用于解决可以被分解为相同问题的子问题的情况，通过不断调用自身来解决问题。当涉及到回溯、递归、深度优先搜索（DFS）相关的场景题时，通常可以将它们放在一起综合考虑，因为它们之间有一定的联系和相互影响。以下是一些相关的LeetCode场景题以及解题技

2024-03-24 10:24:29 687

原创 leetcode刷题（javaScript）——BFS广度优先遍历相关场景题总结

广度优先搜索（BFS）在JavaScript编程中有许多实际应用场景，特别是在解决图、树等数据结构相关问题时非常常见。在JavaScript中，可以使用队列来实现广度优先搜索算法。通过将起始节点加入队列，然后迭代地将节点的邻居节点加入队列，直到队列为空为止。这样可以逐层地遍历图或树结构，找到目标节点或满足条件的节点。在实际编程中，需要注意避免重复访问节点、处理环路等问题，确保算法的正确性和效率。上题：可以按照博主的列的题目顺序依次练习，二叉树的简单，图论的难，但是做题技巧比较固定。

2024-03-21 18:26:50 737

原创 javaScript——BFS结合队列求迷宫最短路径

思路：采用广度优先搜索的方式，尝试让某个点朝四个方向各走一步，如果都能走通，将这些路径和步长入队。假设由两个点分别向下、向右走一步都到了终点，并且两者的step相等，那么，先遍历的也就是向下的这个路径作为目标输出。问题描述：由m*n的矩阵构成了一个迷宫，矩阵中为1的元素表示障碍物，不能走，为0表示可以走。从第一个点开始，将它shift出去，然后尝试向四周走一步，如果走的通，将那个节点和路径信息入队，依次遍历所有方向。数组中每项存储的是当前遍历的节点座标，走到该节点的步长，节点携带的路径数组。

2024-03-20 16:16:00 418

原创 fixed定位既然相对于屏幕视口定位，为什么在滚动时不生效

当你设置一个元素为fixed定位时，它的位置会相对于浏览器窗口的可视区域进行计算。因此，无论页面如何滚动，该元素都会保持在固定的位置上，不会随滚动而移动。fixed定位是一种CSS属性，用于将元素相对于浏览器窗口进行定位，而不是相对于其父元素。它会使元素固定在屏幕上的某个位置，不会随页面滚动而改变位置。示例，给搜索框固定在网页上方，但是在鼠标向下滚动时，搜索框会消失。这是内容区域的z-index比搜索框默认的z-index大。给搜索框坐在样式加上较大的z-index即可。

2024-03-19 17:28:23 598

原创 leetcode刷题（javaScript）——动态规划相关场景题总结

动态规划在 JavaScript 刷题中有一定的难度，但也是非常常见和重要的算法思想。动态规划通常适用于需要求解最优解、最大值、最小值等问题的场景，可以将复杂问题拆分成子问题，通过存储子问题的解来避免重复计算，从而提高效率。理解问题的状态转移方程：动态规划的核心是找到问题的状态转移方程，即如何从子问题的解推导出更大规模问题的解。理解问题的状态转移方程是解决动态规划问题的关键。定义合适的状态数组：在解决动态规划问题时，通常需要定义一个状态数组来存储子问题的解。确保状态数组的定义清晰

2024-03-18 17:52:31 1174

原创 leetcode刷题（javaScript）——分治思想（二分查找、快速排序）相关场景题总结

分治思想是一种将问题分解成更小的子问题，然后解决子问题并将结果合并的算法设计策略。二分查找、快速排序和折半查找都属于分治思想的经典算法。在leetcode里，分治思想一般结合其他场景出现，构成复合型题目。但是在看题时一定要了解能否用分治思想去解决题目，避免使用复杂度过高的暴力解决方式；尤其是看到强调时间复杂度为O(logn)实现，那很可能是二分法了。在实现这些分治算法时，通常会遵循以下逻辑：分解（Divide）：将原始问题分解成更小的子问题。

2024-03-13 23:00:16 1161 1

原创 leetcode刷题（javaScript）——堆相关场景题总结

堆是什么？堆都能用树表示，并且一般树的实现都是利用链表。平时使用的最多的是二叉堆，它可以用完全二叉树表示，二叉堆易于存储，并且便于索引。在堆的实现时注意：因为是数组，所以父子节点的关系就不需要特殊的结构去维护了，索引之前通过计算就可以得到，省掉了很多麻烦，如果是链表结构，就会复杂很多。在JavaScript刷题中，堆（Heap）通常用于解决一些需要高效处理优先级的问题，例如找出最大或最小的K个元素、实现优先队列等。：通过维护一个大小为K的最大堆或最小堆，可以快速找出数组中最大或最小的K个元素。

2024-03-13 14:58:47 980 1

原创图解js原型、原型链、构造函数直接的关系（简单易懂）

对象的原型：对象通过.__proto__找到对象的原型构造函数的原型：构造函数.prototype每个原型都有自己的原型：如Person.prototype.__proto__指向Object的原型js中所有的对象都继承自Object；Object的原型指向为null到此，一个由__proto__指针串起来的原型链就产生了。这里你可以将__proto__理解为链表中的next指针，通过__proto__向上找到对象或构造函数的原型，链表的最后节点是Object，它的__proto__是null。

2024-03-12 15:45:03 980

原创深入理解 CSS——CSS进阶与实践（5w字高频面试题整理）

本文总结了CSS高频面试题，并搭配了演示动画进行CSS样式演示。介绍了关于如何理解盒模型，如何实现块级元素水平居中，如何实现两侧固定中间自适应的三栏布局、如何实现两栏布局，如何进行响应式设计，对BFC的理解，flex布局和grid布局的适配场景，如何获取奇数节点/偶数节点，单行及多行文本溢出解决，如何绘制三角形，常见表示单位长度的em/px/rem/vh/vw的区别，隐藏页面元素的方式及区别，如何清除浮动，如何解决margin塌陷，设备像素/物理像素/CSS像素的区别，选择器类型优先级和权重，如何让chr

2024-03-11 22:20:57 251

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

复杂网络——无标度网络BA的C++代码实现及python可视化操作，度分布实现.docx

软件工程实验报告.docx

计算机组成原理实验指导书.pdf

综合实验报告.docx

空空如也