- 博客(72)
- 收藏
- 关注
RSS订阅
原创 【vue】Echarts3D地图下钻
地图下钻是一个非常常见的功能需求，本篇文章会细致讲解如何在Vue3中使用Eharts-gl渲染出3D地图，并且实现地图下钻和返回上级地图的完整功能。
2023-04-13 21:21:27
7604
29
原创 【Vue3源码Runtime-core篇】 第一章 初识Runtime
当设计一个框架的时候，我们有三种选择：纯运行时的、运行时 + 编译时的或纯编译时的。我们先聊聊纯运行时的框架。
2023-03-30 23:10:31
535
原创 【Vue3源码】第一章 effect和reactive
今天就正式开始Vue3源码学习了，那么很多初学者（包括我）在看vue源码时都会非常迷茫不知从何下手，所以我们在学习源码时应该反其道而行之，剔除掉源码中包括Tree-Shaking、TypeScript类型约束、特性开关、错误处理等操作，只了解其核心原理，大大提高学习效率减少学习成本！
2023-02-12 14:40:39
1281
3
原创 【nuxt2/nuxt3】@nuxtjs/i18n国际化
在网上阅读的大部分案例都还在使用vue-i18n插件做教程，实际上nuxt本身就已经基于vue-i18n封装了插件。而且它比vue-i18n封装了更多好用的功能，具体的使用方法我们可以查看但是官方好像没有做中文翻译，所以我在这里出了一篇中文教程，第一这个插件比vue-i18n用起来更方便，第二中文教程也方便大家快速使用上这个插件。
2022-12-09 23:00:59
6477
15
原创 vite配置cdn优化打包体积
大家都知道前端性能优化的方法，cdn外部引入的方法可以使项目打包后体积大大缩小，所以是前端性能优化方面非常推荐的方法之一。本文关于项目如何cdn引入做一个简单教程，我们可以通过两种方式引入配置cdn。由于vite的核心基于rollup和webpack不同，所以cdn引入方式也不同具体rollup配置项可以阅读vite官网。rolluppluginsexternalvite这次带来了两种方法打包Element plus ，同样的只要有cdn链接，我们就可以用这两种方式进行引入。
2022-09-13 11:44:26
8546
6
原创 【全栈开发】vue3响应式音乐播放器博客 - 热浪网
从立项到上线其实已经过了 4个月了，靠着碎片时间开发的一个博客网站，包括购买服务器，网站备案等一整套流程下来，项目耗时曲线也被拉长，不过功夫不负有心人，时间冉冉——趁着九月初中秋节这个热浪余波未了，Heat Waves ♨️ 🌊 1.0版本也终于正式上线！！文章结尾会附上浏览链接这是一个通过全栈开发的一个极简风响应式多功能音乐播放器+知识博客web（单人役
2022-09-12 22:07:51
1126
5
原创 【3d地图】vue3.0中使用echarts geo3D
之前我们已经成功在 vue2 中渲染了 echarts3D 地图，那么这次我们直接进阶成 vue3渲染 geo3D地图，并且承接上一章末尾许下的小彩蛋，我们在 3D 地图上加入， 3D 柱状图，和热力图
2022-07-04 16:22:03
10598
17
原创 【three.js】22. Imported Models导入模型
Three.js 可以让你创建很多原始几何体，但是当涉及到更复杂的形状时，我们最好使用专用的 3D 软件建模。在本课中，我们将使用已经制作好的模型，但我们将在以后的课程中学习如何完全在 3D 软件中创建模型。
2024-03-06 16:31:41
927
原创 【V8引擎】JavaScript变量提升
JavaScript使用var关键字声明变量为什么会存在变量提升？JavaScript函数为什么可以提前调用？JavaScript代码，在浏览器中又是如何被执行的？我们可以通过了解V8引擎的运行机制了解JS代码在浏览器中的编译过程，来解释为什么存在声明提升的情况。
2024-01-18 09:28:28
1410
原创 【JavaScript】闭包以及原理解析
闭包是JavaScript中一个非常容易让人迷惑的知识点一个函数和对其周围状态（，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）；也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域；在JavaScript中，每当创建一个函数，闭包就会在函数创建的同时被创建出来；
2024-01-18 09:28:13
1336
原创 【JavaScript】this指向（call,aplly,bind）
重学JavaScript04----- this指向文章目录重学JavaScript04----- this指向前言规则一：默认绑定规则二：隐式绑定规则三：显示绑定bind、call、apply的区别通过call或者apply绑定this对象通过bind绑定this对象手写实现apply、call、bind1、call函数的实现2、apply函数的实现3、bind函数的实现规则四：new绑定特殊情况1、忽略显示绑定2、间接函数引用3、ES6箭头函数总结：规则优先级前言call、apply、bind都
2024-01-18 09:28:05
1074
原创 【JavaScript】面向对象
重学JavaScript05----- 面向对象文章目录重学JavaScript05----- 面向对象前言JavaScript的面向对象面向对象的三大特征一、创建对象方式（封装）1、 直接创建方式弊端思考属性描述符2、工厂模式弊端3、构造函数new操作符调用的作用构造函数创建对象弊端4、构造函数和原型(Prototype模式)组合前言对象是JavaScript中一个非常重要的概念，这是因为对象可以将多个相关联的数据封装到一起。面向对象是现实的抽象方式。用对象来描述事物，更有利于我们将现实的事物，
2024-01-18 09:27:59
869
原创 【JavaScript】面向对象之继承
重学JavaScript06----- 面向对象之继承文章目录重学JavaScript06----- 面向对象之继承继承1、了解原型链2、Object的原型3、通过原型链实现继承原型链继承的弊端4、借用构造函数继承借用构造函数也是有弊端的5、通过原型式继承函数继承6、寄生式继承函数7、寄生组合式继承继承继承可以帮助我们将重复的代码和逻辑抽取到父类中，子类只需要直接继承过来使用即可。1、了解原型链在真正实现继承之前，我们先来理解一个非常重要的概念：原型链。从一个对象上获取属性，如果在当前对象中
2024-01-18 09:27:49
1078
原创 【JavaScript】面向对象之多态
重学JavaScript07----- 面向对象之多态文章目录重学JavaScript07----- 面向对象之多态多态多态面向对象的三大特性：封装、继承、多态。JavaScript有多态吗？维基百科对多态的定义：多态（英语：polymorphism）指为不同数据类型的实体提供统一的接口，或使用一个单一的符号来表示多个不同的类型。非常的抽象，个人的总结：不同的数据类型进行同一个操作，表现出不同的行为，就是多态的体现。那么从上面的定义来看，JavaScript是一定存在多态的//
2024-01-18 09:27:42
742
原创 【JavaScript】vue中的响应式原理
在搞懂Vue2 - Vue3 响应式原理前，我们首先要认识JavaScript中的Object.defineProperty、Proxy、map、weakMap、Set、Reflect这几个知识点。如果已经明白这些知识点，我们可以直接导航跳到"响应式原理"。
2024-01-18 09:27:32
1057
原创 【React基础】– JSX语法
JSX是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法
2024-01-18 09:27:23
1358
原创 【React】组件生命周期、组件通信、setState
React的组件化类组件render函数的返回值函数组件认识生命周期生命周期解析生命周期函数不常用生命周期函数认识组件间的通信父组件传递子组件 - 类组件和函数组件参数propTypes子组件传递父组件React中的插槽（slot）children实现插槽props实现插槽Context应用场景Context相关API为什么使用setStatesetState异步更新如何获取异步的结果setState默认是异步的（React18之后）
2024-01-18 09:26:57
1314
原创 【Vue3源码】第四章 实现isReadonly和isReactive
上一章节我们实现readonlyAPI，并且优化之前写的reactiveAPI。这一章我们实现isReadonly和isReactive两个API。
2024-01-18 09:26:49
1387
原创 【React】组件性能优化、高阶组件
React性能优化SCUReact更新机制keys的优化render函数被调用shouldComponentUpdatePureComponentshallowEqual方法高阶组件memo获取DOM方式refs如何使用refref的类型受控和非受控组件认识受控组件非受控组件React的高阶组件认识高阶函数高阶组件的定义应用一 – props的增强应用二 – 渲染判断鉴权应用三 – 生命周期劫持高阶函数的意义ref的转发portals和fragmentPorta
2024-01-17 12:45:50
1457
原创 【React】Redux的使用详解
Redux就是一个帮助我们管理State的容器：Redux是JavaScript的状态容器，提供了可预测的状态管理
2024-01-17 12:45:44
2399
1
原创 【Vue3源码】第二章 effect功能的完善上
上一章节我们实现了基础版本的effect函数，和reactive函数已经依赖收集和依赖触发函数，这一章我们继续完善effect函数的功能。
2024-01-17 12:45:39
1050
原创 【Vue3源码】第五章 实现 reactive 和 readonly 嵌套对象绑定响应式
上一章节我们实现了isReadonly和isReactive两个API。还记得第一章时说的proxy无法代理嵌套对象形成响应式的问题吗？这一章我们实现 reactive 和 readonly 嵌套对象转换功能，以及shallowReadonly 和isProxy几个简单的API。
2024-01-17 12:45:25
1069
转载 Vue3响应式原理以及依赖模型解析
在看一些关于Vue的资料时，经常都能看到依赖收集和依赖更新的字样，那么什么是依赖？export type Dep = Set < ReactiveEffect > & TrackedMarkers // 依赖定义 type TrackedMarkers = {可以看出来，依赖本质上就是一个ReactiveEffect的Set集合。关于TrackedMarkers参数，在介绍依赖收集优化时分析。Vue3响应式系统的总结到此结束，后续会逐步更新关于Vue3的其他系统模块。作者：sunsetFeng。
2024-01-17 12:45:19
495
原创 【Vue3源码】第七章 computed的实现
【Vue3源码】第六章 computed的实现上一章节我们实现了 ref 及其它配套的isRef、unRef 和 proxyRefs API。这一章开始实现computed计算属性。
2024-01-17 12:45:13
1214
原创 【Vue3源码Runtime-core篇】 第二章初始化Component
上一篇文章讲了整个包的核心逻辑，以及patch算法流程图流程图:render函数内patch算法和的流程，这一章就开始实现整个流程，我们只要按着流程去创建函数就可以了。
2024-01-17 12:45:08
1099
原创 【webpack5】高级优化
本章节主要介绍 Webpack 高级配置。所谓高级配置其实就是进行 Webpack 优化，让我们代码在编译/运行时性能更好~我们会从以下角度来进行优化：1. 提升开发体验2. 提升打包构建速度3. 减少代码体积4. 优化代码运行性能
2024-01-17 12:44:38
1400
原创 【Three.js】第四章 Local Server本地服务器
上节课我们实现的加载Three.js的方式是最简单的。不幸的是，它有两个缺点及主要限制。首先，我们只能访问“核心”类。这个核心中有几十个类，我们可以用它们做很多事情，但我们并没有掌握所有的的类和属性。例如，在以后的课程中，我们将需要访问该类，这在核心类中是不可用的。
2024-01-17 12:44:24
1468
原创 【Three.js】第五章 Transform objects变换对象
现在一切就绪，我们可以探索 Three.js 的功能。在为我们的场景设置动画之前，我们需要知道如何变换场景中的对象。我们已经通过使用camera.position.z = 3.有 4 个属性可以在我们的场景中转换对象- position（移动物体）- scale（调整对象大小）- rotation（旋转物体）- quaternion（同时旋转对象；稍后会详细介绍）
2024-01-17 12:44:09
1374
原创 【Three.js】第十五章 Lights 灯
正如我们在上一课中看到的，添加灯光就像添加网格一样简单。您使用适当的类实例化一盏灯，然后将其添加到场景中。有多种类型的光，我们已经发现了和。在本课中，我们将详细了解所有不同的类以及如何使用它们。
2024-01-17 12:43:58
1184
原创 【Three.js】第十八章 Particles 粒子
粒子。它们非常受欢迎，可用于实现各种效果，如星星、烟、雨、灰尘、火和许多其他东西。粒子的好处是您可以在屏幕上以合理的帧速率显示数十万个粒子。缺点是每个粒子都由一个始终面向相机的平面（两个三角形）组成。
2024-01-17 12:43:49
1268
原创 【Three.js】第二十一章 Physics 物理
物理是WebGL可以添加到项目体验中最酷的功能之一。人们喜欢真实物理感的物体，看到它们碰撞、倒塌、坠落和弹跳，有很多方法可以将物理功能添加到您的项目中，这取决于您想要实现的目标。您可以使用一些数学和解决方案（例如Raycaster）来创建自己的物理学项目。
2024-01-17 12:43:40
1621
原创 【TypeScrpt算法】算法的复杂度分析
空间复杂度指的是程序运行过程中所需要的额外存储空间。空间复杂度也可以用大O表示法来表示;空间复杂度的计算方法与时间复杂度类似，通常需要分析程序中需要额外分配的内存空间，如数组、变量、对象、递归调用等。
2024-01-17 12:43:17
941
原创 【TypeScript】常见数据结构与算法（二）：链表
链表类似于火车:有一个火车头，火车头会连接一个节点，节点上有乘客(类似于数据)，并且这个节点会连接下一个节点，以此类推。
2023-11-24 23:00:00
1232
原创 【Three.js】第十六章 Shadows 阴影
上节课我们学会了灯光，现在我们需要阴影。物体的背面应该在黑暗中，这就是阴影所谓的核心。我们缺少的是物体对象的投影，也就是根据被投影的对象在其他对象身上创建阴影。阴影渲染一直是实时 3D 渲染的一大挑战，开发人员必须找到技巧以合理的帧速率显示逼真的阴影。实现它们的方法有很多种，Three.js 有一个内置的解决方案。请注意，此解决方案很方便，但并非完美。
2023-06-14 23:30:00
894
1
原创 【Three.js】第十三章 3D Text 3D文字
我们已经了解足够的基础知识，现在可以创作一些好看的效果了。对于我们第一个正式的项目，我们将复刻一个开发者ilithya的作品，这个作品在场景中间有一个大的 3D 文本，很多几何体漂浮在文字的周围。这个作品是学习 Three.js 早期可以实现的一个很好的例子。它简单、高效，而且特效看起来很棒。
2023-06-12 23:45:00
621
原创 【Three.js】第十二章 Materials 材质
材质用于为几何体的每个可见像素着色。决定每个像素颜色的算法属于着色器中编写的。编写着色器是 WebGL 和 Three.js 最具挑战性的部分之一，但不要担心；Three.js 有许多带有预制着色器的内置材质。我们将在以后的课程中探索如何创建我们自己的着色器。现在，让我们使用 Three.js 自带材料。
2023-06-11 12:10:42
1361
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人