- 博客(54)
- 收藏
- 关注
RSS订阅原创 01、three.js 的基础使用。
安装：npm install --save three为了真正能够让你的场景借助 three.js 来进行显示，我们需要以下几个对象：场景（scene）、相机（camera）和渲染器（renderer），这样我们就能透过摄像机渲染出场景。我们现在建立了场景、相机和渲染器。three.js 里有几种不同的相机，在这里，我们使用的是 PerspectiveCamera（透视摄像机）。第一个参数是视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)
2024-04-01 14:16:18
824
原创 TypeScript 装饰器的理解？应用场景
后面的使用场景中，借助装饰器的特性，除了提高可读性之后，针对已经存在的类，可以通过装饰器的特性，在不改变原有代码情况下，对原来功能进行扩展。装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。求值后必须也是一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。上述可以看到，当装饰器作为修饰类的时候，会把构造器传递进去。同样的，本质也不是什么高大上的结构，就是一个普通的函数，的三个参数，如果是类的属性，则没有传递第三个参数。是一个实验性特性，若要使用，需要在。
2024-03-25 09:27:50
469
原创 vue3 hook的理解？如何封装一个hook？。
Vue3 官方文档是这样定义组合式函数的。，一个利用 Vue 的组合式 API 来封装和复用具有状态逻辑的函数。在开发中，我们经常会发现一些可以重复利用的代码段，于是我们将其封装成函数以供调用。这类函数包括工具函数，但是又不止工具函数，因为我们可能也会封装一些重复的业务逻辑。以往，在前端原生开发中，我们封装的这些函数都是“无状态”的。
2024-03-22 10:02:46
1199
原创 Loader和Plugin的区别？编写Loader，Plugin的思路。
事件发生时，代表源文件的转换和组装已经完成，可以读取到最终将输出的资源、代码块、模块及其依赖，并且可以修改输出资源的内容。基于发布订阅模式，在运行的生命周期中会广播出许多事件，插件通过监听这些事件，就可以在特定的阶段执行自己的插件任务。，实质是一个转换器，将A文件进行编译形成B文件，操作的是文件，比如将。函数中有异步操作或同步操作，异步操作通过。的过程中，保持功能单一，避免做多种功能。运行的生命周期中会广播出许多事件，可以监听这些事件，在合适的时机通过。提供的对象，能够获取当前。其本质为函数，函数中的。
2024-03-22 09:14:59
831
原创 webpack proxy工作原理？为什么能解决跨域?
当本地发送请求的时候，代理服务器响应该请求，并将请求转发到目标服务器，目标服务器响应数据后再将数据返回给代理服务器，最终再由代理服务器将数据响应给本地。在代理服务器传递数据给本地浏览器的过程中，两者同源，并不存在跨域行为，这时候浏览器就能正常接收数据。标识的请求到服务端获取数据，但响应这个请求的服务器只是将请求转发到另一台服务器中。所以在开发阶段中，由于浏览器同源策略的原因，当本地访问后端就会出现跨域请求的问题。则是关于代理的配置，该属性为对象的形式，对象中每一个属性就是一个代理的规则匹配。
2024-03-22 09:12:52
759
原创 webpack中常见的Plugin？解决了什么问题？
是一种遵循一定规范的应用程序接口编写出来的程序，只能运行在程序规定的系统下，因为其需要调用原纯净系统提供的函数库或者数据。（Plug-in）是一种计算机应用程序，它和主应用程序互相交互，以提供特定的功能。赋予其各种灵活的功能，例如打包优化、资源管理、环境变量注入等，它们会运行在。globOptions：设置一些额外的选项，其中可以编写需要忽略的文件。这里讲述文件的配置方式，一般情况，通过配置文件导出对象中。to：复制到的位置，可以省略，会默认复制到打包的目录下。方法的第一个参数，应是驼峰式命名的插件名称。
2024-03-20 13:59:34
1077
原创 webpack中常见的Loader？解决了什么问题？
做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。把识别出的资源模块，移动到指定的输出⽬目录，并且返回这个资源在输出目录的地址(字符串)所有的事情，但是遇到图片格式的模块，可以选择性的把图片转成。可以同时挂载多个，处理顺序为：从右到左，从下往上。顺序为相反的顺序执行，即上述执行方式为。加载文件，这时候页面代码设置的样式并没有生效。中，对小体积的图片比较合适，大图片不合适。文件以外的内容，这时候我们就需要配置响应的。内部中，任何文件都是模块，不仅仅只是。
2024-03-19 10:04:51
1408
原创 react 对Fiber架构的理解？解决了什么问题？
在完成一部分任务之后，将控制权交回给浏览器，让浏览器有时间再进行页面的渲染。如果没有，挂起当前任务，将时间控制权交给主线程，等主线程不忙的时候在继续执行。线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿。即可以中断与恢复，恢复后也可以复用之前的中间状态，并给不同的任务赋予不同的优先级，其中每个任务更新单元为。引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待。树计算完成后，才会交给渲染的线程。
2024-03-14 13:46:37
595
原创 二分查找的理解及应用场景。
如果某一特定元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半中查找，而且跟开始一样从中间元素开始比较，如果在某一步骤数组为空，则代表找不到，这种搜索算法每一次比较都使搜索范围缩小一半。在计算机科学中，二分查找算法，也称折半搜索算法，是一种在有序数组中查找某一特定元素的搜索算法。实际上，除了有序的数组可以使用，还有一种特殊的数组可以应用，那就是轮转后的有序数组。搜索过程从数组的中间元素开始，如果中间元素正好是要查找的元素，则搜索过程结束。让它成为十分高效的算法。
2024-03-13 10:23:42
648
原创 React render方法的原理？在什么时候会被触发？
render函数里面可以编写JSX，转化成这种形式，用于生成虚拟DOM，最终转化成真实DOM在React中，类组件只要执行了setState方法，就一定会触发render函数执行，函数组件使用useState更改状态不一定导致重新render组件的props改变了，不一定触发render函数的执行，但是如果props的值来自于父组件或者祖先组件的state在这种情况下，父组件或者祖先组件的state发生了改变，就会导致子组件的重新渲染所以，一旦执行了setState就会执行render方法，
2024-03-12 16:03:33
496
1
原创 nginx的使用，homebrew安装及使用nginx。
是一个高性能的和反向代理服务器，它提供了诸如和等邮件代理服务。以下是 Nginx 的主要作用：12345此外，Nginx 还支持其他功能和配置，如、解决跨域问题等。
2024-03-12 14:03:17
436
原创 一篇文章带你快速上手 claude3 注册及使用步骤。
此处需要一个国外的号码需要接验证码，可以去SMS 网站(https://sms-activate.org/)上面下单一个临时号码，选择合适的，之后把号码复制过来，发验证码提交就好了。点击进去，用谷歌授权登录，来到下面的界面，Claude 要求进行手机号验证，这里选择填入国外号码验证即可。
2024-03-11 09:44:39
689
1
原创 Redux的中间件是干什么的？常用的中间件有哪些？实现原理？
件（Middleware）是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的。中间件会判断你当前传进来的数据类型，如果是一个函数，将会给函数传入参数值（dispatch，getState）那么如果需要支持异步操作，或者支持错误处理、日志监控，这个过程就可以用上中间件。进行注册，作用是将所有的中间件组成一个数组，依次执行。如果想要实现一个日志功能，则可以使用现成的。，然后嵌套执行，最后执行。
2024-03-08 15:54:12
574
原创 对Redux的理解及其工作原理。
整个流程就是借书的用户需要先存在，然后需要借书，需要一句话来描述借什么书，图书馆管理员听到后需要查一下记录本，了解图书的位置，最后图书馆管理员会把这本书给到这个借书人。这种情况下，如果将所有的状态进行集中管理，当需要更新状态的时候，仅需要对这个管理集中处理，而不用去关心状态是如何分发到每一个组件内部的。如果让每个组件都存储自身相关的状态，理论上来讲不会影响应用的运行，但在开发及后续维护阶段，我们将花费大量精力去查询状态的变化过程。是记录本(借什么书，还什么书，在哪儿，需要查一下)，应该给这个组件什么数据。
2024-03-07 16:09:31
894
原创 React受控组件和非受控组件区别及应用场景。
受控组件受控组件的值受React组件的state控制。当用户输入内容时，组件会触发onChange事件，更新state，然后重新渲染组件。应用场景：适用于需要在React中对输入进行严格控制和验证的情况，如表单输入项，可以方便地实现输入验证和逻辑处理。非受控组件非受控组件的值不受React组件的state控制，而是由DOM本身管理。通常通过ref获取DOM节点的值来进行操作。应用场景：适用于一些简单的交互，或者需要与第三方库或原生API集成的情况，如使用第三方日期选择器或上传组件。
2024-03-07 09:42:49
328
原创 React中类组件和函数组件的理解？有什么区别？
两者最明显的区别在于编写形式的不同，同一种功能的实现可以分别对应类组件和函数组件的编写形式。出来之前，函数组件就是无状态组件，不能保管组件的状态，不像类组件中调用。在函数组件中，并不存在生命周期，这是因为这些生命周期钩子都来自于继承的。如果是一个类组件，则需要将组件进行实例化，然后调用实例对象的。函数组件，顾名思义，就是通过函数编写的形式去实现一个。两者看起来实现功能是一致的，但是在类组件中，输出。所以，如果用到生命周期，就只能使用类组件。类组件，顾名思义，也就是通过使用。情况下，一般如果函数组件调用。
2024-03-06 16:53:51
593
原创 对React Hooks的理解？解决了什么问题？
因此，现在的函数组件也可以是有状态的组件，内部也可以维护自身的状态以及做一些逻辑方面的处理。的出现，使函数组件的功能得到了扩充，拥有了类组件相似的功能，在我们日常使用中，使用。让我们的函数组件拥有了类组件的特性，例如组件内的状态、生命周期。为函数式编程，每个功能都包裹在函数中，整体风格更清爽，更优雅。在以前，函数组件也被称为无状态的组件，只负责渲染的一些工作。后，则能够将相同的逻辑抽离出来，这是类组件不具备的方法。默认的值，返回值是一个数组，第一个值为当前的。会在第一次渲染和更新之后都会执行，相当于在。
2024-03-06 10:15:27
805
原创 Pinia 在组件外使用 store。
Pinia store 依靠pinia实例在所有调用中共享同一个 store 实例。大多数时候，只需调用你定义的useStore()函数，完全开箱即用。例如，在setup()中，你不需要再做任何事情。但在组件之外，情况就有点不同了。实际上，useStore()给你的app自动注入了pinia实例。这意味着，如果pinia实例不能自动注入，你必须手动提供给useStore()函数。你可以根据不同的应用，以不同的方式解决这个问题。
2024-03-05 13:47:03
341
原创 Pinia插件的使用(简易版数据持久化插件)
最简单的例子是通过返回一个对象将一个静态属性添加到所有 store。Pinia 插件是一个函数，可以选择性地返回要添加到 store 的属性。如果你想给 store 添加新的 state 属性或者在服务端渲染的激活过程中使用的属性，在定义 store 时，可以创建新的选项，以便在插件中使用它们。的情况下你依旧可以访问所有计算属性的原因，也是它们为什么是响应式的原因。当添加外部属性、第三方库的类实例或非响应式的简单值时，你应该先用。需要注意的是，在一个插件中， state 变更或添加(包括调用。
2024-03-05 10:46:40
978
原创 Pinia 和 Vuex 的区别。
Pinia是一个轻量级的状态管理库，专注于提供简单的API来管理应用程序的状态，它基于Vue 3的构建，提供了更加灵活和可组合的状态管理方式，支持多个store实例。Vuex是一种状态管理模式和库，构建为集中式存储，可帮助你维护 Vue 应用程序中存在的所有组件的状态。Vuex 遵循确保你的状态突变为预测标准的规则。使 Vuex 更强大的一个因素是组件从 Vuex store 中获取它们的状态，并且可以快速有效地响应 store 状态的变化。
2024-03-04 16:24:45
629
原创 Pinia Action的使用。
Action 相当于组件中的。它们可以通过中的actions属性来定义，类似，action 也可通过this访问，并支持。action，你可以在它们里面await调用任何 API，以及其他 action！你也完全可以自由地设置任何你想要的参数以及返回任何结果。当调用 action 时，一切类型也都是可以被自动推断出来的。
2024-03-04 16:06:12
498
原创 Pinia State的使用
在大多数情况下，state 都是你的 store 的核心。人们通常会先定义能代表他们 APP 的 state。在 Pinia 中，state 被定义为一个返回初始状态的函数。这使得 Pinia 可以同时支持服务端和客户端。
2024-03-04 15:19:07
799
原创 Pinia 快速入门
Pinia起始于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式 API的 Vue 状态管理库。我们得知道 Store 是用定义的，它的第一个参数要求是一个独一无二的名字：// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)// 第一个参数是你的应用中 Store 的唯一 ID。
2024-03-04 14:12:51
529
原创 React中的setState执行机制。
在React中，setState是一个异步操作，用于更新组件的状态(state)，并触发组件的重新渲染。当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用。通过点击按钮触发onclick事件，执行方法更新state状态，然后重新执行render函数，从而导致页面的视图更新。如果直接修改state我们会发现页面并不会有任何反应，但是state的状态是已经发生了改变这是因为React并不像vue2中调用数据响应式或者Vue3调用Proxy监听数据的变化必须通过。
2024-03-04 09:26:58
303
原创 React super()和super(props)有什么区别？
通常情况下，当你需要在子类构造函数中访问。会在类组件构造函数生成实例后再给。报错的原因是 子类是没有自己的。：如果在子类构造函数中使用。调用之后使用，可能会导致。在上面的例子中，可以看到通过。代替的是父类的构建函数，使用。内部也会将其定义在组件实例中。的时候，我们一般都需要传入。的则都能正常访问，确保了。向父类构造函数传递了。，关键字，则会引发报错，对象的，它只能继承父类的。作为参数，如果不传进去，对象，然后对其进行加工。对象继承给子类的，没有。和构造函数结束之间仍是。
2024-03-01 13:37:23
240
原创 React state 和 props有什么区别？
props是从父组件传递给子组件的数据，而state是组件自身管理的数据。props是只读的，而state是可变的。props用于组件之间的数据传递，而state用于组件自身的状态管理。props是外部控制组件行为和显示的主要方式，而state用于组件内部的数据存储和更新。props发生变化时会触发子组件重新渲染，而state的更新只会重新渲染自身组件。综上所述，props和state在 React 组件中扮演不同的角色，但它们通常是相互配合使用的，用于构建动态、可复用的用户界面。
2024-03-01 13:30:36
505
原创 说说对React的理解？有哪些特性？
React，用于构建用户界面的 JavaScript 库，只提供了 UI 层面的解决方案遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效使用虚拟DOM来有效地操作DOM，遵循从高阶组件到低阶组件的单向数据流帮助我们将界面成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，构成整体页面react类组件使用一个名为render()的方法或者函数组件return，接收输入的数据并返回需要展示的内容上述这种类似XML形式就是JSX，最终会被babel编译为合法的JS。
2024-03-01 13:25:37
333
原创 Real DOM和 Virtual DOM 的区别？优缺点？
Real DOM，真实DOM， 意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实DOM，本质上是以JavaScript对象形式存在的对DOM的描述创建虚拟DOM目的就是为了更好将虚拟的节点渲染到页面视图中，虚拟DOM对象的节点与真实DOM的属性一一照应在React中，JSX是其一大特性，可以让你在JS中通过使用XML的方式去直接声明界面的DOM结构上述中，用于将你创建好的虚拟DOM节点插入到某个真实节点上，并渲染到页面上JSX实际是一种语法糖，在使用过程中会被babel。
2024-03-01 13:22:20
812
原创 说说你对SPA（单页应用）的理解?
SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTMLJavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载。
2024-02-29 16:36:04
495
原创 vue3 reactive源码解析
中的数据双向绑定原理主要得益于的使用，它提供了一种更清晰的方式来拦截和自定义对象的操作。在Vue3中，Proxy被用来替换Vue2中的Object.defineProperty方法，使得数据绑定更加高效和强大。Proxy对象允许开发者定义基本操作的自定义行为，如属性查找、赋值、枚举、函数调用等。它类似于一个拦截器，可以在访问对象属性时进行拦截，并可以自定义这些行为。reactive：Vue 3 中的reactive函数用于创建响应式对象。它接受一个普通对象作为参数，并返回该对象的响应式代理。在内部，
2024-02-29 10:46:35
1132
原创 webpack DllPlugin和DllReferencePlugin的使用。
DllPlugin和用某种方法实现了拆分 bundles，同时还大幅度提升了构建的速度。"DLL" 一词代表微软最初引入的动态链接库。
2024-02-28 13:10:29
1030
原创 webpack的热更新是如何做到的？原理是什么？
例如，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会丢失。，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用。链接，当文件发生改动的时候，服务端会向浏览器推送一条消息，消息包含文件改动后生成的。项目启动后，进行构建打包，控制台会输出构建过程，我们可以观察到生成了一个。其次，根据新生成文件名可以发现，上次输出的。，就可以实现只将修改的模块实时替换至应用中，不必完全刷新整个应用。值，用于下次文件热更新请求的前缀。
2024-02-28 10:00:44
1080
原创 vue3 Transition内置组件的使用。
你也可以向你传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用，比如
2024-02-27 13:42:12
773
原创 vue3 KeepAlive的使用。
是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。在下面的例子中，你会看到两个有状态的组件——A 有一个计数器，而 B 有一个通过v-model同步 input 框输入内容的文字展示。尝试先更改一下任意一个组件的状态，然后切走，再切回来：你会发现在切回来之后，之前已更改的状态都被重置了。
2024-02-27 11:13:20
613
原创 vue3 Teleport的使用及场景。
这类场景最常见的例子就是全屏的模态框。有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。：有时候你可能希望某个组件的内容在滚动时保持固定位置，这时可以使用 Teleport 将该组件的内容渲染到页面的某个固定位置，而不受滚动容器的影响。：你可以使用 Teleport 将全局提示的内容渲染到页面的特定位置，比如右上角，而不受组件所在层级的影响。，它包含了模态框的内容和一个用来关闭的按钮。
2024-02-27 10:59:06
1141
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人