- 博客(91)
- 收藏
- 关注
RSS订阅原创 vue源码理解——什么是依赖
vue将数据变的可观测了以后，我们就知道了数据什么时候进行了改变，当数据改变的时候就去更新视图，但是去更新哪个视图呢，如果改变了一个数据，就去更新整个视图，明显这样是不合理的。最正确的方法就是——哪个视图用了这个变化的数据，哪个视图就进行更新。哪个视图用到了这个数据，也可以解读为哪个视图依赖了这个数据。
2024-10-15 10:41:51
380
原创 使用CSS Flexbox创建简洁时间轴
通过这些CSS样式,我们创建了一个简洁、响应式的时间轴。在小屏幕上,事件垂直排列;在大屏幕上,事件分布在时间线的两侧。这种设计既美观又实用,能够有效地展示事件的顺序和重要性。在网页设计中,时间轴是一种常见且有效的方式来展示事件的顺序和进程。本文将介绍如何使用CSS Flexbox创建一个简洁优雅的时间轴,无需复杂的JavaScript代码。使用Flexbox使得创建这样的时间轴变得相对简单,它简化了许多曾经复杂的布局任务。通过调整颜色、字体和间距,你可以进一步自定义时间轴以适应你的网站设计。
2024-10-15 10:32:54
371
原创 开发⼀个可复用的＜InputForm＞组件，它接受表单字段配置作为props并动态渲染表单。如何利用泛型确保传入的配置类型安全？
在前端开发中，我们经常需要构建各种表单来收集⽤⼾数据。为了提⾼代码的可复⽤性和可维护性，我们可以创建⼀个可复⽤的。⾸先，我们需要定义⼀个接⼝来描述表单字段的配置。这个接⼝将包含表单项的各种属性，如字段。在这个过程中，TypeScript的泛型可以确保我们传⼊的配置类型安全。来代表表单字段的值类型。这样我们就可以为不同类型的字段定义不同的验证规则。组件，它可以根据传⼊的表单字段配置动态渲染表单项。数组作为props，并遍历数组来动态渲染表单项。组件来渲染⼀个表单了。组和⼀个处理表单提交的函数即可。
2024-10-14 12:03:23
246
原创 vue中插槽的本质是什么?
下面这段代码和上面代码的作用是一样的, 每一个slot标签将来会编译成一个函数, 传递到组件内部.默认插槽: 一个名为default的函数。vue中slot插槽的本质是函数。命名插槽: 一个名为插槽名的函数。作用域插槽: 一个带参数的函数。声明一个带有插槽的组件Card。调用一个带有插槽的组件Card。
2024-10-14 11:07:20
232
原创 基于vue的ui组件库开发—— 02
上一个篇章中我们学习基础的框架搭建，并且实现了一个简单的button组件，该组件可以在项目中正常使用，那么按照类似的方法可以哦我们呢可以开发其他常用的组件库。
2024-10-12 10:41:35
314
原创 基于vue的ui组件库开发—— 01
随着重复项目的增多，通用组件在前端开发中越来越重要了，开发者更细分、聚焦于组件层面的开发，然后像搭积木一样完成应用功能。组件库可以统一管理组件，输出文档，能提升组件复用性、避免重复造轮子。
2024-10-12 10:39:10
775
原创 vite构建项目中的swc是什么
swc在 Vite 中使用swc主要是为了获得更快的编译和构建速度，以及更好的开发体验。swc是一个非常强大的编译器，可以在大多数场景下替代 Babel 或其他 TypeScript 编译器，并且由于其极高的性能，越来越多的开发工具（包括 Vite）正在将swc作为默认的编译工具。
2024-10-10 11:29:58
1258
1
原创 从封装一个表格组件开始，带你深入学习vue3
最近开发的一个移动端项目使用的技术栈是vue3+vant4，需求开发中需要以表格的形式展示信息，在vant官方文档找了半天没看到table组件，移动端就不该展示表格？再重新引入一个ui框架有点小题大作，于是就自己封装一下吧。
2024-10-10 11:26:01
1290
原创 qiankun 中 JS 沙箱的实现
对象的快照来实现状态的隔离，虽然简单有效，但存在性能和内存方面的不足，适用于对浏览器兼容性有要求的场景。对象实现的沙箱机制，它能够支持在同一页面上运行多个微应用，同时保证每个应用对全局环境（这里我们实现一个简单的单应用代理沙箱机制， 对应乾坤的源代码可以看这里 -这里我们实现一个简单的多应用代理沙箱机制， 对应乾坤的源代码可以看这里 -对象的状态，确保每个微应用在激活和失活时都能够拥有独立的环境。当沙箱失活时，还原修改前的属性值并删除新添加的属性，将。对象的修改，对应乾坤的源代码可以看这里 -
2024-10-10 11:22:25
1094
原创 HTTP 将增加一个新的方法类型！
QUERY是一种安全且幂等的 HTTP 请求方法，它允许携带请求内容。与GET方法不同，QUERY方法并不请求服务器返回指定 URI 资源的表示，而是要求服务器根据请求内容进行查询操作。简单来说，QUERY方法通过请求体来定义查询操作，并将操作结果作为响应返回。与其他 HTTP 方法类似，QUERY方法也需要注意一些安全性问题。例如，避免在 URL 中暴露敏感信息，尽量使用请求体传递查询参数。当服务器创建临时资源来表示QUERY请求结果时，应该避免在 URI 中以明文形式暴露原始请求内容。QUERY。
2024-10-10 11:21:41
273
原创 闭包和内存泄漏，这次我终于答上来了！
前言在腾讯的一面中被面试官问到了闭包问题，没答上来。很是遗憾，感觉自己还是挺了解的，但就是说不清楚。于是在字节的一面里，我又没答上来..悔恨的泪水不争气的流了下来，于是我决心搞定闭包。终于在第三次面试的时候，把闭包答上来了，亡羊补牢，也不管晚不晚了。
2024-10-10 11:21:00
385
原创 JavaScript - TypedArray
知其然知其所以然，我们在深入了解类型化数组TypedArray类型数组是 JavaScript 处理二进制数据的重要工具，它提供了高效、直接的方式来操作底层内存。通过理解类型数组的特性和使用方法，可以显著提升 JavaScript 在处理二进制数据方面的性能。类型数组的元素类型是固定的，一旦创建就不能改变。类型数组的长度是固定的，不能动态增加或减少。直接操作底层内存，如果使用不当可能会导致报错或者程序崩溃。
2024-10-09 11:31:21
921
原创 网页设计基础 第四讲：多媒体展示网页实战 —— 学习 ＜audio＞ 和 ＜video＞ 标签
通过本节的学习，我们了解了如何使用<audio>和<video>标签在网页中展示多媒体内容。这些标签的使用极大地方便了音频和视频的嵌入，为网站增添了互动性和吸引力。在实际开发中，根据用户需求灵活运用这些标签，可以大幅提升网站的质量和使用体验。
2024-10-09 11:26:45
431
原创 网页设计基础 第三讲：常用HTML标签应用与实践
在前两节课中，我们已经学习了HTML的基本概念，并动手创建了我们的第一个网页。今天，我们将深入探讨一些常用的HTML标签，并通过实践来加深理解。掌握这些标签将帮助我们创建更加丰富和功能齐全的网页。HTML（HyperText Markup Language）是一种标记语言，用于描述网页的内容和结构。
2024-10-09 11:25:22
235
原创 网页设计基础 第二讲：安装与配置 VSCode 开发工具，创建第一个 HTML 页面
本节课将详细介绍如何安装和配置 Visual Studio Code（简称 VSCode），并使用它创建第一个 HTML 页面。通过实际操作，学生将学会基本的开发环境设置，并动手编写简单的网页。IDE 是集成开发环境的英文缩写 （Integrated Development Environment)，集成开发环境就是将在开发过程中所需要的工具或功能集成到了一起，比如：代码编写、分析、编译、调试等功能，从而最大化地提高开发者的工作效率。
2024-10-09 11:22:24
1067
原创 网页设计基础 第一讲：软件分类介绍、工具选择与课程概览
在开始网页设计之前，我们需要先了解软件的几种主要分类，这有助于我们更好地理解网页设计在整个软件生态系统中的位置。PC（桌面）软件定义：为桌面操作系统（如Windows、macOS、Linux）设计的应用程序。特点： 功能强大：可以充分利用计算机的硬件资源。安装包：需要下载安装包并安装到电脑上。示例： 文档处理软件（如Microsoft Word） 图像处理软件（如Adobe Photoshop） 开发工具（如Visual Studio Code）移动应用（App）
2024-10-09 11:19:58
699
原创 HTML并不简单：小角色的大用途
笔者第一次接触移动端适配的时候，完全没概念，什么样是做了适配，什么样是没做？不明白。直到我把按照PC端写的页面用手机打开，傻眼了，怎么那么小，什么也看不清，然后我就开始搜，怎么做移动端适配。这段代码的用途是什么，如果没有这里的，在移动端，网页默认会缩放，按照980px大小的宽度渲染，以便在屏幕内完整显示，这就解释了为什么内容会变小。由此可见，不止我们所认为的，用于承载页面内容的元素才有用，其他一些“不起眼”的元素也很有用。
2024-10-09 11:18:51
661
原创 CSS 布局样式之定位流 —— position
当使用定位流的时候，可以实现的是将元素的布局实现从标准流（文档流）中实现脱离出来，可以不是标准流的那一套布局了。通过上面的描述我们就可以知道的是： 相对定位的元素是没有完全脱离标准流的，是依据的是元素本身的左上角开始移动的。这种定位的参照物是依据的是可视视口的，可以实现设置一个盒子元素在网页中位置的固定，就是不会随着视口的滚动而移动。标准流就是平时的以往写的，没有任何的其他的设置，只是实现的浏览器自带的一套布局准则。来实现控制元素的位置，实现调整的时候，是依据的元素的原本的位置实现移动的。
2024-10-09 11:12:18
1173
原创 常用设计原则和设计模式
六大原则即：高内聚低耦合。创建型从功能上来说就是创建元素，目标是规范元素步骤创建结构型从功能上来说就是给元素添加行为的，目标是优化结构的实现方式不同对象之间责任的划分和算法的抽象化
2024-10-09 11:08:47
497
原创 Js的预编译你了解多少呢？
全局定义了函数a和global，形成如图GO，此时a[[scope]]的0指向GO，函数a内定义了函数b和a，形成如图AO，此时a[[scope]]的0指向自己的AO，1指向GO，函数b定义了b，形成如图AO，b[[scope]]的0指向自己的AO，1指向a[[scope]]。是指在程序运行之前，先对程序进行一些处理，例如预处理、编译、链接等，以便提高程序运行效率和减少运行时的错误。作用域是执行期上下文对象的集合，这种集合呈链式连接，我们把这种。，减少程序在运行过程中可能出现的错误，并提高程序的。
2024-10-09 11:08:08
641
原创 初中级前端如何提升和破局？两个关键因素
前端入门容易，但精通（某个方向）真的很难，如果你是非科班出身，还需要补充大量的计算机基础知识。你需要在某个方向或者领域，付诸大量的、长期的学习和练习，而且还要有真实的项目经验，这个可遇不可求。每个技术人员都希望自己每年都有所成长，慢慢的晋升为某个领域的大佬，如何做到呢？当然有运气成分，而且运气很重要。运气我们把控不了，那就看看其他自己能把控的，最重要的就是找到你提升或破局的方向和关键因素。真实复杂的项目经验全栈能力，具体原因大家看我慢慢分析。这个世界上大部分的人都在干两件事忙：上班、加班。
2024-10-09 11:07:10
582
原创 Websocket 基本使用
WebSocket 是一种网络通信协议，它提供了一个全双工通信渠道，通过一个长期的连接允许服务器主动向客户端发送数据。WebSocket 协议在 2008 年诞生，2011 年成为国际标准，并且所有现代浏览器都支持它。
2024-10-08 12:02:03
398
原创 JavaScript 中最快的循环是什么？
无论使用哪种编程语言，循环都是一种内置功能。JavaScript 也不例外，它提供了多种实现循环的方法，偶尔会给开发人员带来困惑：哪一种循环才是最快的？我们将对这些循环方法进行测试，以确定哪种方法最快。为了比较每个循环的性能，我们将使用 console.time() 和 console.timeEnd() 方法来测量它们的执行时间。用于测试的任务是：将 5000 万个项目从一个数组转移到另一个数组。为确保公平比较，我们将异步运行每个循环。
2024-10-08 12:00:46
406
原创 深入解析 React 组件封装 —— 从业务需求到性能优化
在 React 组件的封装过程中，除了满足业务需求外，还需要考虑组件的复用性和可扩展性。通过合理设计组件的 API、抽象通用逻辑，以及使用自定义 Hook 管理状态和验证，可以大大提升代码的可维护性。与此同时，性能优化也是不容忽视的部分。通过使用 React.memo、useCallback、lazy 等手段，我们可以有效减少组件的重复渲染，提升应用的整体性能。表单组件是业务中非常常见的场景，动态表单封装是对 React 组件封装的一种典型应用。
2024-10-08 11:57:48
998
原创 Webpack模块解析与加载机制深度解析
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它将应用程序中的每个文件视为一个模块，并通过配置规则来解析这些模块之间的依赖关系，最终将其打包成一个或多个浏览器可以执行的文件。
2024-10-08 11:54:28
1254
原创 Vue中的异步数据处理的探索 - useAsyncData
小明经过九九八十一难，不断完善这个函数，功能不断丰富，迫不及待跟大家介绍一下入参参数功能描述fetchFunc异步数据获取的方式数据处理器，还有enhancer2，enhancer3总共三个数据处理器，没能合成一个数组是因为这样写才有类型，写成数组加上enhancer后类型没有了，三个也够用了初始化值是否生成一份可编辑的副本，用于表单操作，默认false是否懒加载，在vue组件setup中默认为false，其它默认为true，只有当数据使用时候才触发fetchFunc获取出参返回值。
2024-10-08 11:49:05
1263
原创 【算法】反转链表
这段代码首先定义了三个指针，并通过循环实现了链表的反转。在每一轮循环中，通过改变节点的next指针方向，逐步将链表由前往后反转。最后，返回新的头节点。解这道题，关键是理解链表节点的连接关系以及如何通过改变节点的next指针来实现链表的反转。：遍历结束后，原来的尾节点将成为新的头节点，而原来的头节点将成为新的尾节点。，请你反转链表，并返回反转后的链表。
2024-10-08 11:45:27
251
原创 electron-log：想让应用调试不再头疼？
在开发 Electron 应用时，一个可靠的日志记录系统至关重要。它不仅能帮助我们追踪应用运行状态，还能在调试和故障排查时提供宝贵的信息。今天，我们要介绍的是，这是一个专为 Electron 应用设计的简单而强大的日志记录模块。electron-log 是一个简单易用的日志记录模块，专为 Electron、Node.js 和 NW.js 应用设计。它没有复杂的配置，也不依赖任何外部库，可以轻松集成到你的项目中。electron-log 默认将日志写入特定位置，确保你能方便地查看和管理应用日志。
2024-10-08 11:33:49
1094
原创 vue2路由和vue3路由区别及原理
Vue 3 的相较于 Vue 2 更加现代化和灵活，并且对 TypeScript 进行了更好的支持。与此同时，Vue 3 的路由实现基于 Composition API，使其能够更好地与 Vue 3 的设计理念相契合，提升了开发体验和可维护性。
2024-10-08 11:31:29
1148
原创 pinia和vue3的响应式区别
Vue 3 响应式系统：用于组件内部的状态管理，通过reactive和ref实现。Pinia：基于Vue 3响应式系统构建，专注于全局状态管理，提供了更清晰的状态组织方式以及对异步操作、持久化、时间旅行等高级功能的支持。Pinia的响应式能力是基于Vue 3的响应式系统，但它将这种响应式能力扩展到了全局状态管理层面，提供了更强大且结构化的状态管理功能。
2024-09-30 11:08:11
422
原创 React第九章(组件通信)
将属性变为可选的这儿使用title举例title?: string然后将props进行解构，定义默认值{title = '默认标题'}title?: stringid: numberobj: {a: numberb: numberconst Test:React.FC<Props> = ({title = '默认标题'}) => {
2024-09-30 11:07:33
902
原创 React第八章(初识组件)
此时App是一个单体，我们在真正做项目的时候，我们需要把它分解成可管理的，可描述的组件。React 对于什么是组件和什么不是组件并没有任何硬性规定，这完全取决于你！React 优秀项目如果它在程序里是一个块，那么它就是一个组件如果它在程序里面经常出现，那么也它也是组件使用通用的 UI 元素作为组件，可以让你只更改一处，就能更改所有使用该组件的地方。
2024-09-30 11:04:50
260
原创 React第七章(调度器)
requestIdleCallback(callback) 回调函数的执行间隔是 50ms（W3C规定），也就是 20FPS，1秒内执行20次，间隔较长。它提供了一种机制，允许开发者在浏览器空闲时运行低优先级的任务，而不会影响关键任务和动画的性能。的原因，是首先异步得是个宏任务，因为宏任务中会在下次事件循环中执行，不会阻塞当前页面的更新。声明taskQueue 为数组，存储每个任务的信息，包括优先级，过期时间，回调函数。同时还给每个任务设置了过期时间，过期时间越短，优先级越高。返回是否还有空闲时间(毫秒)
2024-09-30 11:03:23
1165
原创 React第六章(实现vdom，fiber，diff)
Virtual DOM 就是用JavaScript对象去描述一个DOM结构，虚拟DOM不是直接操作浏览器的真实DOM，而是首先对 UI 的更新在虚拟 DOM 中进行，再将变更高效地同步到真实 DOM 中。任务切片：在浏览器的空闲时间内（利用 requestIdleCallback思想），React 可以将渲染任务拆分成多个小片段，逐步完成 Fiber 树的构建，避免一次性完成所有渲染任务导致的阻塞。用于生成虚拟 DOM 树，返回一个包含 type（元素类型）和 props（属性和子元素）的对象。
2024-09-30 11:01:53
1232
原创 React第五章(swc)
SWC 既可用于编译，也可用于打包。对于编译，它使用现代 JavaScript 功能获取 JavaScript / TypeScript 文件并输出所有主流浏览器支持的有效代码。SWC在单线程上比 Babel 快 20 倍，在四核上快 70 倍。简单点来说swc实现了和babel一样的功能，但是它比babel快。FAQ为什么快?编译型 Rust 是一种编译型语言，在编译时将代码转化为机器码（底层的 CPU 指令）。这种机器码在执行时非常高效，几乎不需要额外的开销。
2024-09-30 10:59:32
563
原创 React第四章(babel)
Babel 是一个 JavaScript 编译器,提供了JavaScript的编译过程，能够将源代码转换为目标代码。
2024-09-30 10:57:25
649
原创 React第二章(开发环境搭建 )
public 公共目录srcassets 静态资源App.css 根组件样式App.tsx 根组件index.css 全局css文件main.tsx 全局tsx文件vite-env.d.ts 声明文件.eslintrc.cjs eslint配置文件.gitignore git忽略文件index.html 入口文件index.htmlpackage.json 项目依赖模块文件tsconfig.json ts配置文件。
2024-09-30 10:52:43
401
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人