自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(140)
  • 收藏
  • 关注

原创 js闭包作用及使用场景

闭包可以帮助隐藏函数内部的变量,防止它们被外部代码直接访问,从而实现数据的私有化。比如,在 JavaScript 中并没有类似于其他编程语言的私有变量,但可以通过闭包来实现这一功能。:闭包可以保持函数执行时的环境,使得该函数可以在之后的执行中继续访问当时的环境变量。这意味着闭包可以让函数记住状态,即使这个函数已经执行完毕,也不会丢失这些状态。

2024-09-17 21:23:38 179

原创 Vue.nextTick 的工作机制

缓存的内容是一个回调函数队列。这些回调函数会在下一次 DOM 更新循环之后执行。Vue 使用微任务(如)或宏任务(如setTimeout)来确保这些回调函数的执行时机。这个机制确保了在进行 DOM 操作时,所有数据的变化都已经反映到 DOM 上,从而避免了可。

2024-09-15 17:05:29 1167

原创 Vue 2和Vue 3区别以及实现原理

Vue 2 选择是因为它在当时具有更好的浏览器兼容性,并且对于Vue 2的设计目标足够有效。然而,它有局限性,特别是在处理数组和动态属性时。Vue 3 选择Proxy是因为它提供了更强大的功能和更好的性能,尽管牺牲了一些兼容性,但它解决了Vue 2的一些固有问题,如无法监听动态属性和数组变化等。

2024-09-12 21:18:06 514

原创 Vue、React 生命周期有哪些?页面数据获取放在哪个生命周期做比较好?

是获取数据的最佳时机,因为此时组件已经被挂载,可以安全地进行 DOM 操作和异步请求。是获取数据的最佳时机,因为此时组件已经挂载,可以安全地进行 DOM 操作和异步请求。

2024-09-11 21:02:15 651

原创 js事件冒泡和事件委托

事件冒泡是事件传播机制的一部分,描述了事件从目标元素向上传播的过程。事件委托是一种编程技巧,利用事件冒泡机制,通过在父元素上绑定事件处理程序来处理子元素的事件。

2024-09-08 15:18:12 791

原创 JavaScript 作用链

作用链:描述了变量查找路径,从当前作用域到父级作用域再到全局作用域。作用域:包括全局作用域、函数作用域和块级作用域。闭包:函数可以记住并访问其词法作用域,即使函数在其词法作用域之外执行。理解作用链和闭包对于编写复杂的 JavaScript 代码和避免常见的作用域问题非常重要。

2024-09-01 10:42:38 1447

原创 useeffect和uselayout区别

useEffect:在渲染之后异步执行,不阻塞浏览器绘制。适用于大多数副作用操作。:在渲染之后同步执行,阻塞浏览器绘制。适用于需要立即操作 DOM 的场景。

2024-08-29 21:45:27 612

原创 数组算法排序实现

javascript复制代码Array.prototype.myFilter = function(callback, thisArg) {javascript复制代码function mergeSortedArrays(arr1, arr2) {javascript复制代码function parseQueryString(queryString) {javascript复制代码function numberWithCommas(num) {

2024-08-25 10:32:30 382

原创 Cookie 和本地存储,浏览器缓存

Cookie适合存储少量、需要与服务器交互的会话数据。本地存储适合持久化存储较大数据,且仅在客户端使用,不与服务器频繁交互。浏览器缓存用于提高资源加载效率,通过缓存静态资源减少网络请求。

2024-08-16 21:08:17 355

原创 CSS 垂直居中显示的方法

* 使容器高度为视口高度 */align-items: center;/* 垂直居中 */justify-content: center;/* 水平居中 */place-items: center;/* 水平和垂直居中 */vertical-align: middle;/* 垂直居中 */line-height: 100px;/* 与容器高度相同 */text-align: center;/* 水平居中 */text-align: center;/* 水平居中 *//* 设定固定高度 */

2024-08-13 21:57:16 529

原创 CSS 实现两边固定宽,中间自适应

* 两边固定宽度,中间自适应 */html复制代码<div class="container">html复制代码<div class="container">width: 200px;/* 两边固定宽度 *//* 中间自适应 */css复制代码.container {css复制代码.container {

2024-08-08 19:58:31 485

原创 React 常用 Hooks 和使用的易错点

typescript复制代码const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);typescript复制代码const memoizedCallback = useCallback(() => {中没有正确地清理副作用,导致内存泄漏。中忘记依赖数组,导致没有性能优化效果。中忘记依赖数组,导致无限循环。:性能优化,记住计算结果。:性能优化,记住函数定义。函数中返回新的状态对象。中返回一个清理函数。

2024-08-05 19:04:44 419

原创 TypeScript 及算法准备

typescript复制代码function mergeSortedArrays(arr1: number[], arr2: number[]): number[] {typescript复制代码function flattenArray(arr: any[]): any[] {typescript复制代码function flattenArray(arr: any[]): any[] {typescript复制代码function flattenArray(arr: any[]): any[] {

2024-08-02 23:27:55 959

原创 开发中可能会面临的真实问题及处理流程

接口返回的数据结构或字段名称与前端预期不符,导致页面展示错误。:确保前后端约定的接口文档是最新的,并且描述一致。:与后端开发人员沟通,确认是否有接口变更或数据异常。:使用工具(如Postman、浏览器开发者工具)调试接口请求,查看实际返回的数据。:如果后端接口无法立即修复,考虑在前端进行适配处理。:页面加载速度慢,影响用户体验。:使用浏览器开发者工具分析页面加载性能,找出瓶颈(如大文件加载、阻塞脚本等)。:压缩和合并CSS、JS文件,使用CDN加速资源加载。:对于图片和列表项等非关键资源,使用懒加载技术。

2024-08-01 19:56:02 454

原创 前端安全:CSRF 和 XSS 攻击介绍 以及 如何解决

跨站请求伪造(CSRF)是一种攻击方式,攻击者诱导用户在已认证的应用中执行未授权的操作。通常,攻击者会通过伪造的请求在受害者不知情的情况下执行这些操作。

2024-07-29 11:30:18 939

原创 列表很多怎么解决,lazyload解决,以及用过哪个插件

当列表中的项很多时,直接加载所有项会导致页面性能下降,特别是对于移动设备。Lazyload(懒加载)是一种解决方案,可以仅在需要时(通常是当用户滚动到页面的特定部分时)加载项。

2024-07-27 21:22:52 864

原创 deepEqual对比两个对象是否相等

是一种深度比较两个对象是否相等的函数。它不仅比较对象的值是否相同,还比较对象内部嵌套对象的值是否相同。// 引用相同或值相同。// 不是对象或其中一个是null。// 键不同或值不同。

2024-07-26 20:13:54 252

原创 Grid布局解决了什么问题

Grid布局是CSS的一项功能,它提供了一个基于网格的布局系统,可以在二维空间中更加灵活和简洁地排列和对齐网页内容。

2024-07-22 11:43:20 163

原创 redux执行流程

【代码】redux执行流程。

2024-07-16 21:32:29 203

原创 electron通信与持久化存储

脚本运行在一个具有有限访问权限的独立上下文中,负责暴露安全的 API 给渲染进程。:简单的键值对存储,主要用于小型数据和简单配置。:支持事务、索引、查询,适用于大型数据存储。:强大的查询能力、事务支持、单文件存储。:轻量级、无依赖、简单的查询和数据存储。:不适用于复杂的数据结构和大规模数据。:需要简单的 NoSQL 数据库特性。:数据持久化和备份,适合复杂应用。:需要关系型数据库的功能和性能。:简单的配置文件、用户数据。:功能有限,不适合复杂查询。:实现简单、无需额外依赖。:API 简单、易于使用。

2024-07-05 18:38:58 625

原创 import和require的区别

前者采用的是实时绑定方式,即导入和导出的值都指向同一个内存地址,所以导入的值会随着导出值变化;而后者在导出时是指拷贝,就算导出的值变化了,导入的值也不会变化,如果想要更新导入的值,就要重新导入。import是ES6标准中的模块化解决方案,require是node中遵循CommonJS规范的模块化解决方案。前者是编译时加载,必须放在模块顶部,在性能上比后者好一些;后者是运行时加载,理论来说放在哪里都可以。,前者目前不支持,但是已有提案。后者支持动态引入,也就是。前者是关键词,后者不是。

2024-07-03 20:49:01 194

原创 Generator 是怎么样使用的以及各个阶段的变化如何

Generators 是 JavaScript 中一种特殊类型的函数,可以在执行过程中暂停,并且在需要时恢复执行。Generator 函数被调用后,会返回一个指向内部状态的迭代器对象,但并不执行函数体内的代码,这个过程称为初始化阶段。Generator 函数返回的是一个迭代器对象,通过调用该迭代器对象的。方法时,Generator 函数会从函数体开始执行,直到遇到第一个。方法时,Generator 函数会执行到下一个。的对象,表示 Generator 函数执行结束。关键字后面表达式的值,并暂停函数的执行。

2024-07-01 21:57:56 474

原创 什么是requestAnimationFrame

是一个由浏览器提供的 JavaScript API,用于在下一次页面重绘之前执行指定的回调函数。它主要用于执行动画和其他需要高性能的操作,因为它可以让浏览器在执行动画之前做好准备,以获得更流畅的动画效果。

2024-06-30 21:16:14 205

原创 Node.js 事件循环的工作流程二

具体来说,事件循环会按照顺序依次检查各个阶段的回调队列,如果队列中有待处理的事件,则会处理这些事件。在每个阶段,事件循环都会检查是否有待处理的回调,如果有,则执行这些回调,并继续到下一个阶段。在这个阶段,事件循环会检查是否有新的 I/O 事件需要处理。在这个阶段,事件循环会处理新的 I/O 事件,并且会处理轮询队列中的回调。如果 poll 阶段没有 I/O 回调,并且没有到期的计时器,事件循环可能会阻塞在这里等待新的 I/O 事件。需要执行,则事件循环可能会阻塞在这个阶段,等待新的 I/O 事件。

2024-06-29 20:36:08 855

原创 Node.js 事件循环的工作流程

Node.js 的事件循环由六个主要阶段组成,每个阶段都有一个或多个回调队列。事件循环依次遍历这些阶段,并在每个阶段执行相应的回调函数。检索新的 I/O 事件,执行 I/O 回调(几乎所有的 I/O 都在这里进行),在适当的时候回阻塞在这里。这里的计时器并不保证会在精确的时间执行,只会在接近的时间执行。一般不涉及开发者的代码。这包括一些操作系统层面的回调,如网络通信的回调。执行几乎所有的回调(除了关闭的回调函数、计时器的回调函数和。执行一些关闭回调函数,如。处理轮询队列中的事件。计算轮询的超时时间。

2024-06-24 21:26:26 367

原创 前端10万条数据优化方案

使用虚拟化技术可以只渲染可见区域的数据,而不是将所有数据一次性渲染到 DOM 中。将数据分页加载,每次只加载并展示一页数据,而不是一次性加载所有数据。如果数据允许,可以使用索引或者键值对来加快数据查找的速度。在合适的情况下,可以使用缓存来存储已经获取的数据,避免重复的网络请求,提升数据加载的效率和页面响应速度。确保每个数据项的渲染过程尽可能简单和高效,避免在渲染过程中进行大量复杂的计算或者操作。:在客户端对数据进行搜索和过滤,只展示符合条件的数据。:检查组件渲染的性能和频率,优化不必要的重复渲染。

2024-06-20 17:51:33 495

原创 什么是FOUC(无样式内容闪烁)?你如何来避免FOUC?

FOUC(Flash of Unstyled Content,无样式内容闪烁)是指在网页加载过程中,用户可能会短暂地看到未应用样式的原始 HTML 内容,随后样式表加载完成后,页面才会以正确的样式重新渲染。这种现象会影响用户体验,显得页面加载不连贯和不专业。

2024-06-18 21:46:41 591

原创 解释一下 Flux

Flux 是 Facebook 提出的应用架构模式,用于管理 React 应用中的数据流和状态。它强调单向数据流,以解决复杂应用中数据和视图不一致的问题。动作是描述应用中发生事件的普通 JavaScript 对象。每个动作都有一个类型(type)属性,以及携带的数据(payload)。动作用于将数据从视图传递到存储。javascript复制代码const action = {调度器是一个中心集线器,用于将动作分发到存储。它注册所有存储,并将收到的每个动作传递给所有存储。

2024-06-15 17:53:26 1057 5

原创 什么是 prop drilling,如何避免?

是在 React 应用中常见的问题,指的是为了将数据从一个顶层组件传递到一个深层嵌套的子组件,不得不经过多个中间组件层层传递 props。虽然这种方法是可行的,但它会导致代码变得冗长、难以维护,并且增加了中间组件的复杂性,因为它们需要传递与自身无关的 props。

2024-06-10 18:52:46 1118

原创 说说new操作符具体干了什么?

如果构造函数显式返回一个对象,则返回该对象;否则,返回步骤 1 创建的新对象。调用构造函数,并将参数传递给它,使其可以初始化新对象的属性。这一步实现了新对象继承自构造函数的原型。绑定到新创建的对象。这样,构造函数内部的。创建一个新的空对象,并将其。

2024-06-07 21:07:56 290

原创 js垃圾回收机制

不同代的对象采用不同的回收策略,提高回收效率。在标记阶段结束后,垃圾回收器遍历内存中所有的对象,对于没有被标记的对象,认为它们是不再使用的对象。每个对象维护一个引用计数,当一个新的引用指向该对象时,计数加1,当引用被删除时,计数减1。垃圾回收器首先遍历所有的根对象,这些根对象一般是全局对象、局部变量和函数调用链。对所有能直接或间接从根对象访问到的对象进行标记,表示这些对象还在使用中。如果一个对象可以通过引用链从根对象到达,则认为该对象是可达的。当引用计数变为0时,对象被认为是不可达的,可以被回收。

2024-06-05 21:08:03 417

原创 React Navite环境搭建

在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的33.0.0版本。你可以同时安装多个其他版本。你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是。打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中。

2024-06-03 20:49:56 800

原创 redux源码代码实现

【代码】redux源码代码实现。

2024-05-04 21:54:36 106

原创 redux实现原理

为了描述状态如何随时间变化,你会定义 reducers,它们是纯函数,接收先前的状态和一个 action,并返回一个新的状态。在 reducer 中,你不应该做任何改变原始状态的操作,而是返回一个新的状态对象。:Redux 应用程序的所有状态都存储在一个单一的 JavaScript 对象中,称为“状态树”或“状态存储”。这种模式使得应用程序中的组件可以订阅状态的变化,并在状态发生变化时更新自己。:在 Redux 中,状态是只读的,不能直接修改。要更改状态,必须发起一个 action,描述发生的事件。

2024-05-03 20:31:27 245

原创 cookie数据始终在同源的http请求中是否会携带(即使不需要)

与SessionStorage和LocalStorage不同,Cookie数据在每次浏览器与服务器进行同源通信时都会自动包含在HTTP请求中,无论服务器是否需要这些数据。:Cookie中可能包含敏感的用户信息,如果没有正确设置安全措施(如HttpOnly、Secure标志),可能会暴露于某些类型的攻击,如跨站脚本攻击(XSS)。:由于Cookie数据总是随请求发送,如果Cookie的大小很大,可能会增加网络传输的负载,从而对性能产生一定的影响。

2024-04-27 10:02:55 400

原创 Cookie是在所有同源窗口中共享的,是否共享

当浏览器与服务器进行交互时,满足同源策略(SameSite)的Cookie会被自动附加到请求中,这意味着同一个域名下的多个页面可以共享这些Cookie数据。:Cookie可以设置为会话Cookie(浏览器关闭后失效)或持久性Cookie(设置了有效时间,即使浏览器关闭也会保留在硬盘上)。这意味着如果两个窗口或标签页属于同一源(相同的协议、主机和端口),它们将能够访问和共享相同的Cookie。如果一个页面产生的Cookie被限定在特定路径下,那么只有同一目录下或子目录下的页面才能访问这个Cookie。

2024-04-23 16:07:46 378

原创 sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面,是否会共享

一旦用户关闭了窗口或标签页,存储在 sessionStorage 中的数据就会被清除。需要注意的是,即使在相同的浏览器和相同的页面下,如果页面是在新的窗口或标签页中打开的,那么它们之间的 sessionStorage 也是不共享的。这是因为 sessionStorage 的设计初衷是为了在单个页面会话期间保持数据的独立性,而不是为了在不同页面或窗口之间共享数据。总结来说,sessionStorage 提供了一种在单个页面会话期间存储数据的临时解决方案,但它并不适用于需要在不同窗口或会话之间共享数据的场景。

2024-04-22 16:57:28 508

原创 js所有的引用类型(数组,对象,函数)都具有对象的特性

指的是Boolean、Number和String,虽然它们本质上是基本数据类型,但它们也具有对象的特性,如可以调用方法等。:函数是一段可执行的代码块,可以作为对象的方法,也可以独立存在。:这是最基础的对象类型,可以包含属性和方法,属性的键可以是字符串或者符号,属性值可以是任意类型的数据。:如Math、JSON等,这些都是预定义的对象,具有一系列内置的属性和方法,可用于执行特定的任务。:日期对象用来处理和操作日期和时间,提供了一系列方法和属性来进行日期计算和格式化输出。

2024-04-15 19:25:28 189

原创 经典面试题数组常用方法都有哪些

可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入 4 和 6。可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数。这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回-1。如果不想改变数组中的所有元素,而只是想改变其中一部分,那么可以使用可选的起始位置参数与结束位置参数(不包括结束位置的那个元素)

2024-04-08 18:42:57 943

原创 vue实例的data属性,可以在哪些生命周期中获取到

在实例创建完成后被立即调用。此阶段已完成数据观测,属性和方法的运算,实例方法的调用,但是挂载阶段还没开始,所以不能访问到DOM。在这个阶段,data属性已经完全可用,可以进行访问和操作。:在实例初始化之后,数据观测 (data observer) 和事件配置之前被调用。在这个阶段,data属性已经可以被访问,但是事件监听器和计算属性等还没有被初始化。替换,并挂载到实例上去之前被调用。在这个阶段,data属性仍然可以访问。:在挂载开始之前被调用,即模板编译成渲染函数之后,el被新创建的。

2024-03-28 14:56:08 686

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除