- 博客(223)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Promise笔记-同步回调-异步回调-JS中的异常error处理-Promis的理解和使用-基本使用-链式调用-七个关键问题
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数error/reason传递出去。resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数value传递出去；value：将被 Promise 对象解析的参数，也可以是一个成功或失败的 Promise 对象。
2023-10-23 15:08:22
479
原创 责任链模式
职责链模式的定义是:使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。职责链模式的名字非常形象，一系列可能会处理请求的对象被连接成一条链，请求在这些对象之间依次传递，直到遇到一个可以处理它的对象，我们把这些对象称为链中的节点。这段代码展示了如何创建一个通用的责任链，根据关键词的类型决定是否执行校验。当需要添加新的校验规则或修改现有的校验逻辑时，可能需要修改多处代码。"哪种方式更好"取决于具体的应用场景和需求。
2023-10-21 22:29:24
703
原创 为什么避免在循环、条件或嵌套函数中调用 Hooks
只要 Hook 的调用顺序在多次渲染之间保持一致，React 就能正确地将内部 state 和对应的 Hook 进行关联。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。告诉 React 需要在完成DOM更新之后（渲染之后）执行一些“副作用”（如数据获取、手动更改DOM、设置订阅或者清除上一次的副作用等）。这也是为什么我们说第二次和随后的渲染是“替换”前一次的副作用。然后，在随后的组件更新（第二次渲染）中，相同的。，但在上一次渲染中，它使用了。
2023-10-18 11:44:55
505
原创 TS泛型-实际使用案例
是一个接收两个泛型参数的组件或类。第一个泛型参数是data1数组中元素的类型。第二个泛型参数是any，这意味着在这个位置的类型是任意的，没有被约束。这样的定义方式能够让组件在内部利用这两种类型进行安全的类型检查，增加代码的健壮性和复用性。
2023-10-15 15:10:16
213
原创 JavaScript class和function的区别
Class组件和Function组件是 React 中创建组件的两种主要方式。他们在语法和功能上有一些不同。以下分点是Class组件和Function。
2023-10-15 13:37:39
298
原创 useReducer的用法
useReducer是 React 中的一个 Hook，它通常用于状态管理，并在组件有复杂状态逻辑时特别有用。useReducer的工作方式类似于 Redux，允许你以管理组件状态。useReducer需要一个和一个作为输入，返回一个新的状态和一个 dispatch 函数作为输出。
2023-10-15 12:55:04
213
原创 Service Worker原理
ServiceWorker 是一个运行在浏览器背后的独立线程，它拥有访问网络的能力，可以实现资源缓存消息推送后台数据同步等功能.资源缓存：它能拦截和缓存网络请求提高加载速度和优化用户体验。消息推送：即便在应用或浏览器未运行的情况下，Service Worker也能接收后台推送通知。后台数据同步：使用, 它可以在后台同步数据，这在断网或网络不稳定时特别有用。
2023-09-22 16:43:24
265
原创 JS面试相关
深拷贝、浅拷贝、递归、优化扁平化柯里化this指向+原型继承js取整的方法，parseInt第二个参数是什么forEach和map有什么区别，使用场景？内存泄漏的场景原型链+原型严格模式Js中for in 和for of的区别slice、splice、split 三者的区别变量提升、函数提升循环引用？如何解决null与undefined闭包数组多种去重方法slice是干嘛的，splice是否会改变原数组== 和 === 有什么区别？
2023-09-19 21:01:34
265
原创 与原型、原型链、构造函数相关的面试题
构造函数是一个用于创建和初始化一个对象的特殊函数。在 JavaScript 中，几乎每个对象都是由某个构造函数创建的。构造函数的约定是，其名称首字母大写。如何定义它？你可以像定义常规函数一样定义构造函数，但是为了创建新的实例，你需要使用new关键字。// 定义一个构造函数// 使用构造函数创建新的对象// 输出：John Doe// 输出：Jane SmithPerson是一个构造函数，它接受两个参数，firstName和lastName。使用this。
2023-09-14 12:52:30
120
原创 浏览器面试题
然而，值得注意的是，diff 算法并不是完全无代价的，因此在某些情况下，手动优化和使用 key 来管理列表的性能也是重要的。的，浏览器会暂停DOM的构建，直到脚本执行完毕。是一个用于设置 HTTP Cookie 的属性，它的作用是限制客户端（通常是浏览器）对 Cookie 的访问，只允许通过 HTTP 或 HTTPS 协议进行访问，而禁止通过脚本（如 JavaScript）进行访问。当 React 进行列表的 diff 比较时，它会遍历旧的虚拟 DOM 树和新的虚拟 DOM 树中的子节点，并尝试匹配它们。
2023-09-11 15:41:07
480
1
原创 在JS中tramsform与translate区别
总结来说，transform属性是一个通用的属性，可以应用多种变换效果，而translate属性是transform属性的一种特定形式，只能实现平移效果。
2023-09-05 08:02:55
1317
原创 浏览器会因为什么样的脚本而崩溃
内存泄漏：如果JavaScript代码中存在内存泄漏，即创建的对象无法被正确释放，长时间运行下来会导致浏览器内存占用过高，最终导致浏览器崩溃。大量计算或操作：如果JavaScript代码包含大量的计算或操作，特别是在循环中，会导致浏览器的性能负荷过高，可能导致浏览器变慢甚至崩溃。不兼容的脚本或插件：某些JavaScript脚本或浏览器插件可能与特定浏览器版本不兼容，导致浏览器崩溃。无限循环：如果JavaScript脚本包含一个无限循环，浏览器将无法停止脚本的执行，导致浏览器不响应甚至崩溃。
2023-09-04 19:16:48
304
原创 渲染10w条数据怎么优化，虚拟列表技术上怎么实现，闪烁怎么解决
可以通过计算可见区域的高度和滚动位置，动态确定需要渲染的数据项，并在滚动时更新渲染内容。使用硬件加速：通过使用 CSS 的 transform 属性或使用 CSS3 的 3D 动画效果（如 translate3D）来触发硬件加速，可以提高页面的渲染性能，减少闪烁。这种技术将滚动容器的高度固定，通过动态改变容器内部元素的位置来模拟滚动效果，从而减少实际渲染的元素数量，提高性能。使用双缓冲技术：双缓冲技术将渲染的内容缓冲到一个隐藏的画布上，等内容完全渲染好后再将其显示到页面上，从而避免了渲染中间状态的闪烁。
2023-09-04 15:38:28
264
原创 什么是强制缓存？什么是协商缓存？cache
当浏览器发送请求时，会检查强制缓存相关的响应头信息。如果缓存仍然有效，浏览器将直接从缓存中读取资源，并且不会发送请求到服务器。如果服务器返回的状态码指示缓存仍然有效，浏览器将继续使用缓存的副本。如果缓存失效，服务器将返回新的资源内容，并带有新的缓存相关的响应头，浏览器将使用新的资源并更新缓存。综合使用强制缓存和协商缓存可以有效地减少对服务器的请求，提高页面加载速度，并减轻服务器的负载。强制缓存和协商缓存是用于在Web浏览器和服务器之间进行缓存控制的两种机制。
2023-09-04 15:36:50
998
原创 前端缓存方法有哪些？cookie有哪些属性？
Cookies 是由浏览器存储的小型数据片段，并与特定的网站关联。选择何种缓存方法取决于应用的具体需求，例如数据的大小、持续时间、是否需要离线访问等。以上只是一些常见的与 Cookie 相关的面试题。当然，面试时的问题可能会根据公司、职位和面试官的经验而有所不同。每个 Cookie 都有一个唯一的名称，以区分同一域名下的其他 Cookie。如果未设置，默认为’/'，即该域名下的所有路径都可以访问。：指定哪个域名下的页面可以访问该 Cookie。：这是一个相对较新的属性，用于声明 Cookie。
2023-09-04 15:25:17
981
原创 overflow相关面试题
属性通常用于处理容器中的文本或内容的溢出问题。通过选择合适的值，你可以控制是否允许溢出、是否显示滚动条以及如何处理溢出的内容。这可以帮助你创建更好的用户界面和布局。是 CSS 属性，用于控制元素的溢出内容的处理方式，当元素中的内容超出其容器时，可以通过该属性进行控制。属性通常与容器元素（如。
2023-09-04 15:00:51
58
原创 js取整的方法，parseInt第二个参数是什么，数组转字符串的方法，parseInt的用法
是 JavaScript 中的一个内置函数，它可以解析一个字符串并返回一个整数。它的常见用途是从字符串中提取数字，尤其是当字符串开始于数字但可能包含后续的非数字字符时。注意：始终指定基数可以避免混淆，因为某些字符串（如以"0x"开头的字符串）可能被解析为其他进制。，表示进制，表示要解析的数字的基数。基数可以是2-36之间的任何整数。：与0进行按位或操作可以取整，但只适用于32位整数。：将数组转换为由逗号分隔的字符串。希望这些信息能帮助你更好地理解。：将字符串转换为整数。
2023-09-04 14:59:37
185
原创 js取整的方法，parseInt第二个参数是什么
需要根据具体的需求选择适合的取整方法。而对于数值的取整操作，可以使用 Math.floor、Math.ceil 或 Math.round 函数。使用 parseInt 函数：parseInt 函数可以将字符串转换为整数，并进行取整操作。使用 Math.floor 函数：Math.floor 函数可以向下取整为最接近的整数。使用 Math.round 函数：Math.round 函数可以进行四舍五入取整操作。使用 Math.ceil 函数：Math.ceil 函数可以向上取整为最接近的整数。
2023-09-04 14:02:41
190
原创 分页怎么实现，假如不给你total值，你可以实现分页吗，你觉得一个分页组件的核心要素是什么
估算总页数：如果你有一定的数据量信息，但无法准确获得总数，你可以通过估算总页数来实现分页导航。然后在分页导航上展示这个估算的总页数，并允许用户通过导航按钮切换不同的“估算页”。通过不断加载数据的方式，实现逐步展示数据的效果。值的情况下，你可以按照固定的页大小加载数据，并且不显示分页导航。需要注意的是，这些近似的分页实现方式可能无法提供精确的分页导航和确切的总页数信息。使用固定的页大小：假设每页显示固定数量的数据，比如每页显示10条数据。当前页数：记录当前所处的页码，即当前显示的是第几页的数据。
2023-09-04 14:00:12
282
原创 http和https区别，第三方证书如何保证服务器可信
可信根证书：客户端会使用自己内置的受信任的根证书（Root CA）来验证服务器证书的合法性。如果证书链可以追溯到受信任的根证书，且没有被撤销或过期，客户端会信任服务器的证书。客户端可以通过验证证书的签名和相关信息，确保与服务器建立的连接是受信任的，从而保证数据的安全性和完整性。客户端会验证证书的合法性，包括检查证书的签名、过期时间、颁发机构等。颁发证书：一旦服务器的身份验证通过，证书颁发机构会生成证书并将其签名。证书请求：服务器将公钥发送给受信任的第三方机构（证书颁发机构，CA），请求颁发证书。
2023-09-04 13:00:05
1023
原创 Vue面试
Vue 3的代码库使用了TypeScript进行重写，提供了更好的类型推断和类型检查，使得开发者在使用TypeScript时能够获得更好的开发体验。Vue 3采用了模块化的设计，可以按需引入所需功能，减少了不必要的文件体积。响应式系统改进：Vue 3的响应式系统进行了改进，使用Proxy替代了Vue 2中的Object.defineProperty，提供了更好的性能和开发体验。Teleport组件：Vue 3引入了Teleport组件，可以将组件的内容渲染到DOM树的任意位置，提供了更大的灵活性。
2023-09-04 12:54:03
716
原创 Vue 3的Diff算法相比Vue 2有哪些具体的改进？
而在Vue 3中，对Fragments进行了优化，可以直接将其内部的内容合并到父级中，减少了虚拟DOM层级，提高了Diff算法的效率。总的来说，Vue 3的Diff算法在细节上进行了一系列的优化，通过引入Patch flag、静态标记和提升、Fragments优化以及动态属性的快速路径等改进，进一步提升了Diff算法的效率和性能，使得Vue 3在渲染性能方面有显著的改进。对于动态属性，Vue 3会使用更快速的路径进行处理，减少了比较的开销，提高了Diff算法的性能。
2023-09-04 12:45:48
805
原创 响应式布局（3种） + flex计 相关面试题
有很多现成的前端框架，如Bootstrap、Foundation等，它们内置了响应式设计的功能。利用这些框架，你可以更快速地创建响应式网站。使用百分比而不是固定的像素宽度来设置元素的宽度，这样元素的宽度可以根据其父元素的宽度进行调整。使用CSS的媒体查询来应用不同的样式规则，根据设备的尺寸和其他特性。
2023-09-04 10:59:37
1583
原创 await接受成功的promise,失败的promise用try catch
关键字用于等待一个 Promise 对象的解决（fulfillment）或拒绝（rejection）。并不仅限于接受成功的 Promise，它也可以接受被拒绝的 Promise。并不仅限于接受成功的 Promise，它同样可以处理被拒绝的 Promise，并使用。将接收到解决的值，并在控制台上打印出来。如果 Promise 被拒绝，函数返回的 Promise 对象。如果 Promise 成功解决，将接收到拒绝的原因，并在控制台上打印出来。在 JavaScript 中，结构来处理拒绝的情况。
2023-09-03 17:38:16
355
原创 flex-shrink计算题
让我们假设容器的初始宽度为 300 像素，并且子项的初始宽度分别为 100 像素、200 像素和 150 像素。现在，容器的宽度减小到 200 像素，我们来计算每个子项的最终宽度。因此，当容器的宽度缩小到 200 像素时，每个子项的最终宽度分别为 83.33 像素、166.67 像素和 100 像素。当容器的可用空间不足时，它们将根据这些比例进行收缩。假设有一个 flex 容器，其中包含三个子项，它们的。子项1：1 * 16.67 = 16.67 像素。首先，我们将所有子项的。最后，我们将每个子项的。
2023-09-03 17:31:17
289
原创 flex:1
它将 “flex-grow”、“flex-shrink” 和 “flex-basis” 设置为特定的值。与其他 “flex” 值相比，“flex: 1” 是常用的简写，用于实现子元素的平均分配剩余空间。“flex: 1” 等效于 “flex: 1 1 0”，这意味着子元素可以增长、缩小，并且初始大小为零。当希望子元素平均分配剩余空间，以充分利用父容器的可用空间时，可以使用 “flex: 1”。“flex: 1” 是 “flex” 属性的一种。
2023-09-03 17:30:30
220
原创 深度优先遍历（Depth-First Search, DFS）和广度优先遍历（Breadth-First Search, BFS）
深度优先遍历是一种用于遍历树或图的算法，它从根节点（或其他起始节点）开始，首先探索尽可能深的分支，然后回溯并继续探索其他分支。它通常使用递归或栈来实现。广度优先遍历是一种用于遍历树或图的算法，它从根节点（或其他起始节点）开始，首先探索所有直接相邻的节点，然后逐层向下探索。它通常使用队列来实现。
2023-09-03 17:21:50
285
原创 尾递归优化？
尾递归是一种特殊的递归形式，其中函数的最后一个操作是递归调用。这允许编译器或解释器优化递归调用，使其只使用一个栈帧，从而提高性能并避免栈溢出。尾递归优化通常通过引入额外的参数（如累加器）手动实现，但某些语言会自动进行这种优化。
2023-08-31 19:46:36
136
原创 浏览器的存储，cookie（httponly）、localStorage、sessionStorage、indexed对比
大小cookie<<IndexedDB生命周期cookie(如果设置了过期时间) =IndexedDB与服务器交互: 只有cookie会随HTTP请求自动发送。结构: 只有IndexedDB提供了数据库的功能和结构。用途: 根据存储需求和数据的大小、持续性来选择合适的存储机制。httpOnly是一个标志，可以在服务器端设置为Cookie。当一个Cookie被标记为httpOnly时，这意味着这个Cookie不能被客户端的JavaScript访问。
2023-08-31 19:20:56
265
原创 UDP和TCP的区别
UDP (User Datagram Protocol) 和 TCP (Transmission Control Protocol) 是两种常见的传输层协议。总的来说，选择TCP还是UDP取决于特定应用的需求。如果需要可靠性和数据完整性，通常使用TCP；如果需要快速传输和低延迟，通常使用UDP。
2023-08-31 19:09:11
1030
原创 编程：扑克牌0-10的牌，每个数字4张，加上两张‘王’的牌，抽出五张牌判断5张是为顺子（‘王’做任意牌）
数据结构来确保没有重复的牌。而 “王” 可以代替任何需要的牌，所以我们只需要确保最大值和最小值之间的差小于5。这是一个经典的问题。注意，我们使用了一个。
2023-08-31 14:23:30
81
原创 代码题: 实现 ahooks 中的 useRequest 函数, 内部可以使用 axios 或者 fetch
是一个常用的自定义 Hook，用于处理数据请求。它可以简化组件中的请求逻辑，使组件更纯净并重用请求逻辑。
2023-08-31 14:14:11
202
原创 axios 或 fetch 如何实现对发出的请求的终止?
终止 HTTP 请求是一个重要的功能，特别是在需要优化性能、避免不必要的请求或在某些事件发生时（例如用户点击取消）中断正在进行的请求时。以下是如何使用axios和fetch。
2023-08-31 11:00:54
1928
原创 常用的 hooks 函数
useMemo：用于优化复杂计算。：用于优化函数引用，确保函数不会在每次渲染时都被重新创建。虽然这些 hooks 可以提高性能，但它们并不总是必要的。在没有性能问题的情况下过度优化可能会导致代码更加复杂。建议在确定有性能瓶颈时再使用它们。
2023-08-31 10:53:01
434
原创 讲讲你对前端模块化的认知, 为什么要打包, 有了 Webpack 为什么还要使用 Vite
在早期的网页开发中，大部分的 JavaScript 代码都写在一个单独的文件中或直接嵌入在 HTML 中。随着项目增长，这种方法会导致代码难以维护，因为所有的逻辑和功能都混杂在一起。模块化的出现让开发者能够分解他们的代码，只关心单个模块的功能。每个模块有其明确的职责，可以独立开发、测试和维护。Webpack 是前端打包的先驱之一，但随着开发需求的增长和技术的进步，开发者开始寻找。这样做的目的是保持代码的整洁、易于维护、减少全局作用域的污染和提高代码重用性。选择哪个工具取决于项目的特定需求和团队的偏好。
2023-08-30 19:57:55
250
原创 Webpack 和 Vite 的区别
最后，选择哪个工具取决于你的项目需求和个人/团队的偏好。Vite 提供了一个快速的开发体验和更简单的配置，而 Webpack 提供了高度的可定制性和成熟的生态系统。Webpack 和 Vite 都是前端构建工具，但它们在设计哲学和执行方式上有所不同。
2023-08-30 19:45:29
994
原创 代码题-判断循环依赖
用于记录当前的DFS路径，如果在路径中再次碰到同一个模块，那么就存在循环依赖。用于记录已经检查过的模块，以避免重复检查；注意：我们使用了两个集合。
2023-08-30 19:13:26
89
原创 有哪些前端可以做的性能优化点
每个项目的需求和瓶颈都是独特的，因此最佳实践可能会因项目而异。前端性能优化是一个广泛的主题，涉及许多不同的技术和策略。：使用Service Workers来缓存资源和提供离线访问，以及其他进阶的PWA功能。：通过内容分发网络（CDN）提供资源，可以确保用户从离他们最近的服务器上快速获取内容。：当使用HTTP/2时，服务器可以推送关键资源，减少请求的往返时间。使用CSS动画或WebGL，而不是JavaScript动画。：设置资源的HTTP缓存头，如。：例如，尽量不使用Flash。来预先加载或预获取关键资源。
2023-08-30 17:26:38
827
Proteus仿真温度传感器TC77+屏幕IL9341+STM32F103R6
2020-12-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人