- 博客(33)
- 收藏
- 关注
RSS订阅原创 前端面试之Proxy与Reflect
Proxy 和 Reflect 是 ES6 提供的强大元编程特性。Proxy 作为对象代理拦截器，通过 13 种捕获器实现对对象操作的全面控制；Reflect 则提供与 Proxy 对应的 13 个静态方法，用于执行默认对象操作。两者配合可实现数据验证（如类型检查）、观察者模式（数据变更监听）、函数劫持（日志记录）等高级功能，在框架开发中常用于响应式系统实现和环境补全。典型应用场景包括 Vue3 的响应式原理、数据校验中间件等，为现代 JavaScript 开发提供了强大的元编程能力。
2025-05-30 11:18:38
689
原创 万字详解微服务框架之QianKun保姆级教程
本文探讨了在Vue项目中嵌入React工具的技术方案，重点对比了iframe与前端微服务两种方案。通过分析主流微前端框架（Single-SPA、无界、MicroApp、qiankun）的特性与优劣势，团队最终选择采用qiankun方案。文章详细介绍了qiankun的核心特性、架构设计、配置方法和应用场景，为不同技术栈的微前端集成提供了实践指导。qiankun凭借其技术栈无关性、完善的隔离机制和丰富的功能成为优选方案，能有效解决iframe方案的局限性，如路由同步、上下文隔离等问题。
2025-05-29 09:26:02
1208
原创 前端面试题之常规布局技术详解
本文详细解析了前端开发中的常见布局技术。从传统的静态布局到流式布局，再到现代Flexbox和CSS Grid，文章对比了各类布局的特点、优缺点和实现方法。响应式设计部分强调媒体查询和视口设置的重要性，并提供实用技巧如居中方案和粘性定位。最后推荐Bootstrap、Tailwind等工具框架，并给出布局选择建议：简单页面用静态/流式布局，复杂场景优先Flexbox/Grid，多端适配需结合响应式设计，同时注意语义化HTML和性能优化。
2025-05-28 09:54:34
600
原创 JavaScript面试题之箭头函数详解
摘要：JavaScript箭头函数是ES6引入的重要特性，简化了函数语法并通过词法作用域解决this绑定问题。文章系统讲解其语法形式、核心特性（如不绑定自己的this、不能作为构造函数）、适用场景（回调函数、避免this问题）以及使用限制（不适用于对象方法、事件处理等）。通过代码示例展示了箭头函数在数组处理、链式调用和函数组合中的优势，同时提醒开发者注意其不适用场景。箭头函数能显著提升代码简洁性和可维护性，是现代JavaScript开发的必备工具。
2025-05-27 09:08:30
706
原创 JavaScript面试题之深浅拷贝
本文深度解析JavaScript中的深拷贝与浅拷贝机制。第一部分介绍内存存储原理，包括栈内存与堆内存的区别。第二部分详解浅拷贝，分析Object.assign()、展开运算符等实现方式及其应用场景。第三部分深入探讨深拷贝，对比JSON序列化、递归实现和结构化克隆算法等方案，并提供完整深拷贝函数实现和特殊场景处理技巧。第四部分分析性能优化策略，第五部分比较不同应用场景下的选择建议。最后介绍lodash.cloneDeep和Immutable.js等三方库实现，并给出最佳实践指南。
2025-05-26 10:14:09
771
原创 JavaScript面试题之Promise
本文全面解析了 JavaScript 中的 Promise，从回调地狱问题引入，介绍了 Promise 的三种状态（pending、fulfilled、rejected）和基本用法，包括链式调用、错误处理机制和高级应用技巧（组合多个 Promise 的方法）。文章还提供了最佳实践建议，避免常见陷阱，并探讨了 Promise 与 async/await 的关系。Promise 作为现代异步编程的基石，通过扁平化调用和集中错误处理，显著提升代码质量和开发效率。
2025-05-26 09:10:41
1009
原创 JavaScript面试题之匿名函数
JavaScript 中的匿名函数是一种没有显式名称的函数类型，广泛应用于回调、高阶函数参数、闭包等场景。匿名函数通过函数表达式定义，不具备提升特性，常见形式包括常规匿名函数、立即执行函数表达式（IIFE）和箭头函数。IIFE 用于创建独立作用域，避免全局污染；箭头函数则简化了语法，并继承外层上下文的 this。匿名函数的优点在于灵活性和代码简洁，但调试困难且递归受限。最佳实践建议优先使用命名函数表达式，合理使用箭头函数，并避免过度嵌套。理解匿名函数的底层机制（如闭包）有助于提升代码质量和开发效率。
2025-05-23 13:47:56
976
原创 JavaScript面试题之消息队列
JavaScript作为单线程语言，依赖消息队列实现异步编程，避免页面卡顿。消息队列与事件循环协同工作，调度同步任务、微任务和宏任务的执行顺序。微任务（如Promise）优先级高于宏任务（如setTimeout），确保高优先级任务及时处理。消息队列广泛应用于异步任务处理、流量削峰、应用解耦和延迟执行等场景。开发者可通过Promise/async/await避免回调地狱，及时清理无用定时器和事件监听，优先使用微任务提升性能。理解消息队列的运作机制有助于编写高效代码、设计解耦系统，并优化复杂业务逻辑的执行顺序，
2025-05-21 09:11:21
806
原创 JavaScript面试题之this详解
JavaScript中的this是一个动态关键字，其指向取决于函数的调用方式而非定义位置。this的绑定规则包括默认绑定（独立调用时指向全局对象）、隐式绑定（作为对象方法调用时指向该对象）、显式绑定（使用call、apply或bind强制指定this）和new绑定（通过new调用时指向新创建的对象）。箭头函数没有自己的this，继承外层作用域的this值。理解this的关键在于关注函数如何被调用，掌握这些规则可以避免常见陷阱，写出更健壮的代码。
2025-05-20 13:05:57
1175
原创 JavaScript面试题之闭包详解
JavaScript闭包是函数与其外部词法环境的组合，允许内部函数访问并保留外部函数的变量，即使外部函数已执行完毕。闭包的核心原理包括词法作用域和环境保留，通过闭包可以实现数据封装、函数工厂、异步操作中的状态保留以及模块化开发。闭包的优点包括数据私有化、灵活性强和支持模块化编程，但也存在内存泄漏风险和性能影响等缺点。在循环中使用闭包时需注意变量共享问题，可通过let或立即执行函数解决。合理使用闭包能提升代码封装性和灵活性，但需谨慎避免性能问题。
2025-05-20 10:31:50
763
原创 JavaScript面试题之原型链详解
JavaScript中的继承是实现代码复用的关键机制，本文详细介绍了七种主流继承方式及其优缺点。原型链继承简单直观，但存在数据污染和无法传参的问题；构造函数继承解决了引用属性共享问题，但无法继承原型方法；组合继承结合了前两者的优点，但父类构造函数被调用两次；原型式继承适合简单对象继承，但引用属性共享；寄生式继承在原型式继承基础上扩展功能，但方法重复创建；寄生组合式继承是完美的终极方案，避免了冗余属性；ES6 Class继承语法简洁，接近传统面向对象语言。总结来说，现代项目推荐使用ES6 Class继承。
2025-05-19 16:53:59
488
原创 从零开始学习three.js（21）：一文详解three.js中的矩阵Matrix和向量Vector
本文深入解析了Three.js中的矩阵与向量，从基础概念到高阶应用，涵盖了向量和矩阵的核心操作、矩阵变换原理、矩阵堆栈管理、关键矩阵系统（如MVP矩阵和法线矩阵）以及性能优化策略。文章通过代码示例详细展示了向量的加减、点积、叉乘等操作，以及矩阵的创建、相乘、求逆和分解等技巧。此外，还探讨了矩阵变换的顺序、矩阵更新优化、常见问题诊断以及高阶应用实例，如自定义矩阵动画和GPU矩阵计算。这些内容为开发者提供了全面的指导，帮助他们在Three.js中更高效地处理三维空间中的数学运算和变换。
2025-05-19 14:20:26
710
原创 从零开始学习three.js（20）：three.js实现天气与时间动态效果（白天，黑夜，下雨，下雪）
本文将通过代码解析，介绍如何使用Three.js实现动态天气（下雨、下雪）和时间（白天、黑夜）切换效果。完整代码基于一个交互式天气模拟项目，支持粒子密度、速度和环境亮度的实时调整。
2025-05-16 14:01:35
529
原创 从零开始学习three.js（19）：一文详解three.js中的辅助类Helper
Three.js 提供了多种辅助类（Helper）来帮助开发者可视化和调试三维场景。这些辅助类包括坐标轴辅助（AxesHelper）、网格辅助（GridHelper）、极坐标网格辅助（PolarGridHelper）、包围盒辅助（BoxHelper）、光源辅助（如 DirectionalLightHelper、PointLightHelper）、相机视锥体辅助（CameraHelper）、骨骼辅助（SkeletonHelper）等。它们可以用于显示物体的坐标轴、网格、光源范围、相机视锥体、骨骼结构等信息。
2025-05-16 10:31:10
919
原创 从零开始学习three.js（18）：一文详解three.js中的着色器Shader
本文深入探讨了在Three.js中使用着色器（Shader）实现复杂3D图形渲染的核心技术与应用。着色器分为顶点着色器和片元着色器，分别负责处理顶点位置变换和像素颜色计算。Three.js提供了ShaderMaterial和RawShaderMaterial两种材质类型，支持开发者通过Uniforms、Attributes和Varyings等变量类型进行灵活控制。文章详细解析了矩阵变换的顺序与坐标系统，并通过动态波纹效果的实战案例展示了着色器的实际应用。
2025-05-15 13:39:57
1246
原创 一文万字详解CSS预处理器脚本语言Sass/Scss
Sass/Scss 是一种 CSS 的预编译语言。由Ruby开发者设计和开发，语法属于缩排语法。它提供了 变量（variables）、嵌套（nested rules）、 混合（mixins）、 函数（functions）等功能，并且完全兼容 CSS 语法。Sass/Scss 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。本文一文详解Sass中的各类语法及其应用。
2025-05-14 14:04:07
1005
原创 从零开始学习three.js（17）：一文详解three.js中的阴影Shadow
本文详细介绍了Three.js中阴影的实现与优化技术。首先，阴影通过阴影贴图技术生成，分为光源视角渲染、阴影贴图存储和主场景渲染三个步骤。核心参数包括阴影渲染的全局开关、光源和物体的阴影投射与接收属性，以及阴影贴图的分辨率控制。其次，Three.js提供四种阴影贴图类型，适用于不同场景需求，并提出了性能优化策略，如调整阴影相机视锥、动态分辨率适配和使用假阴影技术。此外，文章还探讨了高级技巧，如虚拟人阴影优化和动态光源阴影同步，并提供了常见问题的排查与调试方法。
2025-05-14 11:41:59
842
原创 从零开始学习three.js（16）：一文详解three.js中的法向量Normal Vector
本文详细介绍了Three.js中法向量的原理、应用与实践。法向量是垂直于三维模型表面的单位向量，主要用于光照计算、阴影生成、视差效果和碰撞检测。Three.js通过自动生成或手动设置法向量来实现逼真的光影渲染。文章还探讨了法向量在着色器中的应用，以及常见问题的解决方案，如模型光照异常和法线贴图方向错误。此外，还介绍了高级应用场景，如地形生成中的法向量计算和边缘检测，并提供了调试与优化技巧。正确理解和使用法向量是Three.js开发中的关键技能，能够帮助开发者实现多样化的渲染效果。
2025-05-14 09:38:14
814
原创 从零开始学习three.js（15）：一文详解three.js中的纹理映射UV
在三维计算机图形学中，UV 坐标是将二维纹理映射到三维模型表面的坐标系统。UV 中的 U 和 V 分别代表2D纹理空间的水平（X）和垂直（Y）坐标轴，与三维空间中的 XYZ 坐标形成区分。UV 坐标系范围：[0,0] 到 [1,1]每个顶点对应一个UV坐标纹理采样器通过UV值获取纹理颜色UV映射是连接3D模型与2D纹理的核心桥梁。通过深入理解Three.js的UV实现机制，开发者可以创建更复杂的材质效果、优化渲染性能，并解决实际项目中的各种纹理映射难题。
2025-05-07 14:49:21
745
原创 从零开始学习three.js（14）：一文详解three.js中的粒子系统Points
在 Three.js 这个强大的 3D 图形库中，粒子特效是实现各种绚丽视觉效果的重要手段之一。无论是模拟烟花、雨雪、流星等自然现象，还是创造梦幻般的背景装饰，粒子特效都能发挥巨大作用。本文将深入剖析 Three.js 中粒子特效的相关知识和实现技巧，帮助你更好地掌握这一技能。
2025-05-07 09:44:15
947
原创 从零开始学习three.js（13）：一文详解three.js中的渲染器Renderer
Three.js 作为当下最流行的 WebGL 框架，其核心渲染器（Renderer）承担着将 3D 场景转化为 2D 屏幕图像的关键任务。其核心作用包括：：通过视图投影计算，将三维坐标系映射到屏幕空间：实现光照、阴影、材质反射等视觉效果：管理渲染管线，平衡GPU与CPU资源本文将深入剖析 Three.js 的渲染器实现原理、配置参数与性能优化策略，帮助开发者掌握三维可视化开发的核心技术。
2025-05-06 16:11:32
762
原创 从零开始学习three.js（12）：一文详解three.js中的动画Animation
在three.js的实际应用中，动画总是绕不过去的功能。本文将深入探讨 Three.js 动画的核心概念、技术实现及优化策略，并结合实际代码示例进行解析。
2025-04-29 11:59:29
1488
原创 从零开始学习three.js（11）：一文详解three.js单个大模型加载优化
three.js经常加载大模型时卡顿异常，fps跑不到60帧，浏览器还经常崩溃，此文就是搜集了这种场景的各种解决方案供大家参考。
2025-04-28 20:49:10
619
原创 从零开始学习three.js（10）：一文详解three.js中的Post-Processing后处理（特效）
在三维可视化开发中，**后期处理（Post-Processing）** 是提升视觉效果的关键技术。Three.js 通过 `EffectComposer` 和渲染通道（Pass）系统，为开发者提供了强大的后期处理能力。本文将深入解析 three.js 后期处理的核心原理，并通过实战案例展示从基础到高级的应用技巧。
2025-04-28 08:00:11
1143
原创 从零开始学习three.js（9）：一文详解three.js中的各类贴图加载TextureLoader
在 Three.js 中，贴图（Texture）是为 3D 物体表面添加纹理和细节的关键技术。通过贴图，我们可以将图像、视频或其他媒体映射到物体表面，使其看起来更加真实和生动。本文将详细介绍 Three.js 中的贴图类型、加载方式以及如何通过贴图实现丰富的视觉效果。
2025-04-27 14:30:00
951
原创 从零开始学习three.js（8）：一文详解three.js中的灯光Light
在 Three.js 中，灯光是构建逼真 3D 场景的关键元素之一。通过合理使用灯光，可以增强物体的质感、立体感和场景的整体氛围。本文将详细介绍 Three.js 的灯光系统，包括常见的灯光类型、使用方法以及如何通过灯光打造丰富的视觉效果。此文一文详解three.js中的各类灯光属性及其配置。
2025-04-27 10:05:46
1322
原创 从零开始学习three.js（7）：一文详解three.js中的物体Mesh
Mesh是Three.js中可渲染3D对象的基本单元，由几何体（Geometry）和材质（Material）组合而成。作为Object3D的子类，Mesh继承位置(position)、旋转(rotation)、缩放(scale)等三维变换属性。此文一文详解Mesh。
2025-04-26 22:08:45
630
原创 从零开始学习three.js（6）：一文详解three.js中的材质Material
Three.js 中的 THREE.Material 是所有材质的基类，定义了物体表面的视觉属性（如颜色、纹理、光照交互等）。本文详解three.js中的Matrial，属性方法以及使用。
2025-04-26 21:35:52
1065
原创 从零开始学习three.js（5）：两万字详解three.js中几何体Geometry与BufferGeometry
three.js中的Geometry是构建3D物体的基础骨架，它通过顶点坐标、面片数据和UV映射等属性定义物体的几何形态。是three.js中非常重要的一部分，本文一文详解three.js 125版本之前的Geometry与three.js 125版本之后的BufferGeometry知识。
2025-04-25 13:42:47
785
原创 从零开始学习three.js（4）：一文详解three.js中场景Scene
Three.js是WebGL的流行封装库，用于在浏览器中创建复杂的3D场景。场景（Scene）作为Three.js的核心容器，承载了所有可见元素（物体、灯光、相机等）。本文将深入探讨场景的各个方面，包括创建、管理、优化及高级应用。
2025-04-24 13:13:07
1062
原创 从零开始学习three.js（3）：一文详解three.js中常用控制器Controls
在 Three.js 中，控制器（Controls）是实现用户与3D场景交互的核心组件。通过不同的控制器，开发者可以轻松实现场景的旋转、平移、缩放、自由飞行等多种交互效果。本文将详细介绍几种常用控制器，并提供代码示例与配置指南。
2025-04-24 09:22:53
633
原创 从零开始学习three.js（2）：一文详解three.js中各类相机Camera
Three.js 提供了多种相机类型，每种相机都有其独特的用途和属性。透视相机适合创建沉浸式的 3D 场景，正交相机适合创建平面化的 2D 效果，而立方体相机和数组相机则用于更复杂的渲染需求。通过合理选择和配置相机，我们可以实现丰富的视觉效果和交互体验。一文详解three.js中的相机。
2025-04-23 09:14:47
375
原创 从零开始学习three.js（1）：一个完整项目指南
three.js 的主要目标是简化 WebGL 技术的使用，通过提供一系列封装好的 API 和组件，让开发者能够快速构建三维应用。无论您是想要制作游戏、虚拟现实应用，还是WebGL 项目，three.js 都是一个强大的工具。在开始之前，请确保您的浏览器支持所有必要的 WebGL 版本，并且您的 JavaScript 引擎已启用 ECMAScript 6 语法糖和 Web ARRs（实验特性）。如果您的项目需要特定的版本或修改，可以选择下载并安装three.js 库。
2025-04-22 09:14:44
1011
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人