- 博客(49)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 配置Linux
首先建议设置一下默认编辑器，这样我们通过MobarXterm的FTP工具打开文件时会以指定的编辑器打开，方便修改。点击配置按钮后，我们需要把网卡地址改为静态IP，这样可以避免每次启动虚拟机IP都变化。启动后需要选择安装菜单，将鼠标移入黑窗口中后，将无法再使用鼠标，需要按上下键选择菜单。此时你要输入密码，不过需要注意的是密码是隐藏的，输入了也看不见。原因：在虚拟机安装完成后，最好立刻设置一个快照，这样一旦将来虚拟机出现问题，可以快速恢复。而且我们可以在不同阶段拍摄多个不同快照作为备份，方便后期恢复数据。
2023-10-21 22:00:41
557
原创 前端杂项-个人总结八股文的背诵方案
上述是OSI七层模型，TCP/IP五层模型：应用层，表示层和会话层合并为应用层；TCP/IP四层模型：物理层和数据链路层合并为网络接口层。为什么不能两次或四次？
2023-08-13 22:56:23
431
原创 ES6及以上新特性
String.prototype.trimStart 和 String.prototype.trimEnd：新增了字符串的 trimStart 和 trimEnd 方法，用于去除字符串的开头和结尾空格。Array.prototype.flat 和 Array.prototype.flatMap：新增了数组的 flat 和 flatMap 方法，用于扁平化和映射数组。Promise：用于处理异步操作的对象，解决了回调地狱的问题，提供了更加优雅的异步编程方式。.），用于简化链式属性访问，防止出现未定义的错误。
2023-07-30 23:51:42
579
原创 npm，yarn，pnpm
总体来说，yarn和pnpm相对于npm来说，在安装速度和空间占用方面有一定的优势，而且在缓存和锁定机制上也更加智能和高效。总的来说，pnpm通过共享依赖、符号链接、并行安装等一系列优化措施，大大提高了依赖包的安装速度，特别是在多个项目共享依赖包的场景下，安装速度更加明显。这样，当多个项目都依赖同一个包时，实际上只需要在磁盘上保存一份该包的内容，减少了重复的下载和存储开销。pnpm使用了本地缓存，可以将下载过的依赖包保存在本地，下次再安装相同的依赖包时，就可以直接从缓存中读取，节省了下载时间。
2023-07-30 23:15:55
666
1
原创 WebSocket
需要注意的是，WebSocket是一种双向通信协议，能够实现全双工通信，而轮询、长轮询、SSE和Comet等兜底方案都是基于HTTP协议的单向通信方式，无法实现全双工通信。总结：WebSocket连接的建立过程是通过WebSocket对象的构造函数发起连接请求，服务器接受连接请求后进行握手，握手成功后建立双向通信通道，保持连接状态，实现实时双向通信的功能。显示断开提示：在WebSocket连接断开时，可以在界面上显示断开连接的提示信息，让用户知晓连接状态，并提供相应的操作，如重新连接按钮等。
2023-07-30 21:36:26
1187
原创 HTML5 Web Worker
HTML5 Web Worker是一种浏览器提供的JavaScript多线程解决方案，它允许在后台运行独立于页面主线程的脚本，从而避免阻塞页面的交互和渲染。Web Worker是HTML5中的特性，主流现代浏览器都支持Web Worker，包括Chrome、Firefox、Safari、Edge等。但是需要注意的是，Web Worker在旧版本的IE浏览器中不被支持。主线程接收到Web Worker发送的消息后，输出结果到控制台。在上述示例中，Web Worker模拟了一个耗时的计算任务，并将结果通过。
2023-07-30 11:34:47
1115
原创 Object.defineProperty和Proxy
综上所述，Proxy比Object.defineProperty更为强大和灵活，推荐在新项目中使用Proxy来实现对象的响应式。如果需要兼容老旧的浏览器，可以考虑使用Object.defineProperty，并配合一些辅助工具来实现类似的功能。使用ES6的Proxy来实现一个简单的响应式系统，监听对象的所有属性并在属性值发生变化时触发回调函数。可以使用Object.defineProperty来实现一个简单的响应式系统，通过监听对象的所有属性并在属性值发生变化时触发回调函数。
2023-07-30 09:17:06
227
原创 XMLHttpRequest (XHR) 与 fetch
XMLHttpRequest (XHR) 是一种在客户端和服务器之间进行异步数据交换的技术，它允许浏览器向服务器发送HTTP请求，获取数据并更新部分网页内容，而无需刷新整个页面。XHR 是现代Web开发中常用的一种技术，用于实现AJAX（Asynchronous JavaScript and XML）请求和数据交互。以下是XMLHttpRequest的详细介绍：创建XMLHttpRequest对象：在JavaScript中，可以通过调用来创建一个XMLHttpRequest对象。
2023-07-29 23:56:27
994
原创 手写Promise，实现then和catch方法
方法，并且能够正常处理 Promise 的链式调用和异常捕获。在上面的例子中，创建了一个简单的 Promise，并通过。这个手写的 Promise 类包含。手写 Promise 类，包含。方法链式调用，然后使用。
2023-07-27 16:37:31
159
原创 React-个人总结八股文的背诵方案
函数式编程鼓励将计算视为数学函数的组合，通过函数的组合、高阶函数和递归等方式来表达计算逻辑。声明式编程通常使用领域特定语言（DSL）或声明式语法来表达计算逻辑，使代码更加简洁、易读和易理解。声明式编程更关注问题的本质和逻辑，而不是具体的实现细节。状态（state）是组件内部用于存储和管理数据的对象，类组件通过this.setState管理，函数组件使用useState或useReducer管理。React将状态看做一个自动机，通过状态的更新，可以重新渲染组件，并反映出新的数据状态。
2023-07-08 08:38:37
2155
1
原创 react的context和contextType
另外，使用 ContextType 需要确保组件位于 Context.Provider 的子组件树中，以确保能够获取到正确的上下文数据。如果组件未位于相应的 Context.Provider 下，this.context 的值将为上下文类型的默认值（如果提供），或者为 undefined。如果组件需要订阅多个上下文类型，或者需要在函数组件中访问上下文数据，可以使用 Context.Consumer 或 useContext 钩子函数来实现。
2023-07-08 00:51:49
1259
原创 如何在 React 中进行静态类型检查
PropTypes提供了一些内置的类型检查器，如string、number、bool、array、object等，还可以自定义类型检查器。使用TypeScript编写React组件，可以使用类型注解定义组件的属性和状态的类型，以及定义函数的参数和返回值类型。TypeScript可以在编译时进行类型检查，捕获潜在的类型错误，并提供智能的代码提示和自动补全功能。Flow使用类似于TypeScript的类型注解语法，可以对React组件的属性、状态和函数进行类型检查。是一种用来启用 flow 类型检查的注释。
2023-07-01 11:30:31
600
原创 React三种通过属性传递组件本身的方法
是因为每次父组件重新渲染时，都会调用一次函数，即使函数的返回值没有变化。这样会导致 React 认为子组件的属性发生了变化，从而触发子组件的重新渲染。直接传递 JSX 创建好的元素的方法会造成不必要的渲染，是因为每次父组件重新渲染时，都会创建一个新的 JSX 元素，即使它的内容没有变化。这样会导致 React 认为子组件的属性发生了变化，从而触发子组件的重新渲染。在上述代码中，每次 Profile 重新渲染时，都会创建一个新的 JSX 元素，每次 person 属性变化时，都会重新渲染 Avatar。
2023-07-01 10:39:56
887
原创 劫持react组件
我们可以定义一个高阶组件，它可以通过 props 传递一个 color prop 给原组件，让原组件的文字颜色变化。我们可以定义一个高阶组件，它可以管理原组件的 count 状态，并提供 increment 和 decrement 方法给原组件，让原组件可以更新状态。我们可以定义一个高阶组件，它可以在原组件的外面添加一个边框，修改原组件的样式，或者根据条件决定是否渲染原组件。这样，我们就得到了一个有边框的标题，一个红色字体的标题，和一个只在标题长度大于10时才显示的标题。
2023-06-30 11:49:26
554
1
原创 Vue的diff算法原理以及伪代码
总体而言，Vue的Diff算法通过节点比较、列表元素的Diff和优化策略，以及批量更新的方式，实现了高效的虚拟DOM更新过程。然后，判断新节点的子节点类型，如果是基本类型，则直接替换为文本节点；子节点的Diff操作使用双指针比较的方式。通过四个指针（旧开始、旧结束、新开始、新结束）来标记子节点的位置，然后在循环中比较新旧节点，执行相应的操作。在比较过程中，会根据节点的类型和"key"属性来判断节点是否相同。最后，通过批量更新的方式将所有变更操作应用于实际DOM，以减少对实际DOM的频繁操作，提高性能。
2023-06-27 15:02:21
106
原创 a标签创建下载链接
(1) HTML a 标签的 download 属性 - w3school 在线教程. https://www.w3school.com.cn/tags/att_a_download.asp.(3) HTML a标签链接 设置点击下载文件 - CSDN博客. https://blog.csdn.net/Gabriel_wei/article/details/105613874.
2023-06-05 10:10:44
10063
原创 个人总结八股文的背诵方案
上述是OSI七层模型，TCP/IP五层模型：应用层，表示层和会话层合并为应用层；TCP/IP四层模型：物理层和数据链路层合并为网络接口层。为什么不能两次或四次？
2023-05-23 22:30:04
192
原创 CSS3 多列布局
CSS3 多列布局是一种实现网页内容分为多个列的技术，类似于报纸或杂志的排版。它可以让网页的文本更加紧凑和易读，而不需要使用浮动或定位等复杂的布局方法。要创建CSS3多列布局，我们需要指定要添加多列效果的容器元素和容器元素的多列属性。我们还可以使用其他属性来控制多列样式和折断方式。
2023-05-18 11:08:34
600
原创 CSS3动画
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。animation-play-state 规定动画是否正在运行或暂停。animation-timing-function 规定动画的速度曲线。animation-iteration-count 规定动画被播放的次数。animation-duration 规定动画完成一个周期所花费的秒或毫秒。animation-name 规定 @keyframes 动画的名称。
2023-04-18 17:05:47
498
原创 CSS3转换
3D转换元素，还可以更改元素的Z轴。translate(x,y)根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。skew(x-angle,y-angle)表示X轴和Y轴倾斜的角度。rotate3d(x,y,z,angle)定义 3D 旋转。translateX(x) translateY(y) translateZ(z) 仅使用用于 X或Y或Z 轴的值。matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
2023-04-12 11:28:21
430
1
原创 CSS3过渡
CSS3过渡是一种实现元素从一种样式逐渐变化为另一种样式的效果的技术。它可以让网页的动画效果更加流畅和自然，而不需要使用Flash或JavaScript。要使用CSS3过渡，我们需要指定要添加过渡效果参考资料(1) CSS3 过渡 | 菜鸟教程. https://www.runoob.com/css3/css3-transitions.html.
2023-04-11 19:31:36
310
1
原创 CSS3新的UI方案
指定要使用的图像，如border-image-source: linear-gradient(red,blue)或border-image-source: url(border.png);属性指定图像的边界向内偏移。将左上角看做上，那（左上|右上|右下|左下）就是（上|右|下|左），其余同理。
2023-03-30 14:36:21
176
1
原创 伪类与伪元素
nth-child：可以使用变量n(只能时字母n不能时其他变量，从0开始)，n的表达式(如2n，2n+1之类)，odd(奇数)，even(偶数)nth-last-child(n)：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。last-of-type：选择器匹配元素其父级是特定类型的最后一个子元素。nth-last-of-type(n)：选择器匹配同类型中的倒数第n个同级兄弟元素。（1）伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树以外的元素。
2023-03-23 18:18:56
93
3
原创 express基本使用
\src\common\useExpress.js是代码文件的路径，通过下面命令运行。浏览器打开代码监听的端口号，查看返回报文。
2023-03-14 19:23:40
49
原创 深入学习git命令
分布式(git): git每次存的都是项目的完整快照，需要的硬盘空间会相对大一点(Git团队对代码做了极致的压缩，最终需要的实际空间比svn多不了太多，可是Git的回滚速度极快)(1) 优点: 完全的分布式，客户端不只提取最新版本的文件快照，而是把代码仓库完整地镜像下来。集中式(svn)： 因为svn每次存的都是差异 需要的硬盘空间会相对的小一点 可是回滚的速度会很慢。(2) 缺点: 服务器宕机: 员工写的代码得不到保障;(1) 优点: 代码存放在单一的服务器上 便于项目的管理。
2023-03-08 14:09:42
51
原创 vue-Interview
Model-View-的简写view : 视图【dom==》在页面中展示的内容】model：模型【数据层：vue中的data数据】viewModel：视图模型层【就是vue源码】
2023-03-07 18:50:32
90
原创 Vue3笔记 尚硅谷张天禹
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
2023-03-07 18:36:52
389
原创 Vue2笔记 尚硅谷张天禹
组件化编码流程： (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。 (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 1).一个组件在用：放在组件自身即可。 2). 一些组件在用：放在他们共同的父组件上（状态提升 (3).实现交互：从绑定事件开始。props适用于： (1).父组件 ==> 子组件 通信 (2).子组件 ==> 父组件 通信（要求父先给子一个函数）
2023-03-07 18:32:11
421
原创 html-Interview
1. DOCTYPE 的作用是什么？2. 标准模式与兼容模式各有什么区别？3. HTML5 为什么只需要写 ，而不需要引入 DTD？4. SGML 、 HTML 、XML 和 XHTML 的区别？5. DTD 介绍6. 行内元素定义7. 块级元素定义8. 行内元素与块级元素的区别？9. HTML5 元素的分类10. 空元素定义11. link 标签定义12. 页面导入样式时，使用 link 和 @import 有什么区别？13. 你对浏览器的理解？
2023-03-06 21:06:57
862
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人