- 博客(32)
- 收藏
- 关注
RSS订阅原创 vue如何实现百万条数据以及数据的批量导出
json-server是一个基于nodejs的restful api 模拟器，可以将JSON文件转化为可访问的api。在项目中使用json-server -w .\db.json -p 3001运行。生成随机数据，拦截ajax请求，使用mockjs可以生成字符串，数字，布尔值，数组等。首先我们可以通过mockjs或者json-server来模拟后端提供真实数据。安装：json-server。创建：json-server。启动：json-server。这两种方法都可以实现批量导出哦~
2023-12-11 18:23:08
691
原创 websocket以及心跳机制的实现
在不包含头部的情况下，服务端到客户端的包头只有2~10字节（取决于数据包长度），客户端到服务端的的话，需要加上额外的4字节的掩码。Long poll（长轮询）：其中采用的是阻塞性的方案，客户端向服务器发起ajax请求，服务器挂起该请求不返回数据直接有新的数据，客户端接收到数据之后再次执行long poll；可以看到，基于 HTTP 协议的方案都包含一个本质缺陷 —— 「被动性」，服务端无法下推消息，仅能由客户端发起请求不断询问是否有新的消息，同时对于客户端与服务端都存在性能消耗。
2023-12-11 11:48:08
1393
1
原创 fouc是什么，如何解决fouc这个问题
fouc是指在网页加载过程中，由于css样式加载比较慢或延迟，导致网页内容在最初渲染的时候没有样式，呈现出来的是最原始的状态。
2023-11-02 14:43:19
162
原创 vue2面试题100问
组件中data的定义必须是一个函数：每个组件需要拥有自己的数据内容，并且不希望干扰到其它的组件内容，如果定义成Object对象的话，那么将会作用于所有的组件内容，在一个组件中进行data数据修改将会影响到其它组件。所以我们需要将它定义成函数的形式，函数返回的对象才是真正意义上数据的存储仓库(data)，这样设计的目的是为了让每个组件间的数据都是独立的，互不影响。当组件的嵌套与Html5的规范产生冲突时我们可以使用is属性来解决冲突，比如：
2023-10-25 11:52:30
113
原创 说说Promise和async/await 的区别？
而 async/await 是基于 Promise 的语法糖，使用更接近同步代码的方式处理异步操作，使用 `async` 关键字定义异步函数，并在函数内部使用 `await` 关键字等待异步操作的结果。它的语法更接近同步代码，使用 `await` 可以暂停代码的执行，等待异步操作完成后再继续执行后续的代码。Promise 是基于链式调用的方式处理异步操作，通过 `.then()` 和 `.catch()` 方法来处理成功和失败的情况。
2023-09-04 12:00:49
82
原创 说说你对浏览器缓存机制的理解
当命中协商缓存时，浏览器会发送一个带有 If-Modified-Since 或 If-None-Match 请求头的条件 GET 请求到服务器，如果服务器判断资源没有发生变化，返回 304 状态码，浏览器就会从缓存中读取资源。缓存策略：根据资源的变化频率和重要性，合理设置缓存策略可以提高缓存的效果。例如，静态资源（如 CSS、JS）可以设置一个较长的缓存时间，而动态生成的页面则应该禁用缓存或使用较短的缓存时间。例如，强缓存的内容通常存储在浏览器的内存中，协商缓存的内容存储在浏览器的磁盘缓存中。
2023-09-03 19:27:37
64
原创 说说浏览器事件循环和nodeJs的事件循环的区别？
但是在node中，process.nextTick()的优先级要高于其他微任务，也就是说，在两个阶段之间执行微任务时，若存在process.nextTick()，则先执行它，然后再执行其他微任务。在执行的该微任务的过程中，如果又遇到宏任务则将其推入宏任务队列，遇到微任务则推入微任务队列。该过程中，若遇到宏任务则将其推入宏任务队列，若遇到微任务，则推入微任务队列。每当执行完一个宏任务，不管宏任务队列中是否还存在宏任务，都必须去检查微任务队列中是否有微任务，若存在微任务，则开始执行微任务。
2023-09-03 19:26:06
61
原创 说说你对Event Loop的理解
JavaScript代码运行时，任务分为宏任务和微任务两种，Event Loop也将任务队列分为宏队列和微队列分别管理宏任务和微任务，宏队列和微队列也具备队列特性：先进先出。执行第一个宏任务，打印2，接着执行new Promise，打印3，Promise.then属于微任务，挂起放到微任务队列中。选择当前要执行的宏任务队列，选择一个最先进任务队列的宏任务，如果没有宏任务，则会跳转至微任务的执行步骤。同步任务执行完成→js执行栈为空→去查找微任务：微任务为空→查到宏任务。将运行完的宏任务从宏任务队列中移除。
2023-09-03 19:24:27
48
原创 说说你对ES6中Generator的理解
调用迭代器的 next(value) 方法时，可以将一个值传递给生成器函数，这个值会成为上一次暂停的 yield 表达式的结果。总结来说，Generator 是 ES6 中新增的一种特殊函数，通过使用 yield 关键字和迭代器对象，它可以按需生成多个值，并且具有暂停和恢复的能力。暂停和恢复：生成器函数具有暂停和恢复的能力，它可以在每次生成一个值后暂停，并保留当前的状态。ES6中引入了 Generator（生成器）这一概念，它是一种特殊的函数，可以产生多个值，并且能够在这些值之间进行暂停和恢复。
2023-09-03 19:20:38
49
原创 说说你对原型和原型链的理解？
对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型。，于是就这样一直找下去，也就是我们平时所说的原型链的概念。对象是通过引用来传递的，当修改原型时，与之相关的对象也会继承这一改变。当一个对象调用的属性/方法自身不存在时，就会去自己。引擎会先看当前对象中是否有这个属性， 如果没有的。内部属性，这个属性所对应的就是该对象的原型。，当我们访问一个对象的属性时。当我们需要一个属性的时，
2023-09-03 19:19:53
41
原创 Apply/call/bind的原理是什么？bind、call、apply 区别？如何实现一个bind?
以上就是我们在bind的时候之传入了一个参数，然后在执行这个bind之后的新函数（这里后面就称之为绑定函数）又传入了两个参数，其实这中间有一个过程就是参数合并，合并后的顺序就是相当于把bind执行的第二个参数及之后参数与新绑定函数参数做了一个合并，新绑定函数参数会基于bind方法函数第二个参数及之后参数结束位置开始进行合并。还要注意一个地方，就是通过new关键字去实例这个绑定函数时，也就是通过new的方式创建一个对象，bind()函数在this层面上是没有效的，但是在参数层面上是有效的。
2023-09-03 19:18:48
43
原创 Vue2和Vue3的区别至少说6点
vue2所有模块是混杂在一起的，不利于扩展vue3将响应式，运行时的相关功能都拆成了独立模块，渲染的逻辑也拆成了‘平台无关渲染逻辑’+‘待定平台渲染API’（比如web开发就加入浏览器api）
2023-09-02 14:24:13
58
原创 为什么for循环比forEach性能高？
foreach语句是for语句的特殊简化版本，在遍历数组、集合方面，foreach为开发人员提供了极大的方便。在复杂的循环设计时，还是应该使用for循环更加灵活。
2023-08-22 09:19:20
193
1
原创 在使用redux过程中，如何防止定义的action-type的常量重复？
1.使用命名空间（Namespace）：为每个模块或功能区域定义一个独特的命名空间，将相关的action-type常量放在该命名空间下。2.使用统一的命名规范：定义一套统一的命名规范，例如使用大写字母和下划线来表示常量。确保在整个应用中使用相同的命名规范，以避免重复。3.使用工具库或插件：可以使用一些工具库或插件来帮助管理和避免action-type常量的重复。以上方法可以帮助你在使用Redux时避免定义的action-type常量重复。方法来自动生成唯一的action-type常量。
2023-08-22 09:06:55
112
1
原创 redux-saga和redux-thunk的区别与应用场景
redux-thunk相当于是基于store的升级，一般情况，我们传给store的action是一个对象，但是通过redux-thunk中间件，我们可以把部分的业务逻辑（异步请求）等放在action中进行处理。redux-saga在store的index文件中创建saga中间件连接到store，saga中间件可以监控派发action,如果有action.type值与监控的变量一致，则执行该函数的内容，在这个函数中也可以再派发一个新的action。
2023-08-22 09:02:52
204
1
原创 redux中同步action与异步action最大的区别是什么？
同步action是指在Redux中的action创建函数（Action Creator）返回一个普通的JavaScript对象，该对象描述了要发送给Reducer的操作。当异步action被触发时，Redux中间件会拦截它并执行返回的函数，函数内部可以进行一些异步操作，并最终通过同步action来更新应用程序的状态。因此，同步action是立即执行的，而异步action是通过中间件来处理异步操作并最终触发同步action来更新应用程序的状态。是一个异步action创建函数，它返回一个函数。
2023-08-22 08:57:22
89
1
原创 redux本来是同步的，为什么它能执行异步代码？实现原理是什么？中间件的 实现原理是什么？
我们用执行同步的时候，都是先发起一个dispatch（1.先在actionCreator()中生成一个action对象。2.由dispatch方法将action传到reducer。3.reducer中计算新state4.新state保存到store中5.因为容器组件将state作为props传给展示组件，state更新后，展示组件渲染更新的部分（因为props更新了）
2023-08-20 21:23:55
49
1
原创 谈谈你对immutable.js的理解？
通过Immutable.js创建的数据我们称为Immutable Data，Immutable Data一旦创建，就不可再更改，对其进行的添加，修改，删除操作都会生成一个新的Immutable Data。immutable的最大问题是比较容易与js的原生对象混淆，同时许多操作都与js中的处理原生对象的不同，例如immutable中使用map，list分别表示object和array，而在map中获取到值，需要使用。并且每次修改时都会生成新的对象，按照js的习惯，可能会忘记赋值操作。
2023-08-20 21:20:00
44
1
原创 react组件之间如果通信
2.子传父：props+回调的方式，父组件向子组件传递props进行通信，props为作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数传递到父组件的作用域中。5.跨层级通信：context就是为了共享对于一个组件库而言是全局的数据，使用context提供了组件之间通讯的一种方式，可以共享数据，其他数据都能读取对应的数据。3.兄弟组件通信：兄弟组件的传递就是父组件作为中间层来实现数据的互通，通过使用父组件传递。1.父传子：从父组件可以通过向子组件传递props的方法进行通信。
2023-08-20 21:13:02
49
1
原创 React的props.children使用map函数来遍历会收到异常显示，为什么？应该 如何遍历？
props.children 是一个单个元素而不是数组：在 React 中，如果 props.children 只包含一个子元素，则会作为单个元素传递，而不是作为数组。因此，无法对单个元素应用 map 函数。props.children 不是一个数组：props.children 可能是一个非数组的类型，例如对象、字符串或单个 React 元素。map 函数只能应用于数组类型，因此会导致错误。2.处理单个子元素的情况：如果你希望能够处理单个子元素，可以在使用。是单个元素，则直接处理该元素。
2023-08-20 21:08:52
66
1
原创 说说react新出来两个钩子函数是什么？和删掉的will系列有什么区别？
在React16的Fiber架构中，调和过程会多次执行will周期，不再是一次执行，失去了原有的意义。此外，多次执行，在周期中如果有setState或dom操作，会触发多次重绘，影响性能，也会导致数据错乱。2、新生命周期中新增了两个钩子，分别为getDerivedStateFromProps（从props中得到衍生的state）和getSnapshotBeforeUpdate。使用场景：若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps。
2023-08-20 21:03:52
52
1
原创 react常见面试题
react常见的面试题20道1.props和state相同点和不同点？render方法在哪些情况下会执行？2.shouldComponentUpdate有什么作用？3.说说React中的虚拟dom？在虚拟dom计算的时候diff和key之间有什么关 系？
2023-08-20 20:46:10
29
1
原创 说说React中的虚拟dom？在虚拟dom计算的时候diff和key之间有什么关系？
实际上它只是一层对真实DOM的抽象，以JavaScript对象（VNode节点）作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作时这棵树映射到真实环境上，创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应。在react中当组件的状态发生变化时，react会先生成一个新的dom树，然后通过比较新旧两个dom树的差异，找出需要更新的部分，只更新这些部分的真实dom，而不是对整个页面进行渲染。
2023-08-20 20:44:56
54
1
原创 shouldComponentUpdate有什么作用？
nextProps：表示下一个propsnextState：表示下一个state的值shoudldComponentUpdate()的返回值，判断React组件的输出是否受到当前的state或props更改的影响，默认行为使state每次发生变化组件都会重新渲染//组件是否需要更新，需要返回一个布尔值，返回true则更新，返回flase不更新，这是一个关键点。
2023-08-20 20:35:20
141
1
原创 说一下props和state相同点和不同点？render方法在哪些情况下会执行？
state主要作用是用于组件保存，控制及修改自己的状态，它只能在constructor中初始化，state是可以被改变的，state放改动的一些属性，比如点击选中，再点击取消，类似这种属性就放入带state中，注意：没有state的叫做无状态组件，多用props少用state，多写无状态组件，注意：修改state的值时，必须通过调用setState方法，当我们调用this.setState方法时,React会更新组件的数据状态，并且重新调用render方法。Props和state都是原始性的。
2023-08-20 20:27:53
88
1
原创 函数重载的理解
函数重载或者方法重载适用于某种功能一样，但是细节有不一样，也就是当我们多次调用函数时传递不同参数数量或者类型，函数会做出不同处理。2.外部调用函数重载时，只能调用重载的前面（函数体前面的叫做签名），不能够调用使用的函数签名。4.只有一个函数体，只有实现签名配备课函数体，所有重载签名只有签名，没有配置函数体。比如说一个函数有多个参数，每一个参数代表不同意义，这个时候就可以使用函数重载。3.调用函数重载时会根据传递的参数来判定调用的那个函数。1.一个或多个签名组合叫做函数重载。
2023-08-15 21:50:32
40
1
原创 react项目中如何实现打电话的功能
请确保在实现打电话功能时，用户明确知晓并同意进行电话操作。此外，不同的设备和浏览器可能对打电话功能的支持有所不同，因此在测试和使用时请注意兼容性。3.当用户点击按钮或链接时，浏览器会自动打开设备的电话应用，并拨打指定的电话号码。1.在React组件中添加一个触发打电话的按钮或链接。注意：为了使电话号码在移动设备上能够正常工作，需要以。事件处理函数中，调用浏览器提供的。注意：要在手机上实现操作。方法，并传入电话号码。
2023-08-10 15:51:26
460
1
原创 git的安装和使用（常用命令）
按标红的往下走我下载的版本是Git-2.40.0-64-bit.exe，接下来我们就对这个版本进行安装工作。下载后，开始安装点击[next]到第二步选择安装目录，可以点击‘Browse…’更换目录，也可以直接在方框里更改，点击【Next】进入下一步选择安装组件，下面有对应的注释注：最后一个选项打勾的话，需要下载 Windows Terminal 配合 Git Bash使用选择开始菜单文件夹选择默认编辑器Git 安装程序里面内置了 10 种编辑器供你挑选，比如AtomNotepad。
2023-08-07 15:31:16
159
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人