- 博客(180)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 有限元分析结果可视化——如何使用顶点、片元着色器实现有限元网格的动态色彩、渐变色效果
基于有限元剖分的网格需要根据顶点的某些属性（比如压力、温度、位移）等给顶点添加颜色，从而有直观的数值强度变化趋势。threejs本身自带的material材质是没有这个功能的。本文通过一个立方体堆叠案例，展示了 React Three.js 中顶点着色器的核心用法。这种方法特别适合：有限元分析结果可视化（应力 / 应变云图）建筑信息模型（BIM）的构件着色科学计算数据的 3D 可视化
2025-03-13 17:10:14
943
原创 3D模型网格剖分——如何使用threejs绘制单元面三角形边(以react框架为例）
背景：项目里需要对有限元输出的3d模型进行网格绘制。已知有限元输出的单元面索引信息：三个顶点组成的三角形为一个单元面，索引数组中相邻的三个节点为一个单元面。已知顶点信息、顶点坐标信息；项目的其中一个需求是根据以上信息绘制单元面。也即绘制几何表面的网格。这里的网格并不是几何的框线显示，还是显示所有的三角形面。所以仅用three的BufferGeometry创建几何显示为线框是不行的。因此项目的难点：1.如何绘制三角形2.绘制三角形需要哪些数据。
2025-03-12 11:31:10
752
原创 3D模型网格剖分——如何将有限元剖分的网格应用到Three.js模型中
设置 Three.js 的场景、相机和渲染器，并将网格对象添加到场景中。将有限元剖分的数据转换为 Three.js 可以使用的格式，通常是。有限元剖分的数据通常包含节点（顶点）信息和单元（面）信息。选择合适的材质来定义模型的外观。将几何体和材质组合成一个网格对象。使用渲染循环来不断更新和渲染场景。来创建一个简单的材质。所需的顶点和面数据。
2025-03-03 14:35:05
679
原创 揭秘前端大屏项目：如何精准将设计稿转化为适配全屏幕的完美页面
项目里陆续做好两三次大屏项目，总结了一些开发经验。大屏通常用于展示数据，比如监控中心或者展览，屏幕尺寸多样，可能有超宽比例，比如16:9或者更宽。设计稿通常只提供一个固定尺寸，如何在各种屏幕上完美呈现是关键。需要视口单位、rem、vw/vh的应用，以及如何保持元素比例和布局。
2025-03-03 10:21:58
820
原创 数据驱动未来：数学建模中的大数据收集全攻略
简单和通用的数据集在数学建模中，获得大量数据集是至关重要的，因为这些数据可以帮助你验证模型的有效性，并使模型更加精确。本文从简单通用的数据集、大型数据集、预测建模与机器学习数据集、图像分类数据集、文本分类数据集、推荐引擎数据集、数据集网站等介绍数据集。该方式适用与复杂网络、图像识别、机器学习、数学建模等领域所需的数据。：互联网上有许多提供公开数据集的平台，如UCI机器学习库（：许多国家和地方政府部门会发布公共数据，例如人口统计数据、经济指标等。此外，一些研究机构和非营利组织也会公开他们的研究成果和数据。
2025-02-24 10:15:15
68
原创 手把手教你用React搭建Markdown博客编辑器：表格、公式、目录一网打尽
实现在线md编辑器及md文档渲染。展示标题、图片、表格、公式；并提取标题生成目录，支持目录跳转、滚动高亮目录需求。考虑到多个案例，并且案例可能多次修改，我决定弄一个markdown编辑器，让公司产品可以在编辑器自由发挥，然后在案例展示页根据需求展示markdown文本。我调研了一些常用的react的markdown编辑器，选择了react-markdown-editor-lite组件作为编辑器工具。react-markdown组件进行编辑器md文本以及案例展示页文本解析。
2025-02-24 09:19:17
1241
原创 Vue转React开发经验分享——函数式组件如何在父组件中通过获取子组件实例调用子组件方法，forwardRef与useImperativeHandle用法指南
为了防止错用/滥用导致ref失控，React限制默认情况下，不能跨组件传递ref为了破除这种限制，可以使用forwardRef。为了减少ref对DOM的滥用，可以使用限制ref传递的数据结构。
2024-10-11 15:17:37
495
原创 如何利用js操作复杂css布局，实现元素的显示隐藏，并自适应宽高
在大多数业务场景中我们使用的都是固定布局，即使是flex布局也是固定好的，顶多是一侧固定宽度，剩余自适应缩放。但是有些场景可能需要对窗口进行拆分，比如，设置一个分屏，将内容区域一分为二。或者，将屏幕动态的拆分为不规则行列布局，比如左侧一列，右侧垂直等分两行等布局。这种场景要利用js去改变元素的css样式了。主要是操作dom，获取dom元素，给dom加style或class。复杂的css布局，除了获取要改变元素自身的dom节点，还可能操作兄弟节点，或者父级节点。因为自身定位的改变也会影响其他元素。
2024-10-11 11:09:14
672
原创 为什么react副作用函数叫hooks钩子函数，副作用指的是什么
React 中的副作用函数被称为 "hooks"（钩子），主要是因为它们允许开发者在函数组件中 "钩入"（hook into）React 的状态管理和生命周期。与vue强组件生命周期绑定不同，react推崇的函数式编程，函数本身是纯函数，没有生命周期这种东西，但是数据的管理却可以通过引入react本身提供的钩子函数实现。用钩子赋予函数无法实现的缺陷。这个命名灵感来源于函数式编程中的钩子（hook）概念，钩子是一种在不修改原有代码的情况下，允许你注入自定义逻辑的机制。
2024-10-11 10:23:09
1366
原创 Vue转React开发经验分享——hooks写法如何触发react生命周期、如何触发数据更新？
习惯了vue的写法，并且vue2和vue3都比较熟悉，在转react开发中，不停的思考react和vue框架的相似之处，以及vue中的写法在react里怎么替换。本文将组件更新或组件生命周期角度出发聊聊如何使用hooks触发生命周期，以及如何触发数据更新。
2024-09-12 14:16:44
1340
原创 Vue转React踩坑记录——useEffect组件卸载时使用useState定义的值返回undefined
在vue数据是响应式的，卸载时不会出现数据已经赋值但是卸载是undefined情况，除非手动更改为undefined。而在react流行的hooks写法，你要一直操作数据，react提供的useEffect方法的return 里其实就像vue的unMounted生命周期，一些组件卸载时的清理工作都写在retrun里。然而，在卸载的时候要清理的方法一直报undefined。
2024-09-02 10:23:35
1169
原创 Three.js机器人与星系动态场景（四）：封装Threejs业务组件
实际在写业务的时候不会在每个组件里都写几十行的threejs的初始化工作。我们可以 将通用的threejs的场景、相机、render、轨道控制器等进行统一初始化。同时将非主体的函数提到组件外部，通过import导入进组件。将业务逻辑主体更清晰一些。下面的代码是基于react+threejs开发，感兴趣可以看看之前的博客关于这部分详细的介绍。
2024-07-08 09:03:17
727
原创 Three.js机器人与星系动态场景（三）：如何实现动画
在前面的博客中分别介绍了如何快速搭建3D交互场景以及通过坐标辅助工具加深对坐标系的理解。本文将继续探讨其中动画实现的细节。通过调整rotation加深对动画的印象。动画说白了就是一张张照片，连起来依次展示，这样就形成一个动画效果，只要帧率高，人的眼睛就感觉不到卡顿，是连续的视频效果。实现上述效果只需要添加如下动画，在动画中给物体旋转增加一个正向或负向的增量，在方法中调用自身达到一个循环。
2024-07-04 15:20:35
1205
原创 Three.js机器人与星系动态场景（二）：强化三维空间认识
在上篇博客中介绍了如何快速利用react搭建three.js平台，并实现3D模型的可视化。本文将在上一篇的基础上强化坐标系的概念。引入AxesHelper辅助工具，带你快速理解camer、坐标原点、可视区域。引入字体标签辅助坐标系，并让字体使用朝向用户
2024-07-03 11:16:48
1122
原创 使用React复刻ThreeJS官网示例——keyframes动画
最近在看three.js相关的东西，想着学习一下threejs给的examples。源码是用html结合js写的，恰好最近也在学习react，就用react框架学习一下。本文参考的是threeJs给的第一个示例。
2024-07-01 16:02:52
1836
1
原创 Three.js机器人与星系动态场景：实现3D渲染与交互式控制
使用Three.js库构建了一个交互式的3D场景。组件中创建了一个机器人模型，包括头部、眼睛、触角、身体和四肢，以及两个相同的机器人实例以实现动态效果。场景中还加入了粒子效果，模拟星系环境，增强了视觉效果。通过OrbitControls，用户可以对机器人进行旋转控制。组件在渲染时会根据用户界面的变化动态调整渲染，并在指定的div容器中显示。整体上，这个组件提供了一个基础的3D动画展示和用户交互的框架。
2024-07-01 09:34:55
1662
原创 Vue3组件库开发项目实战——03封装Button组件/输出vitePress文档
对于Button的封装是很简单的，核心就是button.tsx文件，创建一个可定制样式的按钮组件 UButton，根据传入的 props 动态渲染按钮的样式和行为。比较复杂的就是样式的定义，对于一个Button组件，我们写了很多css的样式，定义变量、全局的、局部的变量。其实组件库开发就是干这几件事：写样式、定义父子通信、插槽然后组件库开发还涉及到组件的结构设计、文档编写、测试等方面。综合考虑这些方面，可以开发出功能完善、易用且易维护的组件库。
2024-05-14 21:08:14
1307
3
原创 Vue3组件库开发项目实战——02项目搭建（配置Eslint/Prettier/Sass/Tailwind CSS/VitePress/Vitest）
在现代前端开发中，构建一个高效、可维护且易于协作的开发环境至关重要。特别是在开发Vue3组件库时，我们需要确保代码的质量、一致性和文档的完整性。本文将带你从0搭建vue3组件库开发环境，以下是配置代码规范、格式化、CSS样式工具、文档工具、单元测试技术选型的必要性。
2024-05-11 18:05:32
1692
原创 Vue3组件库开发项目实战——01组件开发必备知识导学
组件化开发的重要性：在现代前端开发中，组件化已经成为一种标准实践。组件化允许开发者将复杂的用户界面分解成小的、独立的、可复用的部分。通过解决组件开发中的问题，开发者可以学习到如何处理数据流、状态管理、事件处理等关键概念。组件库的开发往往需要考虑如何组织代码、如何进行模块化、如何处理依赖管理等工程问题。这些实践有助于提升工程架构能力，使开发者能够构建出可扩展、可维护的大型应用。
2024-05-10 23:39:40
1868
原创 JavaScript原理篇——Promise原理及笔试题实战演练
你真的完全了解promise吗，请输出以下代码题的结果答案：如果你回答的和答案不一致，请务必接收下面的Promise解题指南。
2024-05-10 13:44:09
1174
2
原创 JavaScript原理篇——理解对象、构造函数、原型、继承
在JavaScript中，几乎所有的东西都是对象，包括基本数据类型的包装对象。对象是属性的集合，每个属性都有一个键和一个值。对象可以通过字面量、构造函数或Object.create()等方式创建。:构造函数是用来创建对象的函数，通过new关键字调用构造函数可以创建对象实例。构造函数可以定义对象的属性和方法，实例化后的对象可以共享构造函数中定义的方法。:每个JavaScript对象都有一个原型对象，可以通过__proto__访问。原型是对象的模板，包含对象共享的属性和方法。构造函数的prototype。
2024-05-09 15:31:41
672
原创 JavaScript手写专题——图片懒加载、滚动节流、防抖手写
在一些图片量比较大的网站（比如电商网站首页，或者团购网站、小游戏首页等），如果我们尝试在用户打开页面的时候，就把所有的图片资源加载完毕，那么很可能会造成白屏、卡顿等现象，因为图片真的太多了，一口气处理这么多任务，浏览器做不到啊！我们再想，用户真的需要这么多图片吗？不对，用户点开页面的瞬间，呈现给他的只有屏幕的一部分（我们称之为首屏）。只要我们可以在页面打开的时候把首屏的图片资源加载出来，用户就会认为页面是没问题的。至于下面的图片，我们完全可以等用户下拉的瞬间再即时去请求、即时呈现给他。
2024-05-09 13:33:35
1134
1
原创 JavaScript原理篇——深入理解作用域、作用域链、闭包、this指向
执行上下文描述了代码执行时的环境，包括变量对象、作用域链和 this 值；而作用域则决定了变量和函数的可访问性范围，分为全局作用域和局部作用域。变量对象用于存储变量和函数声明：是与执行上下文相关联的数据结构，用于存储在上下文中定义的变量、函数声明和形参等信息。作用域链用于解析标识符的查找路径：是 JavaScript 中用于解析标识符（变量名）的机制，它由多个执行上下文的变量对象组成的链表结构。当代码在某个执行上下文中查找变量时，会首先查找当前上下文的变量对象，如果找不到，则会沿着作用域链向上一级上
2024-04-26 00:57:21
1252
3
原创 vue源码解析——diff算法/双端比对/patchFlag/最长递增子序列
虚拟dom——virtual dom，提供一种简单js对象去代替复杂的 dom 对象，从而优化 dom 操作。virtual dom 是“解决过多的操作 dom 影响性能”的一种解决方案。virtual dom 很多时候都不是最优的操作，但它具有普适性，在效率、可维护性之间达到平衡。diff 算法是一种优化手段，将前后两个模块进行差异化比较，修补(更新)差异的过程叫做 patch，也叫打补丁。只有当新旧子节点的类型都是多个子节点时，核心 Diff 算法才派得上用场。diff的目的是时间换空间：尽可能通
2024-04-14 21:39:10
2641
原创 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
1626
原创 javaScript手写专题——实现instanceof/call/apply/bind/new的过程/继承方式
手写实现函数的三种调用方式：call、apply 和 bind；手写new的过程；手写类的继承包括原型链继承、构造函数继承和组合继承
2024-04-08 21:10:03
1752
原创 javaScript手写专题——防抖/节流/闭包/Promise/深浅拷贝
本文介绍了面试中常见的手写JS场景题目：如手写防抖、节流；手写Promise封装、手写深拷贝浅拷。手写深拷贝需要考虑很多细节，需要根据具体情况来进行处理。在前面的实现中，我们已经考虑了一些常见的情况，但是还有很多其他的情况需要考虑。在手写深拷贝时，需要考虑以下几种场景：特殊的对象：正则表达式、日期对象、Error 对象，使用构造函数创建新的对象Fuction对象：对象可能会有函数属性，例如构造函数或方法，这种情况下需要将函数原样复制过来，而不是执行函数。特殊类型：symbol迭代复制：Map
2024-04-07 15:57:31
1597
原创 vue2/vue3手写专题——实现双向绑定/响应式拦截/虚拟DOM/依赖收集
手写双向绑定，真实DOM转虚拟DOM，虚拟DOM渲染为真实DOM，vue2响应式和vue3响应式简单实现，vue2的依赖收集实现。
2024-04-06 20:51:26
1288
原创 vue2/vue3手写专题——实现父子组件通信、祖先通信的方法
Vue 组件通信可以使用以下几种方法：父组件向子组件传递数据：使用 props 将数据从父组件传递给子组件，子组件可以通过 props 接收和使用数据。子组件向父组件传递数据：使用 $emit 触发自定义事件，父组件可以通过事件监听器来接收数据。非父子组件之间的通信：使用一个中央事件总线或 Vuex 状态管理库来管理和共享数据。通过 provide 和 inject 传递数据：在父组件中使用 provide 提供数据，在子组件中使用 inject 注入数据，可以实现
2024-04-06 18:42:47
1029
原创 vue2源码解析——vue中如何进行依赖收集、响应式原理
vue每个组件实例vm都有一个渲染watcher。每个响应式对象的属性key都有一个dep对象。所谓的依赖收集，就是让每个属性记住它依赖的watcher。但是属性可能用在多个模板里，所以，一个属性可能对应多个watcher。因此，在vue2中，属性要通过dep对象管理属性依赖的watcher。在初始化时编译器生成render函数，此时触发属性的依赖收集dep.depend。组件挂载完成后，操作页面，当数据变化后，对应的响应时对象会调用dep.notify方法通知自己对应的watcher更新。
2024-04-03 22:22:22
1930
原创 vue2源码解析——new Vue()这个过程究竟做了什么？
new Vue() 是 Vue.js 框架中用于创建根 Vue 实例的语法。当我们使用 Vue.js 构建一个单页面应用时，通常会先创建一个根 Vue 实例，然后在该实例中定义应用的数据、方法、计算属性等，以及挂载根组件。具体来说，new Vue() 的作用是：创建一个 Vue 实例，该实例代表整个 Vue 应用的根实例。通过传入的选项对象来配置该 Vue 实例，包括数据、计算属性、方法、生命周期钩子函数等。将该 Vue 实例挂载到一个真实的 DOM 元素上，使得应用
2024-04-02 21:13:11
1445
原创 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
2345
原创 vue3源码解析——watch和watchEffect区别
在这部分源码分析中，用了很长的篇幅取介绍doWatch的实现，因为watch和watchEffect都调用了doWatch，只是第二个参数不同，watchEffect传入的是null，watch传入的是cb。doWatch干了什么事情呢？首先由要收集数据依赖，收集的是哪写属性呢？source传入的可能是ref\reactive属性、数组或者函数，这个时候需要对source进行计算，看最终依赖的是什么东西？通过定义一个getter函数，根据source类型不同，得到监听数据最后的执行结果。怎么收集数据依赖呢。
2024-03-31 14:02:06
8384
原创 vue3源码解析——ref和reactive定义响应式的区别
ref 和 reactive 是 Vue 3.0 中用于定义响应式数据的两个新 API。它们有以下区别：ref 定义单个响应式数据 数据类型可以是任意类型。它通常用于定义原始数据类型为响应式数据。返回一个响应式对象，该对象包含一个 .value 属性，可用于获取和设置数据。底层采用Object.defineProperty()实现reactive 定义多个响应式数据 数据类型必须是对象返回一个响应式对象，必须使用响应式对象来获取属性和设置数据
2024-03-29 23:39:09
1584
2
原创 vue源码解析—— watch/computed的实现逻辑和区别
watch和computed是 Vue 中的两个重要的响应式属性，它们在实现机制和使用上存在一些区别。watchdeepimmediatecomputedgetsetVue 2 中，使用来实现数据响应式，并且在数据变化时通过getter函数来依赖收集和发布订阅。在 Vue 3 中，使用Proxy来实现数据响应式，并且在数据变化时通过get函数来依赖收集和发布订阅。这也导致了在源码实现上vue2和vue3的不同。
2024-03-29 15:43:35
1603
原创 vue源码解析——v-if和v-show各自是如何实现的元素的隐藏
在Vue.js中，v-if和v-show是常用的指令，用于控制元素的显示和隐藏。虽然它们都可以隐藏元素，但实现的方式略有不同。在这篇博客中，我们将深入探讨v-if和v-show各自是如何实现元素的隐藏的。
2024-03-29 10:51:24
1287
原创 vue2源码解析——Vue.set/$set方法如何给响应式对象添加属性
在Vue 2中需要向响应式对象添加新属性时，可以使用Vue.set或$set方法来实现。这两个方法的作用是向响应式对象添加属性并确保这个新属性也是响应式的。vue.set方法首先会区分是对数组还是对象进行新增属性。，利用vue2改写后的splice方法进行元素插入（此时$set是向数组里新增一个元素）。对象本身没有这个key。考虑对象是否为响应式对象。如果是响应式对象，调用defineReactive给当前对象的key增加响应式依赖。对象不是响应式的，直接给对象加属性，不用考虑响应式问题。
2024-03-28 19:04:41
1574
原创 leetcode刷题（javaScript）——回溯、递归、dfs相关场景题总结
递归通常用于解决可以被分解为相同问题的子问题的情况，通过不断调用自身来解决问题。当涉及到回溯、递归、深度优先搜索（DFS）相关的场景题时，通常可以将它们放在一起综合考虑，因为它们之间有一定的联系和相互影响。以下是一些相关的LeetCode场景题以及解题技
2024-03-24 10:24:29
1063
原创 leetcode刷题（javaScript）——BFS广度优先遍历相关场景题总结
广度优先搜索（BFS）在JavaScript编程中有许多实际应用场景，特别是在解决图、树等数据结构相关问题时非常常见。在JavaScript中，可以使用队列来实现广度优先搜索算法。通过将起始节点加入队列，然后迭代地将节点的邻居节点加入队列，直到队列为空为止。这样可以逐层地遍历图或树结构，找到目标节点或满足条件的节点。在实际编程中，需要注意避免重复访问节点、处理环路等问题，确保算法的正确性和效率。上题：可以按照博主的列的题目顺序依次练习，二叉树的简单，图论的难，但是做题技巧比较固定。
2024-03-21 18:26:50
1047
原创 javaScript——BFS结合队列求迷宫最短路径
思路：采用广度优先搜索的方式，尝试让某个点朝四个方向各走一步，如果都能走通，将这些路径和步长入队。假设由两个点分别向下、向右走一步都到了终点，并且两者的step相等，那么，先遍历的也就是向下的这个路径作为目标输出。问题描述：由m*n的矩阵构成了一个迷宫， 矩阵中为1的元素表示障碍物，不能走，为0表示可以走。从第一个点开始，将它shift出去，然后尝试向四周走一步，如果走的通，将那个节点和路径信息入队，依次遍历所有方向。数组中每项存储的是当前遍历的节点座标，走到该节点的步长，节点携带的路径数组。
2024-03-20 16:16:00
588
复杂网络——无标度网络BA的C++代码实现及python可视化操作，度分布实现.docx
2021-03-07
软件工程实验报告.docx
2021-02-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人