- 博客(24)
- 收藏
- 关注
RSS订阅原创 前端防御性编程
在前端项目中，直接修改导出的对象会导致状态不可控，尤其是在复杂异步场景中，你很难判断数据在某个时刻的值到底是什么、是被谁改的。在涉及登录态、权限控制、敏感信息等安全相关场景中，前端应遵循职责分离的设计理念，尽量避免直接处理或解析敏感数据，仅负责数据的安全转发和展示控制。对于一些刚上新的业务，或者有存在风险的业务模块，或者会调取不受信任的接口，例如第三方的接口，这个时候就要做一层降级处理，例如接口调用失败后，剔除对应模块的展示，让用户无感知的使用。所有的数据改动都走一个方向，一个入口，不允许乱改。
2025-04-12 22:04:06
792
原创 Promise和async await对比
Promise 和 async/await 都是 JavaScript 处理异步操作的方法。async/await 本质上是 Promise 的语法糖，可以使异步代码更具可读性。下面是 Promise 的常见用法，并用 async/await 实现相同功能。
2025-03-23 19:12:38
250
原创 HashRouter和BrowserRouter对比
查询参数在 # 号后 → 用 useSearchParams() 或手动解析 window.location.hash。直接用 useSearchParams() 或 window.location.search 解析，无需特殊处理。直接使用useSearchParams或者使用window.location.search都可以。查询参数在 # 号前 → 用 window.location.search 解析。如果是 BrowserRouter。如果是 HashRouter。
2025-03-23 17:48:08
484
原创 关于Object.assign
方法用于将所有可枚举属性的值从一个或者多个源对象复制到目标对象。它将返回目标对象Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。：如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。如果该参数不是对象，则会先转为对象，然后返回由于和无法转为对象，所以如果它们作为目标对象参数，就会报错。
2025-03-23 13:47:32
232
原创 TypeScript学习
可以将TS中的常用基础类型分为两类：1、JS已有类型 2、TS新增类型JS已有类型原始类型：number/string/boolean/null/undefined/symbol对象类型：object（包括数组、对象、函数等对象）TS新增类型联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any等今天几乎所有的JS应用都会引入许多第三方库来完成任务需求这些第三方库不管是否是用TS编写的，最终都要编译成JS代码，才能发布给开发者。
2024-05-28 18:06:22
2311
原创 Vue3全家桶
认识Vue是一套用于构建用户界面的渐进式JavaScript框架渐进式框架：表示我们可以在项目中一点点来引入和使用vue，而不一定需要全部使用vue来开发整个项目如何使用Vue？Vue的本质，就是一个JavaScript的库：我们可以把它理解成一个已经帮我们封装好的库在项目中可以引入并且使用它使用方式：在页面通过CDN方式引入下载Vue的JS文件，并且自己手动引入通过npm包管理工具安装使用<!DOCTYPE html><html lang="e
2024-04-28 13:31:09
489
原创 实现响应式页面
媒体查询 + px媒体查询 + 百分比媒体查询 + rem + jsvw/h + rem媒体查询的缺点是在断点切换的瞬间，布局会带来断层式的切换变化百分比计算繁琐rem需要js脚本监听分辨率变化视口单位有兼容性问题。
2024-04-05 16:48:36
753
1
原创 包管理工具
为了解决npm的问题，Facebook发布了yarn，具有以下优点(npm借鉴了yarn的lock，缓存)package.json 和 package-lock.json 之间的相互关系？用于记录当前安装的每个包的确切版本号以及其依赖关系的锁定状态。现如今，yarn相比于npm最大的优点可能是安装快一点。中使用的依赖版本是否一致，如果一致就使用。在构建依赖树时，会先检查下项目中是否有。早期的npm没有lock文件，导致。中的信息，反之就是使用。文件的话，就会直接使用。
2024-03-24 13:54:55
830
3
原创 React Hooks
reducer就是一个函数：接受当前应用的state和触发的动作action，计算并返回最新的state。reducer是一个纯函数，没有任何副作用，并且相同的输入会有相同的输出因此通过reducer函数很容易推测出state的变化，并且也更加容易单元测试default:reducer处理的state对象是不可变的，不要修改参数中原本的对象，而是每次返回一个新的state object（解构赋值是浅拷贝，实现了栈内存中的地址变化）
2024-03-21 09:49:52
890
1
原创 计算机网络
如果队首的请求因为处理的太慢耽误了时间，那么队列里后面的所有请求也不得不跟着一起等待，结果就是其他的请求承担了不应有的时间成本，造成了队头堵塞的现象。* 客户端发送一个FIN报文(一个TCP报文，设置FIN（Finish）标志位为1)，用来关闭客户端到服务端的数据传送，表示客户端不会再向服务端发送数据了（在FIN之前发送出去的数据，如果没有收到对应的ack确认报文，客户端依然会重发这些数据），此时，客户端还可以接受数据，客户端进入FIN-WAIT-1(终止等待1)状态。数据传输完毕后，双方都可释放连接。
2024-01-21 15:05:29
952
1
原创 JS数据结构与算法
邂逅数据结构和算法什么是数据结构？数据结构就是在计算机中**，存储和组织数据的方式**我们知道，计算机中数据量非常庞大，如何以高效的方式组织和存储呢？这就好比一个庞大的图书馆中存放了大量的书籍，我们不仅仅要把书放进去，还应该放在合适的位置什么是算法？解决问题的办法/步骤逻辑认识栈结构数组数组是一种线性结构，并且可以在数组的任意位置插入和删除数据但是有时候，我们为了实现某些功能，必须对这种任意性加以限制而栈和队列就是比较常见的受限的线性结构栈，是一种受限的线性表，后进先出(
2023-12-23 15:15:05
196
1
原创 React18全家桶
组件化开发是一种分而治之的思想：如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展所以我们将一个页面拆分成一个个小的功能块方便复用和后续的管理和维护高阶函数接受一个或多个函数作为输入或者输出一个函数JS中的filter、map、reduce都是高阶函数高阶组件定义为参数为组件，返回值为新组件的函数高阶组件本身不是一个组件，而是一个函数这个函数的参数是一个组件，返回值也是一个组件定义方式和作用演示。
2023-12-23 15:07:02
2378
1
原创 JavaScript高级
函数的this指向函数this的绑定规则默认绑定函数默认调用时，函数的this都指向window // "use strict" // 1.普通的函数被独立的调用 function foo() { console.log('foo', this); } foo()//window // 2.函数定义在对象中，但是独立调用 var obj = {
2023-12-23 14:54:49
744
1
原创 JavaScript基础
认识jSJS的组成ECMAScript是JavaScript的标准，描述了该语言的语法和基本对象JS是ES的语言层面的实现因为除了语言规范之外，JS还需要对页面和浏览器进行各种操作除了基本实现之外，还包括DOM操作和BOM操作JS的三个组成ESMAScript：定于语言规范DOM：操作文档的APIBOM：操作浏览器的APIJS由谁来运行html与css是由浏览器进行解析而JS是由浏览器中的JS引擎来运行的JS引擎帮助我们将JS代码翻译成CPU指令来执行比较
2023-12-23 14:42:21
615
1
原创 HTML+CSS
dl定义列表，直接子元素只能是dt、dddtterm是项的意思，列表中每一项的项目名dd列表中每一项的具体描述，是对dt的描述、解释、补充。
2023-12-23 14:30:55
688
1
原创 使用window.resize实现当浏览器宽度变化时触发相应函数
如果我们有一个页面元素位置和宽高是根据其他页面元素的位置和宽高动态计算而成的，如果你实现的是响应式页面，那么该页面元素会随着浏览器窗口大小变化而变化它的大小位置，这时我们需要window.resize方法来实现动态响应式执行函数。该方法可以在窗口大小调整时触发一个函数。
2023-07-04 09:17:11
926
原创 使用jquery实现鼠标移入目标框出现悬浮框功能
项目场景：项目场景：使用jquery实现鼠标移入目标框出现悬浮框功能问题描述类型1：一个目标框和一个悬浮框 #hoverBox { display: none; /* 初始状态隐藏 */}#targetElement{ width: 100px; height: 100px; border: red solid 1px;} <div id="hoverBox"> <!-- 悬浮框内容 --> <
2023-05-18 15:01:38
2607
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人