- 博客(104)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 带你使用nvm管理node版本以及环境变量配置
有时候使用nvm管理node会发现无法使用node或npm，主要原因是环境变量没有配置成功，或者没有指向正确的位置环境变量中要配置NVM_HOME这个地址是nvm的安装目录NVM_SYMLINK这个是指向当前node版本的快捷方式以上两个配置系统变量和用户变量都要配置，系统变量是对所有用户起作用，用户变量只对当前用户起作用。PATH还有一个要设置的是PATH，PATH指的是可执行文件的搜索路径。 PATH环境变量中存放的值，就是一连串的路径。不同的路径之间，用英文的分号（;）分隔开。
2021-07-30 09:53:56
12823
7
原创 threejs之贴图原理
对于index的设置如果你按照逆时针的顺序定义顶点索引，渲染引擎会认为这是一个正面的三角形，会正确计算法线和光照效果。如果你按照顺时针的顺序定义顶点索引，渲染引擎会认为这是一个背面的三角形，可能会导致不正确的光照效果。uv的取值范围是从0到1的，uv的设置和position的设置顺序有关。在上述例子中position的设置是逆时针设置的，所以uv的设置也要逆时针设置才能正确取样。，如果我们设置index的值为一半顺时针，一半逆时针那么就会出现正面有一半反面有一半，我们始终只能看到一半。z轴朝向我们是正面。
2024-03-19 20:03:28
440
原创 WebGL之灯光使用解析
在使用灯光之前，首先我们需要了解，与定义更广泛的 OpenGL 不同，WebGL 并没有继承 OpenGL 中灯光的支持。所以你只能由自己完全得控制灯光。幸运得是，这也并不是很难，本文接下来就会介绍完成灯光的基础。
2024-03-07 17:00:35
929
原创 WebGL之创建 3D 对象
首先，更新函数中代码来创建立方体的顶点位置缓存区。现在的代码看起来和渲染正方形时的代码很相似，只是比之前的代码更长因为现在有了 24 个顶点（每个面使用 4 个顶点）。在“init-buffers.js”文件由于我们给顶点添加了 Z 分量，因此我们需要将属性的更新为 3。然后我们还要为每个顶点定义颜色。下面的代码首先为每个面定义颜色，然后用一个循环语句为每个顶点定义颜色信息。在“init-buffers.js”文件函数中，用下面代码替换colors++j) {
2024-03-07 14:48:02
1011
原创 WebGL之使用着色器将颜色应用于 WebGL
在之前的展示中我们已经创建好了一个正方形，接下来我们要做的就是给它添加一抹色彩。添加颜色可以通过修改着色器来实现。
2024-03-07 11:44:30
1349
原创 WebGL 之创建 2D 内容
它的职责是确定像素的颜色，通过指定应用到像素的纹理元素（也就是图形纹理中的像素），获取纹理元素的颜色，然后将适当的光照应用于颜色。在观察者视图空间中，观察者（通常是摄像机）位于坐标系的原点，观察方向是坐标系的负Z轴方向，摄像机的朝向和位置决定了观察者视图空间的坐标系。：在顶点着色器中，顶点数据经过模型变换、视图变换和投影变换后，得到的坐标被称为裁剪空间坐标。这个范围内的坐标表示的是相对于视锥体（View Frustum）的位置，超出这个范围的坐标将被裁剪掉，不会显示在最终的图像中。
2024-03-07 10:24:21
765
原创 threejs之使用shader实现雷达扫描
总结，这段代码通过动态旋转的方式，结合时间变化，创建了一个中心透明度变化的圆形效果，其中圆形的颜色和旋转速度可以通过调整。在图形和游戏开发中，这种类型的矩阵变换非常有用，尤其是在处理物体的旋转和定位时。通过这个矩阵，可以对二维空间中的点或向量进行旋转，使其绕原点旋转。函数来旋转一个二维向量。这行代码使用了自定义的。，并且旋转的角度随时间。
2024-02-16 15:30:34
997
原创 threejs之使用顶点着色器和片着色器生成飞线原理分析
如果点的大小小于等于0，则直接将颜色设置为固定值，否则根据点的颜色和距离中心的距离计算点的颜色强度。：当后面的不可见的时候vSize会小于0，此时让它加上最初的值，变成最开始的长度，让不可见的重新可见。这段代码是一个顶点着色器程序，它对顶点进行处理，主要包括对顶点位置的变换和点的大小调整。根据顶点的深度进行调整，确保点在屏幕上的大小与其在视觉上的大小相符合。此时把为小于0的部分加上总size的长度，使得小于0的时候变为时间为0的长度。：这是一个变量，从顶点着色器传递过来的，用于表示点的大小。
2024-02-16 11:54:17
1049
原创 threejs之常用贴图
在三维图形和游戏开发中，高光贴图、凹凸贴图、法线贴图和环境光遮蔽贴图是常用的技术，用于增加虚拟物体表面的细节和真实感，而无需增加更多的几何体。这些技术可以帮助开发者和艺术家创造出既详细又性能高效的场景。
2024-02-02 17:22:24
720
原创 threejs之updateWorldMatrix的实现原理
首先我们需要定义几个额外的概念，包括表示位置、旋转、和缩放的类，以及一个用于表示4x4矩阵并执行矩阵运算的类。这个函数的目的是更新一个物体在世界空间中的位置，考虑到它的局部变换（位置、旋转、缩放）以及它的父对象的世界矩阵（如果有的话）。方法如何根据对象的局部变换（位置、旋转、缩放）以及父对象的世界矩阵来更新对象的世界矩阵。这个方法首先更新自身的局部矩阵，然后如果有父对象，它会和父对象相乘。首先，让我们定义一些基础的数学工具类，包括。这个实现提供了一个基础框架，从中可以看出。（用于表示旋转）, 和。
2024-02-02 10:49:46
589
原创 nestjs之适配器模式的应用
NestJS 是一个用于构建高效、可靠和可扩展的服务器端应用程序的框架。在 NestJS 中，适配器模式（Adapter Pattern）主要体现在其对不同类型的 HTTP 服务端框架的适配上。NestJS 本身是建立在 Express 或者 Fastify 这样的底层 HTTP 框架之上的，但它提供了一个抽象层，使得开发者可以不必关心底层框架的具体实现。适配器模式是一种结构型设计模式，它允许对象以兼容的方式协同工作，即便它们的接口不兼容。
2024-01-24 11:57:57
599
原创 nestjs之策略模式的应用
首先，我们定义一个角色枚举（Enum）。假设我们需要实现两种日志策略：一种是简单地将日志输出到控制台，另一种是将日志记录到文件中。首先，我们定义一个日志接口（LoggerService），它描述了日志服务应该实现的方法。假设我们的应用需要特定的处理方式来处理数据库异常和 HTTP 异常。首先，我们创建两个异常过滤器，一个用于处理数据库异常，另一个用于处理 HTTP 异常。// 处理数据库异常的逻辑。
2024-01-24 10:02:10
1183
原创 nestjs之常用装饰器以及原理解析
你可以创建自定义守卫来处理特定的认证和授权逻辑。自定义守卫需要实现// 你的认证和授权逻辑// 如果认证通过，则返回 true。
2024-01-23 11:31:36
1104
原创 nestjs之pipe是如何从dto校验的？
NestJS允许你自定义的行为，例如自定义错误响应或启用更复杂的验证规则。你可以通过传递选项到的构造函数来实现这些自定义行为。通过这种方式，NestJS中的Pipes提供了一种强大且灵活的方法来确保控制器接收到有效且正确类型的数据。
2024-01-19 09:30:09
401
原创 nestjs之TypeOrm异步配置实现原理
return {// 更多数据库配置...在这个例子中，是一个典型的服务，提供数据库配置。是一个字符串令牌，用于在 DI 系统中代表某个值或服务。通过这种方式，你可以在 NestJS 的useFactory函数中注入由字符串令牌标识的对象或值。inject数组中的每个令牌对应useFactory函数参数中的一个值，这些值按照inject中的顺序被注入。这个机制允许在 NestJS 应用中进行灵活且强大的依赖注入和服务配置。
2024-01-18 14:42:00
408
原创 nestjs之provider的provide取值的几种方式
以下是根据上述每种provide取值方式的例子，展示在 NestJS 中如何定义和使用自定义 providers。
2024-01-18 13:49:06
400
原创 nestjs之JWT认证实现流程
nestjs的jwt认证利用了 Passport.js 的认证机制。要根据这个源码实现您自己的 AuthGuard，需要理解几个关键部分：如何集成 Passport.js、如何处理认证结果，以及如何使用 NestJS 的依赖注入系统。的获取方式等，以及提供验证函数供用户给出返回值。方法没有返回值或者抛出异常那么就会判断为失败。那么有了注入，那么就有提供注入的地方，这里只有。和传入一些初始化参数，比如密钥，函数，该函数会调用我们定义好的。返回一个函数，该函数返回一个。解析header中的。
2024-01-17 12:07:00
441
原创 nestjs教程之@Controller()实现原理
Controller实现原理的简单实现，在真实的应用中，路由处理会更加复杂，包括错误处理、中间件支持、参数解析等。
2024-01-14 11:04:59
390
原创 nestjs教程之@Injectable()的实现原理
这个示例展示了一个基本的依赖注入容器，它能够处理构造函数的自动依赖注入。实际上，真实的框架NestJS会有更复杂的实现，包括处理循环依赖、生命周期管理、作用域和模块系统等。这个容器的实现假设所有的依赖都是通过其构造函数注入的，并且所有的服务都是单例的。以下是对@Injectable()的简单实现。
2024-01-14 10:09:40
682
原创 2023前端开发面经大合集
CommonJS适用于服务器端和应用程序，支持同步加载，但是在模块互依赖方面可能会有些复杂。ES Module是现代 JavaScript 开发的标准，支持异步加载，更适合前端开发和模块间的静态分析。Vue 3 带来了显著的性能提升、更灵活的代码组织方式（通过组合式 API）、更好的 TypeScript 支持和全新的内部实现。这些改进使 Vue 3 成为构建现代 Web 应用的更强大、更高效的工具。
2023-12-29 18:05:28
1015
原创 关于js类的继承的几种方式以及优缺点
是重要的一步，因为它确保了继承过程中保持了构造函数（constructor）的正确指向。这个步骤对于理解和维护对象的原型链是非常关键的。例子：如果父类有一个数组属性，所有子类实例都会共享这个数组，一个实例对数组的修改会反映在所有实例上。父类方法可以被多个子类实例共享，节省内存。在这个例子中，我们首先创建了一个新的对象，它的原型是。创建一个新对象时，这个新对象的原型是。这意味着新对象（即子类的原型对象）的。这在逻辑上是不正确的，因为我们希望。，以反映实际的继承关系。例子：每个子类实例都会创建自己的。
2023-12-29 17:59:52
1003
原创 关于前端5种常见设计模式
需要创建的对象较少：当需要创建的对象种类较少且相对稳定时，可以使用简单工厂模式。客户端不关心对象的具体实现：客户端只需要使用对象的共同接口，对于具体实现不关心时，可以使用简单工厂模式。总之，简单工厂模式是一种简单实用的创建型设计模式，适用于创建对象较少且相对稳定的情况。但需要注意，它可能违反开闭原则，并且随着产品种类的增多，工厂类的职责会变得过重。在设计时，应根据具体需求和情况来选择合适的设计模式。
2023-11-01 10:44:42
167
原创 stylelint执行插件的全过程
stylelint会获取所有的需要lint的文件路径根据路径的文件类型生成配置使用node读取文件内容并调用配置的syntax解析文件调用插件执行已解析的文件内容拼接已处理的文件为完整字符串重新写入文件覆盖原内容。
2023-03-03 11:19:09
593
原创 一步步带你看看webpack的HMR实现原理
可以看出返回的文件是一个webpackHotUpdate函数，该函数是全局的。所以要在window上挂载该函数。根据hash值获取要更新的json文件该文件中包含了下一个文件更新的hash值和更新范围。通过监听done钩子事件，获取stats，stats中包括当前的hash值。通过拦截客户端的请求从内存中获取相对应的资源。用动态script的方式将要更新的文件拉取。首先监听服务端的发送hash事件。
2023-02-21 21:05:07
119
原创 vite和esbuild/roolup的优缺点
虽然 esbuild 快得惊人，并且已经是一个在构建库方面比较出色的工具，但一些针对构建应用的重要功能仍然还在持续开发中 —— 特别是。由于生产环境的打包，使用的是 Rollup，Vite 需要保证，同一套 Vite 配置文件和源码，在开发环境和生产环境下的表现是一致的。想要达到这个效果，只能是 Vite 在开发环境模拟 Rollup 的行为 ，在生产环境打包时，将这部分替换成 Rollup 打包。尽管如此，当未来这些功能稳定后，我们也不排除使用 esbuild 作为生产构建器的可能。
2023-02-19 19:39:30
925
原创 关于如何调试vue3源码
把选中的代码去vue源码中的rollup.config.js文件中。workspaceFolder是项目根目录。attach是连接上已有的端口9222。此时已经成功映射上了。
2023-02-12 15:29:25
253
原创 关于vue3(v3.2.45)中v-for的key的作用
不要使用index作为key，key值应该是独一无二的并且在交换位置key值应该也不会变。正确的key值可以节省性能开销。
2023-02-07 10:03:26
492
原创 带你从源码分析关于vue(v2.7.10)的面试题
new Vue时会触发vue的_init方法去初始化数据，将el作为根dom，然后调用$mount方法去挂载组件，挂载的过程中会执行_render方法生成vnode。
2023-01-13 17:24:31
805
原创 关于一个项目是怎么启动的
安装包->执行package.json的bin命令，将bin的内容放到node_modules/.bin文件夹下->npm run xxx ->node_modules/.bin文件夹下查找该命令并执行。
2023-01-04 22:41:37
151
原创 关于webpack(v5.74.0)的tree-shaking原理
解析模块依赖的过程发生在_doBuild的回调中，主要执行parse方法去解析当前模块的依赖和导出：这里会分析当前模块的依赖，只引入未使用的是不会被记录到dependency列表中的。打标记的意思是标记当前模块对应的ModuleGraphModule的exports信息。如果该变量在当前模块中被用到，那么就会设置_usedInRuntime的值。在生成代码的过程根据变量的_usedInRuntime值解析依赖的时候将变量添加到initFragments。并将initFragments中的片段转换成标记的
2022-12-07 11:00:14
349
js实现virtual-dom.zip
2020-08-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人