- 博客(73)
- 收藏
- 关注
RSS订阅原创 react useState 原理
通过检查 state[stateIndex] 是否存在来保持状态在重新渲染间的一致性。通过 stateIndex 来追踪当前状态位置，保证多次调用顺序一致。使用三个全局变量来模拟React的状态管理机制。通过闭包确保每个状态都有独立的更新函数。
2026-01-24 16:30:00
60
原创 JavaScript 闭包的理解
一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围）， 这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。形成原因就是操作的是同一个词法环境，因为onclick后面的函数都是一个闭包，但是操作的是同一个词法环境。解决办法：使用匿名函数之后，就形成一个闭包， 操作的就是不同的词法环境。可以让局部变量常驻在内存中；
2026-01-24 12:00:37
47
原创 JavaScript实现一个数组对象的去重
实现思路：如果当前数组的第 i 项在当前数组中第一次出现的位置不是 i，那么表示第 i 项是重复的，忽略掉。实现思路：新建一个数组，遍历去要重的数组，当值不在新数组的时候（indexOf为-1）就加入该新数组中；实现思路：给传入的数组排序，排序后相同的值会相邻，然后遍历排序后数组时，新数组只加入不与前一值重复的值。实现思路：双层循环，外循环表示从0到arr.length，内循环表示从i+1到arr.length。它类似于数组，但是成员的值都是唯一的，没有重复的值。将没重复的右边值放入新数组。
2026-01-23 11:59:52
75
原创 JavaScript中两个数组怎么取交集(差集、并集、补集)
使用 ES5 语法来实现虽然会麻烦些，但兼容性最好，不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。1. ES6 中可以借助扩展运算符（...）以及 Set 的特性实现相关计算，代码也会更加简单些。2. 对 Array 进行扩展。
2026-01-23 10:24:47
78
原创 JavaScript 的浅拷贝和深拷贝
浅拷贝和深拷贝都只针对于引用数据类型，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存；深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象；2. 使用字符串转换实现深拷贝：JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象。3. 第三方库lodash，提供的_.cloneDeep方法。浅拷贝只复制对象的第一层属性，深拷贝可以对对象的属性进行递归复制。1. Object.assign方法。
2026-01-22 10:51:51
59
原创 前端获取当前页面URL
5、window.location.pathname (设置或获取与 URL 的路径部分（就是文件地址）)6、window.location.search (设置或获取 href 属性中跟在问号后面的部分)2、window.location.protocol (设置或获取 URL 的协议部分)4、window.location.port (设置或获取与 URL 关联的端口号码)3、window.location.host (设置或获取 URL 的主机部分)8.2 split拆分法。
2026-01-22 10:10:12
103
原创 前端大文件上传
此外断点续传还需要考虑切片过期的情况：如果调用了mkfile接口，则磁盘上的切片内容就可以清除掉了，如果客户端一直不调用mkfile的接口，放任这些切片一直保存在磁盘显然是不可靠的，一般情况下，切片上传都有一段时间的有效期，超过该有效期，就会被清除掉。基于上述原因，断点续传也必须同步切片过期的实现逻辑。上传暂停的实现也比较简单，通过XMLHttpRequest.abort可以取消当前未完成上传切片的上传，实现上传暂停的效果，恢复上传就跟断点续传类似，先获取已上传的切片列表，然后重新发送未上传的切片。
2026-01-21 10:44:04
541
原创 前端文件异步上传怎么实现
把form的target属性设置为一个看不见的iframe，那么返回的数据就会被这个iframe接受，因此只有该iframe会被刷新，至于返回结果，也可以通过解析这个iframe内的文本来获取。base64编码的缺点在于其体积比原图片更大（因为Base64将三个字节转化成四个字节，因此编码后的文本，会比原文本大出三分之一左右），对于体积很大的文件来说，上传和解析的时间会明显增加。form表单上传大文件时，很容易遇见服务器超时的问题。_self，默认值，在相同的窗口中打开响应页面。
2026-01-21 10:08:17
392
原创 cookie、sessionStorage、localStorage 区别
sessionStorage和localStorage：可以存储字符串，也可以存储对象（通过JSON.stringify和JSON.parse转换）。sessionStorage和localStorage：存储在客户端，但不会在每次请求时发送到服务器。sessionStorage和localStorage：有现成的API（setItem、getItem、removeItem、clear等）。sessionStorage：适合存储临时数据，如表单数据、页面刷新时保留的数据等，仅在当前会话有效。
2026-01-20 14:30:00
621
原创 css 盒子塌陷
1. 最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面。当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。有很多人是这么解决的，但是我们并不推荐，因为其引入了不必要的冗余元素。
2026-01-20 09:27:52
322
原创 前端必须知道的：BFC（Block Formatting Context，块格式化上下文）
3. 每个元素的margin Box的左边， 与包含块border Box的左边相接触，（对于从左到右的格式化，否则相反）。3. 可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内）BFC基本概念：BFC是CSS布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素。4. BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。6. 计算BFC的高度时，浮动元素也参与计算。
2026-01-19 14:16:19
394
原创 JavaScript 的 new会发生什么
当存在显示的返回时，返回return后面的内容。设置新对象的constructor属性为构造函数的名称，设置新对象的。//{}.构造函数();属性指向构造函数的prototype对象；扩展了新对象的原型链。
2026-01-19 10:39:17
89
原创 Vue-Router 哈希路由 vs 历史路由详解
需要服务器支持（所有路由返回 index.html）SEO 不友好，爬虫可能忽略 hash 部分。不会发起服务器请求（hash变化）SEO 友好（配合 SSR 更佳）可以利用完整的 URL 进行分享。URL 不美观，有 # 符号。兼容性好（支持 IE8+）URL 美观，无 # 符号。完整的 URL 路径语义。部署简单，适合静态托管。兼容性要求 IE10+javascript文件。2. History API 详解。1. 哈希模式（无需配置）2. 历史模式（必须配置）
2026-01-18 18:45:00
416
原创 CSS 伪类和伪元素
示例：::before, ::after, ::first-line。示例：:hover, :focus, :first-child。::before 和 ::after 的 content 属性必填吗？语法：双冒号 ::（CSS3规范，单冒号仍兼容）哪些伪元素不能和 ::before/::after 组合使用？:nth-child 和 :nth-of-type 的区别？:nth-of-type 在同类型元素中计数。:nth-child 在所有子元素中计数。语法不同（: 和 ::）伪类和伪元素的区别？
2026-01-18 13:55:22
133
原创 JavaScript的Map 和 Set，WeakMap 和 WeakSet
通常，当对象、数组之类的数据结构在内存中时，它们的子元素，如对象的属性、数组的元素都被认为是可达的。例如，如果把一个对象放入到数组中，那么只要这个数组存在，那么这个对象也就存在，即使没有其他对该对象的引用。set.delete(value) —— 删除值，如果 value 在这个方法调用的时候存在则返回 true ，否则返回 false。map.delete(key) —— 删除指定键对应的值，如果在调用时 key 存在，则返回 true，否则返回 false。的集合，它仅允许对象作为键，且是弱引用。
2026-01-17 14:00:00
535
原创 前端必须知道的：Less 基础——@import At 规则
以下引用自less官网：https://less.lang.ac.cn/features/。在标准 CSS 中， at 规则必须位于所有其他类型规则之前。但 Less 不关心你将 语句放在哪里。示例文件扩展名 语句可能会根据文件扩展名以不同的方式被 Less 处理示例可以使用以下选项来覆盖此行为。语法：已实现以下导入选项示例：使用 导入外部文件，但除非引用，否则不要将导入的样式添加到编译输出中。示例：想象一下， 标记导入文件中每个 at 规则和选择器带有 reference 标记，按正常
2026-01-17 08:52:44
589
原创 前端必须知道的：Less 基础——范围
以下引用自less官网：https://less.lang.ac.cn/features/。直观地说，混合可以访问定义范围。已弃用的混合范围功能这是一些可能在未来版本中删除的混合范围功能的列表。这是违反直觉的，因为首选方法：传递您希望对混合可见的变量。#2.（已弃用）调用者范围可以访问混合中的变量Mixin 将把它们自己的变量推送到调用者作用域，但仅在变量未在本地定义时才这样做。这是违反直觉的，因为此外，通过引入映射，你可以直接检索变量值（和 mixin）。首选方法:#
2026-01-16 14:30:00
704
原创 前端必须知道的：Less 基础——映射
以下引用自less官网：https://less.lang.ac.cn/features/。通过将命名空间与查找 语法结合起来，你可以将你的规则集/混合变成映射。输出混合作为映射更加通用，这是因为命名空间和重载混合的能力。输出你还可以通过别名混合来简化此操作。即请注意，如果查找值生成了另一个规则集，您可以追加第二个 查找，如下所示通过这种方式，规则集和变量调用可以模拟一种类似于混合的“命名空间”。至于使用混合还是将规则集分配给变量作为映射，这取决于您。您可能希望通过重
2026-01-16 10:16:36
64
原创 前端必须知道的：Less 基础——合并属性
以下引用自less官网：https://less.lang.ac.cn/features/。 功能允许将来自多个属性的值聚合到单个属性下的逗号或空格分隔列表中。 对于背景和变换等属性很有用。示例输出空格示例输出为了避免任何意外的连接， 需要在每个连接挂起声明中使用显式的 或 标志。
2026-01-15 10:09:55
42
原创 前端必须知道的：Less 基础——混合
独立规则集会看到调用者的变量和混合selector {编译为selector {从定义中可访问的变量和混合会胜过调用者中可用的变量和混合selector {编译为selector {
2026-01-15 09:34:16
635
原创 前端必须知道的：Less 基础——Extend
以下引用自less官网：https://less.lang.ac.cn/features/。在上面的规则集中， 选择器将“扩展选择器”（）应用到 类，无论 类出现在何处。声明块将保持原样，但不会引用扩展（因为扩展不是 css）。因此，以下内容输出请注意 选择器如何输出为 - 扩展在输出前被删除，选择器块保持原样。如果该块中没有放置任何属性，则将其从输出中删除（但扩展仍然可能影响其他选择器）。扩展要么附加到选择器，要么放置到规则集中。它看起来像一个伪类，带有选择器参数，后面可以跟关键
2026-01-14 15:32:30
656
原创 前端必须知道的：Less 基础——父选择器
以下引用自less官网：https://less.lang.ac.cn/features/。 运算符表示 嵌套规则 的父选择器，最常见于将修改类或伪类应用于现有选择器结果为请注意，如果没有 ，上面的示例将导致 规则（匹配 标签内悬停元素的后代选择器），而这通常不是我们使用嵌套 时想要的。“父选择器”运算符有各种用途。基本上，任何时候您需要嵌套规则的选择器以默认方式以外的其他方式组合时。例如， 的另一个典型用法是生成重复的类名输出多个 可以在选择器中出现多次。这使得在不重复
2026-01-14 09:42:59
72
原创 前端必须知道的：Less 基础——变量
在样式表中看到几十次（如果不是几百次）重复相同的值的情况并不少见a,.link {.widget {通过提供一种从单个位置控制这些值的方法，变量使你的代码更容易维护// Usagea,.link {a:hover {.widget {
2026-01-13 15:03:16
260
原创 https的Get和Post的区别
6、get将header和data一起发送；post将header先发送，再发送data。7、get不用每次都与数据库连接；post必须与数据库交互。4、get请求参数会保留在浏览器历史记录；5、get会产生一个TCP数据包；3、get进行URL编码；post请求有多种编码。2、get传参有长度限制；1、get通过URL传参；post通过body传参‘本质都是TCP连接，并无差别。
2026-01-12 14:15:00
171
原创 前端必须知道的：单元测试常用的比较方法有哪些？
toContain()：用于检查数组中是否包含特定元素，或字符串中是否包含子字符串。toMatchSnapshot()：用于快照测试，确保组件在未来的更改中保持一致。toBe()：用于基本数据类型的比较（使用 Object.is()）。toEqual()：用于深度比较对象和数组，比较其内容是否相等。toMatch()：用于字符串模式匹配，可以使用正则表达式。toThrow()：用于验证函数调用是否抛出异常。toBeTruthy()：用于验证值是否为真。toBeFalsy()：用于验证值是否为假。
2026-01-12 10:01:16
148
原创 JavaScript 基础数据类型 Symbol的使用场景
Symbol 提供了一种生成唯一标识符的方式，非常适合用于需要保护内置属性、不想修改现有对象接口或需要自定义行为的场景。：Symbol 提供了一些内置的符号（如 Symbol.iterator、Symbol.toStringTag 等），可以用于自定义对象在特定场合下的行为。Symbol 创建的属性不会被 for...in、Object.keys() 或 JSON 序列化所列出，因此可以用于隐藏对象的某些属性。在一些复杂的事件系统中，使用 Symbol 可以作为事件的唯一标识符，避免名称冲突。
2026-01-11 14:00:00
299
原创 React 中 useMemo，useCallback 的使用场景？
useCallback 返回一个记忆（缓存）的回调函数，只有在依赖项更改时才会更新。当将回调函数作为 props 传递给子组件时，使用 useCallback 可以避免子组件因函数引用变化而不必要地重新渲染。useMemo 用于缓存计算结果，只有在依赖项更改时才重新计算。当计算结果开销较大时，可以使用 useMemo 缓存其结果，避免在每次渲染时重复计算。在渲染条件依赖于计算结果时，可以使用 useMemo 来确保只在必要时重新计算。对于简单的计算或函数，直接使用普通的逻辑而非记忆化技术可能更简单和有效。
2026-01-11 09:13:26
355
原创 React useContext的缺陷
使用 useContext 时，可能需要多层嵌套的 Provider，这会导致组件结构变得复杂，从而降低可维护性。当上下文的值发生变化时，所有使用该上下文的组件都会重新渲染。虽然可以在 createContext 中设置默认值，但这样做实际上是全局值，并无法在上下文未被提供的情况下实现真正的局部状态管理。这在多个层级的组件中可能引起混淆。在使用 useContext 时，确保子组件在调用 useContext 时能够访问正确的上下文。尤其是在大型项目中，可能很难确定是谁导致了上下文的更新，以及何时发生的。
2026-01-10 22:15:00
323
原创 React useEffect能不能监听对象？
当依赖项是引用类型时，React 会对比当前渲染下的依赖项和上次渲染下的依赖项的内存地址是否一致，如果一致，effect 不会执行，只有当对比结果不一致时，effect 才会执行。因为对象里面的值改变不一定会执行，因为他监听的是地址，有时候地址不会变。导致数据改变的时候未监听到。深拷贝对象并将其作为依赖不是一种常见的做法。通常会引入复杂性和性能问题。
2026-01-10 18:00:24
195
原创 前端应该知道的：JavaScript数组的对象有哪些
9、使用 find() 和 findIndex()：find() 和 findIndex() 方法可用于查找数组中的元素，同时也会遍历数组。7、entries()：entries() 方法返回一个包含每个元素的索引和值的迭代器对象，可以与 for...of 循环结合使用。8、keys()：keys() 方法返回一个包含数组索引的迭代器对象，可以与 for...of 循环结合使用。7、map()：返回一个新数组，数组中的每个元素是调用函数处理后的结果。1、concat()：合并两个或多个数组，返回新的数组。
2026-01-09 09:43:09
246
原创 前端应该知道的：文档对象模型（DOM，Document Object Model）有哪些
getAttribute(name)、.setAttribute(name, value)、.removeAttribute(name)、.appendChild(node)、.removeChild(node)、.addEventListener(type, listener)等。id、className、classList、innerHTML、innerText、textContent、style、attributes等。parent.removeChild(node)：从父节点中移除子节点。
2026-01-08 11:48:38
344
原创 前端应该知道的：浏览器对象模型（BOM，Browser Object Model）对象有哪些
属性（解析URL）：.href(完整URL), .protocol(协议), .host(主机名和端口), .hostname(主机名), .port(端口), .pathname(路径), .search(查询字符串，即?定时器：.setTimeout(), .setInterval(), .clearTimeout(), .clearInterval()方法：.setItem(key, value), .getItem(key), .removeItem(key), .clear()。
2026-01-08 10:07:48
607
原创 Vue 实现多行文本“展开收起”
在很多示例中，多行文本的末尾都是显示“展开收起”，但是在实际的需求中，可能需要图标替代“展开收起”文字。以上部分也可以根据实际需求进行修改。
2026-01-07 12:36:31
305
原创 响应式布局有哪些？
响应式布局的技术包括百分比布局、Flexbox、CSS Grid、媒介查询、自适应图片等，这些技术可以单独使用，也可以结合使用。除了 Bootstrap，Tailwind CSS 是一种现代的 CSS 框架，采用原子化 CSS 的方法，可以快速创建响应式设计。它提供高度可定制的类。Flexbox 是一种强大的 CSS 布局模式，适合一维布局，能够灵活地排列和对齐元素，并适应不同屏幕大小。CSS 变量可以在媒体查询中使用，为不同的屏幕尺寸设定不同的值，从而使样式更加灵活可控。
2026-01-06 14:30:00
472
原创 CSS的模块化
通过采用 CSS Modules、Styled Components、SASS、BEM、Atomic CSS 等方法，可以有效地组织和管理样式，确保大规模应用中的一致性和灵活性。Emotion 是另一个流行的 CSS in JS 库，提供灵活的选择，可以将样式写在样式文件中或直接在 JavaScript 中。CSS Modules 是一种 CSS 文件格式，它通过将类名局部化来避免样式冲突，从而解决不同组件间样式的覆盖问题。CSS模块化通过将样式局部化，确保样式只应用于特定的组件或模块，避免了样式冲突。
2026-01-06 09:50:11
774
原创 React 父组件调用子组件的方法
使用 React.useImperativeHandle 暴露需要被调用的方法。通过 Context API，可以在组件树中传递值，使得深层嵌套的组件也能访问到父组件的方法。应用中使用了 Redux 或其他状态管理库，也可以利用它们来管理父子组件之间的状态和方法。父组件可以传递一个回调函数给子组件，子组件通过调用这个函数来通知父组件发生了什么。在 React 中，父组件可以通过引用子组件的实例来调用子组件的方法。使用 React.forwardRef 接收 ref。在点击事件时，调用子组件的方法。
2026-01-05 14:30:00
302
原创 前端保存数据的几种方式
生命周期：可设置过期时间，否则关闭浏览器后失效（会话Cookie）生命周期：仅在当前标签页有效，关闭标签页后删除。存储大小：约5MB（不同浏览器可能不同）仅在客户端存储，不随HTTP请求发送。用途：长期存储数据，如用户偏好设置。生命周期：永久存储，除非手动删除。用途：临时存储同一标签页的数据。与服务器通信：每次请求都会携带在HTTP头中。存储大小：通常不少于250MB，甚至更大。用途：存储大量结构化数据，适合离线应用。用途：常用于会话管理、用户登录状态等。生命周期：永久存储，除非手动删除。
2026-01-05 10:05:09
373
原创 React 为什么不采用（VUE）绑定数据？
React 的核心理念是将构建 UI 的任务委托给渲染函数，视图的变化通过重新渲染实现，而不是通过数据的双向绑定来管理，降低了复杂度。有助于确保仅在必要时进行更新。React 组件拥有丰富的生命周期方法，让开发者可以在正确的时间点控制组件的行为，避免了许多双向绑定中可能出现的难以追踪的问题。React 的设计强调明确的数据和事件流，组件之间的数据交互更加清晰，从而提高了组件的可复用性。每个组件都有自己的状态，对状态的处理由组件内部控制，减少了由外部数据状态改变引发的意外结果。
2026-01-04 15:00:00
321
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人