- 博客(94)
- 收藏
- 关注
RSS订阅原创 Git创建远程分支
在这个命令中，-u参数告诉Git将你的本地分支new-branch和远程仓库的new-branch建立联系。这样，在后续的拉取（pull）或者推送（push）操作中，你就可以直接使用git pull或者git push，而不需要再指定远程仓库和分支。现在，你在远程仓库中就有了一个新的分支new-branch，并且这个分支的内容和你本地的new-branch分支一致。2.然后，你需要将这个新的分支推送到远程仓库。这个命令同时创建了一个新的分支，并且将你当前的HEAD切换到了这个新分支。
2024-06-05 14:43:17
1301
1
原创 滚动条事件window.onscroll
相对浏览器，将指定div滚到到指定位置，其用法如下。例：统战 DIV随滚动条位置高度发生变化。获取页面某一元素的绝对X,Y坐标。
2023-05-12 11:36:52
358
原创 react中”栈调和”Stack Reconciler过程是怎样的？
这个算法的核心思想是，将虚拟DOM树转换成一个树形结构，然后递归地比较每个节点的属性和子节点，找出需要更新的部分。调和 : 协调, 协调过程的官方定义: VirtualDOM是一种编程概念, 在这个概念中, UI以一种理想化的, 或者说 虚拟的 表现形式保存在内存中, 并通过 ReactDOM 等类库使之与 真实的DOM 同步. 这个过程叫做协调(调和)总的来说，“栈调和”是React的核心机制之一，它保证了React的高效性和可靠性，使得React能够快速地更新DOM树，同时保持应用程序的正确性。
2023-05-12 11:30:15
263
原创 React实现添加购物车小车抛物线
cubic-bezier.com （可以设置好曲线弧度，直接复制）向页面底部抛掷小球，css动画, 立方贝塞尔曲线。点击按钮，先将小球移到点击的地方。设置个定时器（可以重复点击）创建一个小球Div ,
2023-04-26 08:25:18
211
原创 说说react 中jsx语法糖的本质？
jsx实质是一个语法糖，经由过程babel转成React.createEl函数，babel官网上能够把jsx转成ReactJS语法。刚开始剖析进去的时候，就是一个createEl函数。当这个函数执行完后，会前往一个vnode，经由过程vdompatch或许是其余的一个方式，最后衬着一个页面。jsx一种语法扩大，jsx编写的组件通过过程预处置babel剖析后，再交给React库衬着到指定的父容器下，构成最终的html页面。
2023-04-25 11:28:57
65
原创 说说如何借助webpack来优化前端性能？
我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。可以利用webpack的uglifyJsPlugin和ParallelUglifyPlugin来压缩js文件，利用cssnano来压缩css资源。将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存。提取公共第三⽅库:来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码。
2023-04-25 11:16:41
230
原创 说说你对webSocket的理解？
而在websocket出现之前，开发实时web应用的方式为轮询，不停地向服务器发送 HTTP 请求，问有没有数据，有数据的话服务器就用响应报文回应。如果轮询的频率比较高，那么就可以近似地实现“实时通信”的效果；更好的压缩效果：Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。三是成熟的http生态下有大量的组件可以复用，websocket则太新了一点。较少的控制开销：数据包头部协议较小，不同于http每次请求需要携带完整的头部。股票基金报价实时更新。
2023-04-25 10:51:14
70
原创 如何通过原生js实现一个节流函数和防抖函数？
当事件触发时，会执行这个事件的响应函数，如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数，不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的。当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间,当事件密集触发时，函数的触发会被频繁的推迟,只有等待了一段时间也没有事件触发，才会真正的执行响应函数。输入框中频繁的输入内容，搜索或者提交信息。游戏中的一些设计–王者荣耀 英雄的普攻；用户缩放浏览器的resize事件。频繁的点击按钮，触发某个事件。监听页面的滚动事件；
2023-04-25 09:22:45
56
原创 说说你对koa中洋葱模型的理解？
Koa的洋葱模型是以next()函数为分割点，先由外到内执行Request的逻辑，然后再由内到外执行Response的逻辑，这里的request的逻辑，我们可以理解为是next之前的内容，response的逻辑是next函数之后的内容，也可以说每一个中间件都有两次处理时机。因为很多时候，在一个app里面有很多中间件，有些中间件需要依赖其他中间件的结果，用葱模型可以保证执行顺序，如果没有洋葱模型，执行顺序可能出乎我们的预期。基于async/await的中间件洋葱模型机制。
2023-04-25 09:00:04
58
原创 说说你对react hook的理解？
在hook之前，react组件被分为函数组件与类组件两种，函数组件只能写出一个静态的UI组件，没有状态，没有生命周期方法。而类组件可以拥有自己的状态和生命周期方法，但是class组件在编写过程中容易出现很多问题，比如this绑定和大量代码难以维护等。通过hook，函数组件可以拥有相似于class组件的功能，例如state状态管理、生命周期、Context,Refs,并且可以在不需要修改UI结构的情况下实现复杂的特性，避免了类组件的一些问题。
2023-04-25 08:55:02
60
原创 如何使用css实现一个三角形？
clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的 URL 定义的路径或者外部 SVG 的路径。使用 border 实现三角形利用了高宽为零的容器及透明的 border 实现。也就是说，使用 clip-path 可以将一个容器裁剪成任何我们想要的样子。下面列出一些三角形形状的字符的十进制 Unicode 表示码。给一个高宽为零的容器设置不同颜色的 border,这一种有些独特，就是使用字符表示三角形。
2023-04-17 16:46:17
295
原创 说说你对受控组件和非受控组件的理解？应用场景？
在React中，可变状态通常保存在组件的状态属性中，并且只能使用setState（）进行更新，而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况，以这种由React控制的输入表单元素而改变其值的方式，成为受控组件。a.通过初始state中设置表单的默认值b.每当表单的值发生变化时，调用onChange事件处理器c.事件处理器通过事件对象event拿到改变后的状态，并更新组件的stated.一旦通过setState方法更新state，就会触发视图重新渲染，完成表单组件的更新。
2023-04-17 15:27:33
348
原创 说说React中setState执行机制？
当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用，可以通过点击按钮触发onclick事件，执行this.setState方法更新state状态，然后重新执行render函数，从而导致页面的视图更新。3 .如果未处于批量更新状态，将批量更新状态标识未true,用事务再次调用前一步的方法，保证当前组件加入了待更新的组件队列中去。2 .所有组件使用的是同一套更新机制，当所有组件didmount之后，父组件didmount，然后统一执行更新。
2023-04-17 15:17:30
384
原创 说说react的事件机制？
react可以取消某些事件处理，通过调用SyntheticEvent类中的preventDefault()方法，它可以阻止默认行为或者其它行为，比如在表单使用中可以取消表单提交事件，同时也支持重新设置和自定义参数，调用SyntheticEvent类中的stopPropagetion()方法可以阻止冒泡，在调用事件处理函数时，可以给它传递相关参数或者自定义参数，并且可以在处理程序中访问这些参数及数据。大致分为三个重要概念：事件合成、阻止冒泡、可取消。
2023-04-13 08:40:18
77
原创 什么是发布订阅模式，写出其核心实现代码？
发布订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。订阅者把自己想订阅的事件注册到调度中心，当发布者发布该事件到调度中心，也就是该事件触发时，由调度中心统一调度订阅者注册到调度中心的处理代码。
2023-04-12 09:17:14
210
原创 说说reduce方法的作用？自己手动封装一个reduce，写出其核心代码？
reduce方法是JavaScript中的一个高阶函数，它接收两个参数：一个回调函数和一个初始值。它的作用是进行累加操作，将数组中的每一个元素和初始值一起传入回调函数进行计算，得到单个的结果。然后将这个结果作为下一次计算的初始值，将下一个元素作为计算参数，重复调用回调函数进行计算。最终将每次计算得到的结果合成并返回一个单一的结果值。reduce方法可以用于数值、字符串、对象等类型数组，并且可以根据需要编写不同的回调函数来实现不同的功能。
2023-04-12 09:10:00
237
原创 React的路由的原理是什么，写出其实现的核心代码？
react路由是react应用程序中的一种导航系统，通过react router 来实现，它通过react的组件化机制来实现路由的配置，react路由的实现原理主要是通过浏览器的History API来实现URL的变化，并通过react组件来实现路由的映射和渲染。
2023-04-11 19:43:08
208
原创 说说你对TypeScript装饰器的理解及其应用场景？
TypeScript装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上，是一种在不改变原类和使用继承的情况下，动态地扩展对象功能，本质也不是什么高大上的结构，就是一个普通的函数，@expression 的形式其实是Object.defineProperty的语法糖。我们可以借助装饰器的一个特性，除了可以提高可读性之外，我们还可以针对已经存在的类，在不改变原有代码情况下对原来功能进行扩展。
2023-04-11 19:13:07
112
原创 Vuex的实现原理是什么，写出其实现的核心代码？
vuex是利用vue的mixin混入机制，在beforeCreate钩子前混入vuexInit方法，vuexInit方法实现了store注入vue组件实例，并注册了vuex store的引用属性$store。vuex的state是借助vue的响应式data实现的。getter是借助vue的计算属性computed特性实现的。1、在vue项目中先安装vuex。
2023-04-11 18:53:36
166
原创 ReactDOM.render是如何串联渲染链路的？
在初始化阶段，整个初始化的工作过程都是在为render 阶段做准备。在render阶段由 ReactDOM.render 发起的首屏渲染的场景下，它触发的就是 performSyncWorkOnRoot。finishSyncRoot标志着render方法的结束，在这个过程中，穿插了大量了beginWork、completeWork调用(这两个方法串联起来就是一个模拟递归的过程)，这个两个方法就是render的工作内容。表面上剖析的是首次渲染的渲染链路，实际上将包括同步模式下的挂载、更新链路都串联了一遍。
2023-04-11 18:27:27
127
原创 说说你对TypeScript中泛型的理解及其应用场景？
泛型的本质是参数化类型，通俗的将就是所操作的数据类型被指定为一个参数，这种参数类型可以用在类、接口和方法的创建中，分别成为泛型类，泛型接口、泛型方法。TypeScript中的泛型跟java中的泛型基本类似。泛型允许我们在强类型程序设计语言中编写代码时使用一些以后才指定的类型，在实例化时作为参数指明这些类型 在typescript中，定义函数，接口或者类的时候，不预先定义好具体的类型，而在使用的时候在指定类型的一种特性的时候，这种情况下就可以使用泛型。
2023-04-11 16:24:37
125
原创 说说webpack中常见的loader？解决了什么问题？
loader 用于对模块的"源代码"进行转换，在 import 或"加载"模块时预处理文件webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。在webpack内部中，任何文件都是模块，不仅仅只是js文件默认情况下，在遇到import或者require加载模块的时候，webpack只支持对js 和 json 文件打包像css、sass、png等这些类型的文件的时候，webpack则无能为力，这时候就需要配置对应的loader进行文件内容的解析。
2023-03-27 20:11:16
90
原创 Provider和connect的底层原理实现，写出其核心代码？
React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。上面代码中，TodoList是 UI 组件，VisibleTodoList就是由 React-Redux 通过connect方法自动生成的容器组件。但是，因为没有定义业务逻辑，上面这个容器组件毫无意义，只是 UI 组件的一个单纯的包装层。为了定义业务逻辑，需要给出下面两方面的信息。输入逻辑：外部的数据（即state对象）如何转换为 UI 组件的参数。
2023-03-27 20:03:30
248
原创 知道react里面的createPortal么，说说其使用场景？
当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上跳出其容器。例如，对话框、悬浮卡以及提示框。createPortal 将提供一种将子节点渲染到 DOM 节点中的方式，该节点存在于 DOM 组件的层次结构之外。
2023-03-27 19:56:59
127
原创 useEffect的依赖为引用类型如何处理？
useEffect的依赖为引用数据类型，可能会导致监听不触发，原因就是监听的同一个地址的时候，对象本身地址没变，所以监听的结果就是认为数据并没有改变从而不直接调用。可以转换成字符串，通过JSON.stringify()，监听字符串这样的，这样改变也会执行。如果数据是对象的话，可以监听对象里面的值，值是基本类型，如果值改变了，那么可以监听执行。在去修改对象和数据的时候，使用深拷贝或者浅拷贝，这样地址发生改变可以监听执行。
2023-03-27 19:52:38
520
原创 什么是垂直外边距合并？说说合并后的几种情况？
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。可以为父元素定义上内边距。
2023-03-27 19:48:01
175
原创 说说react diff的原理是什么？
React Diff算法的核心是对虚拟DOM树的深度优先遍历，它会先比较最外层的两个节点，然后继续比较内层的节点，直到遍历到最末尾的节点。如果比较的节点相同，它会比较其子节点；当比较两个节点时，它会先检查它们的类型，如果它们是相同的类型，它会比较它们的属性；如果它们是不同的类型，它会把旧节点删除，并且用新节点替换它。React Diff算法是React应用中最重要的部分之一，它负责更新用户界面，从而使用户能够看到最新的内容。它可以减少浏览器渲染开销，提高UI更新的性能，并且可以在比较节点时考虑其类型。
2023-03-27 19:44:40
145
原创 说说react中onClick绑定后的工作原理
react会将click这个事件统一存到一个对象中,回调函数的存储采用键值对(key/value)的方式存储在对象中，key 是组件的唯一标识id，value 对应的就是事件的回调函数,通过组件的key就能回调到相应的函数了。(1. react会对事件先进行注册,将事件统一注册到 document上。(2. 根据组件 唯一的标识key来对事件函数进行存储。- 抹平不同浏览器之间的兼容性差异。- 提供一个抽象的跨平台事件机制。- 件合成既可以处理兼容性问题。- 可以干预事件的分发。
2023-03-27 19:37:33
134
原创 说说React中setState和replaceState的区别？
在React中，setState和replaceState都是用于更新组件状态的方法。它们的区别在于，setState会将新的状态合并到原有状态中，而replaceState会直接替换原有状态。replaceState:替换状态。setState:更新状态。
2023-03-27 19:15:39
140
原创 说说你对useEffect的理解，可以模拟哪些生命周期？
如果比较熟悉 React class 的生命周期函数，我们可以把 useEffect 这个 hook 看作 componentDidMount、componentDidUpdate 和 componentWillUnmount 这三个函数的组合。例如 effect 中需要对 dom 进行监听，如果不使用清除函数，a 每更新一次都会再重新创建一个监听事件，导致一个 dom 上会绑定多个。其中 a 是我们自定义的状态，只有当 a 改变时 effect 函数体才会执行。2：每次渲染都执行，第二个参数不填。
2023-03-27 18:51:53
285
原创 拖拽功能实现
现在执行 npm install react-draggable，执行完后应该在你的 node_modules 中就装好了 react-draggable。我们按常规，使用 create-react-app 这个工具来创建项目。如果你本地没有安装 npx 的话，强烈推荐，使用非常方便。现在，我们希望当用户鼠标拖拽把手时，把手本身可以被移动。首先我们把 react-draggable 导入。在准备好 react 脚手架后，你就可以到目录里，执行 npm start把项目跑起来。App.css中代码。
2023-03-15 15:37:49
158
原创 说说你对webSocket的理解？
而在websocket出现之前，开发实时web应用的方式为轮询，不停地向服务器发送 HTTP 请求，问有没有数据，有数据的话服务器就用响应报文回应。如果轮询的频率比较高，那么就可以近似地实现“实时通信”的效果；更好的压缩效果：Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。较少的控制开销：数据包头部协议较小，不同于http每次请求需要携带完整的头部。
2023-02-25 11:42:44
141
原创 说说你对Object.defineProperty()的理解？
函数的第三个参数 descriptor 所表示的属性描述符有两种形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。一个描述符只能是这两者其中之一；该方法接受三个参数，第一个参数是 obj：要定义属性的对象，第二个参数是 prop：要定义或修改的属性的名称或 Symbol，第三个参数是 descriptor：要定义或修改的属性描述符。Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
2023-02-25 11:42:29
47
原创 for...in循环和for...of循环的区别？
for-of循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用for-in循环或内建的Object.keys()方法。of 是ES6新增的遍历方式，允许遍历一个含有iterator接口的数据结构（数组、对象等）并且返回各项的值，和ES3中的for…in 会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)，for…in 会遍历对象的整个原型链，性能非常差不推荐使用，而 for …of 遍历获取的是对象的键值，for…所以for in更适合遍历对象，不要使用for in遍历数组。
2023-02-25 11:42:24
74
原创 说说你对vue中mixin的理解？
在项目中，可能不同组件会有相同的功能，比如控制元素的显示和隐藏，如果他们的变量和规则也完全相同的话，就可以把这个功能单独提取出来，放在mixin.js中，再引入，就可以实现一样的功能了。引入的方法也分为全局混入和局部混入，局部混入就是在每个组件中引入，全局混入就是在main.js中通过Vue.mixin()引入。mixin是一种类，在vue中就是js文件，主要的作用是作为功能模块引用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂。
2023-02-25 11:41:57
72
原创 Js数据类型判断都有哪几种方式？它们的区别是什么？
constructor 判断方法跟instanceof相似,但是constructor检测Object与instanceof不一样,constructor还可以处理基本数据类型的检测,不仅仅是对象类型。通常出现在我们的条件判断中，用来判断数据类型的话就会非常的有局限性，比如判断一个变量是否为空,变量是否为数据等。instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。instanceof可以判类型是否是实例的构造函数。===（严格运算符）
2023-02-25 11:41:35
38
原创 数组常用方法及作用有哪些？
Array.isArray():检查是否为数组。some():数组循环满足一个条件返回true。unshift():向数组头部新增元素。filter():满足条件的返回新数组。shift():删除数组头部一个元素。push():向数组末尾新增元素。pop():删除数组末尾一个元素。indexOf():从前向后查找。map():返回运算完成的数组。reverse():反转数组。forEach():数组循环。concat():合并数组。slice():数组截取。sort():数组排序。
2023-02-24 19:47:54
47
原创 前端跨域的解决方案？
即配置一台和浏览器相同端口的服务器，浏览器访问代理服务器，代理服务器向目标服务器发送请求，由于服务器之间不存在跨域问题，代理服务器就可以拿到请求数据，而后因为浏览器和代理服务器端口号一致，不存在跨域问题，因此浏览器不会拦截从代理服务器收到的数据，顺利拿到请求数据。那什么是跨域呢，简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。同源策略默认地址是网页的本身。JSONP优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。
2023-02-24 19:45:17
88
原创 说说你对事件循环event loop的理解？
所有同步任务都在主线程上执行，形成一个函数调用栈（执行栈），而异步则先放到任务队列（task queue）里，任务队列又分为宏任务（macro-task）与微任务（micro-task）。Event Loop事件循环机制，其实就是JS引擎管理事件执行的一个流程，具体由运行环境确定。含义：不进入主线程，而进入“任务队列（task queue）”的任务，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。含义：在主线程上排队执行的任务，只有上一个任务执行完毕，才能执行后一个任务。
2023-02-24 19:40:43
45
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人