- 博客(120)
- 收藏
- 关注
RSS订阅原创 如何在JS里进行深拷贝
如果仅使用浅拷贝创建对象的话，对新对象的更改，如果更改的是引用数据类型的属性时候，会改动原始对象。在实际应用中，我们期望对对象所做的修改不会影响到原对象，因此就需要使用深拷贝来复制对象。这是一种简单的实现方式，先把对象使用stringify序列化，然后再用 parse 把它重新解析为对象，从而得到一个全新的对象。浅拷贝是指创建的新对象包含有原始对象的引用。也就是说浅拷贝仅复制对象的第一层结构，而不会递归地复制嵌套的对象数据。深拷贝是指创建新对象的时候，对象拥有原始对象的所有属性的副本。
2025-01-13 10:28:43
380
原创 Vue3的provide和inject实现多级传递的原理
这篇文章讲了使用provide和inject函数是如何实现数据多级传递的。在创建vue组件实例时，子组件的provides属性对象会直接使用父组件的provides属性对象。如果在子组件中使用了provide函数，那么会以父组件的provides属性对象为原型创建一个新的provides属性对象，并且将provide函数中注入的内容塞到新的provides属性对象中，从而形成了原型链。在孙子组件中，他的parent就是子组件。前面我们讲过了如果没有在组件内使用provide。
2025-01-10 09:53:36
828
原创 vue3 的6个高级用法 看看你会几个
本文聚焦 Vue3 的高级用法，涵盖以下关键内容：深入组合式 API，包括利用 toRefs 转换响应式数据及创建自定义 Hook；Teleport 组件可突破 DOM 层级限制渲染内容；Suspense 组件用于处理异步加载过渡态；全局 API 调整，如创建全局组件方法的改变；动态组件优化可通过传递 null 卸载实例；性能优化方面，v - memo 指令缓存模板避免重复渲染，watchEffect 的 flush 选项可控制副作用函数执行时机，为 Vue3 开发者提供了实用的技术要点与优化策略。
2025-01-08 18:00:00
359
原创 前端金额运算精度丢失问题及解决方案
本文对 Javascript 中浮点数运算出现的精度丢失问题进行了还原，分析了问题产生的原因在于二进制本身。同时给出了三个网络上比较成熟的解决方案，其中第一和第二方案基本可以满足大部分开发场景，如果不能满足就使用类库。最后，建议所有对运算精度要求极高的业务场景都放到后端去运算，切记。
2025-01-08 10:50:04
1597
原创 「Vue2+Vue3」 知识点，看看你掌握了几个？
这里只说Vue2的bind：指令绑定到指定元素时调用，只调用一次inserted：指定元素插入父节点时调用update：所在组件的 VNode 更新时调用：所在组件以及其子组件 VNode 全部更新后调用unbind：只调用一次，指令与元素解绑时调用。
2025-01-07 10:21:08
873
原创 JavaScript的Proxy代理对象的应用
Proxy对象用于创建一个对象的代理，从而在访问对象前可以对操作进行拦截和自定义。它是ES6引入的特性，用于修改某些操作的默认行为，等同于做语言层面做出修改，属于一种“元编程”。
2025-01-06 11:40:37
172
原创 通过六个场景，告诉你 reduce 方法有多么强大！
都 2025 了，还有很多人都不知道reduce这个方法到底有什么用，或者说应该在什么场景下去使用reduce是一个非常实用的数组方法reduce()方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。
2025-01-03 09:41:24
245
原创 Vue 推出了新特性 useId，能提高多少开发体验？
在Vue3.5这个版本中，新增了useId这一个 API，它的功能是用来生成一个，为什么说它生成的 ID 是唯一的呢？我们可以来看看useID的源码，你就知道了其实原理很简单，就是调用这个，这个 API 会返回当前 Vue 实例的信息对象，而这个信息对象身上有一个ids的数组，而useId就是根据这个数组去生成唯一 ID 的~这是可全局配置的 ID 前缀，如果你不配置，那就默认是v由唯一的ids[0]和递增的ids[1]来实现同实例内与不同实例时间的唯一性想要设置可以在main.ts中去设置。
2025-01-02 10:16:29
537
原创 js基础之setTimeout与setInterval原理分析
setTimeout与setInterval是JavaScript引擎提供的两个定时器方法，分别用于函数的延时执行和循环调用。前者的主要思想是通过一个定时器，让函数在计时结束后再执行；后者则是每隔一定的时间，就启动一次函数的执行。
2025-01-01 08:30:00
1020
原创 什么是闭包，如何使用它，为什么要使用它？
闭包，简单来说，就是一个函数“记住”了它外部的作用域。也就是说，闭包不仅仅包含了函数的内部作用域，还会捕获它外部的变量和参数，并且在其作用域链上保持对这些变量的引用。用一个简单的比喻，闭包就像一个人手里拿着一个日程表，这个日程表上记录着他之前的安排，而这个安排他是永远不会忘记的。闭包的核心特性有三个：函数内部嵌套函数。内部的函数可以访问外部函数的变量和参数。外部函数的局部变量不会被垃圾回收机制回收，直到闭包不再被引用。如果你仍然有些困惑，没关系，我们来看一些代码示例，帮助理解闭包的运作。
2024-12-30 11:07:42
808
原创 十个隐藏且实用的前端知识点，你绝对想不到！
我们都知道网页的内容是生成的，我们只能读，并不能直接修改，如果想修改就得打开控制台进行修改。在网页的输入框中我们可以看到，当我们输入的字母串不符合单词检测的时候，会有红线警告。这个 API 的兼容性也是比较一般，所以大家也要做好设备判断和兜底哦~但是这个 API 的兼容性比较一般，大家在使用的时候记得要兜底哦~这个事件，并且阻止它的默认行为，从而达到阻止粘贴的效果。有时候在写一个 DOM 节点的时候，会给它赋上一个 ID。接口，这个 API 能获取当前设备的网速，也就是。这个方法，它非常的强大！
2024-12-28 08:30:00
307
原创 实现一个基本的Promise
我们经常会用到Promise，但是很多人其实并没有完全理解它的底层实现。今天我们就来聊聊如何实现一个基本的Promise，让我们从最基础的概念开始，然后一步步构建出一个简单的Promise类。这个类会具备三个关键的功能：自动执行传入的函数、处理三种状态、以及通过then方法链式调用。首先，咱们得先了解一下Promise是什么。Promise是 JavaScript 中的一种异步编程解决方案，它可以帮助我们更优雅地处理异步操作。Promisepending（待定）、fulfilled（已完成）和。
2024-12-27 10:17:02
274
原创 95%的人都回答不上来的问题：函数的length是多少？
在JavaScript中，每个函数对象都有一个length属性，它是一个只读属性，表示函数期望接收的参数个数。这个属性是在函数定义时确定的，并且在函数的生命周期内保持不变。// 函数体// 输出: 3在上面的例子中，example函数定义了三个参数ab和c，因此它的length属性值为3。总结之前，先公布的答案是124length是函数对象的一个属性值，指该函数有多少个必须要传入的参数，即形参的个数。形参的数量不包括剩余参数个数，仅包括第一个具有默认值之前的参数个数JavaScript中函数的。
2024-12-26 10:03:35
615
原创 JavaScript中undefined和null的区别
● JavaScript 真是一个特殊的语言, 其他语言都只有一个表示 "无" 的值, 比如 Java 语言用的是 null, C 语言用的是 NULL, Python 语言用的是 None, Ruby 语言用的是 nil. 只有 JS 里面表示 "空" 的有两个, 一个是 undefined, 一个是 null。○ null 因为表示的是 "空", 其实是有内容, 只不过有一个空内容, 存储的是 0000 0000 ...○ null 表示空, 存储的时候也是一大堆 0, 所以转换为数值是 0。
2024-12-25 10:29:26
3712
原创 JS获取URL中参数值的4种方法
可以通过 split 方法手动拆分查询参数，并用 reduce 将其转化为对象。可以使用正则表达式匹配URL参数，这种方法相对较低效且较复杂，但也可以做到。上构建自己的解析函数，此方法比较简单。
2024-12-24 10:42:55
2443
原创 天天命令中输入 npm run xxx，倒底 npm run 做了什么，为什么就能开启一个服务？
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。出自《菜鸟教程》其实说白了 npm 就是一个基于 node 下的包管理工具，做过 java 开发的同学肯定 maven，作用都差不多。
2024-12-24 10:32:13
1139
原创 JavaScript模块之import.meta
在CommonJS模块里面，有专门的 __dirname 变量来获取当前文件的文件夹的绝对路径。import.meta 是JavaScript模块中的特殊对象，它提供了当前模块相关的一些元数据信息。比如当前模块的文件是 file:///home/users/example/test.mjs, 那么 import.meta.url 就返回该路径。比如当前模块的文件是 https://example.com/test.mjs, 那么 import.meta.url 就返回这个路径。URL，是一个本地路径。
2024-12-23 10:22:21
809
原创 JS如何判断输入的数据是否为对象
在javascript里需要判断一个变量到底是不是一个对象，这在变量处理特别是数据遍历的时候经常遇到。当变量是 null, 数组或者普通对象的时候，typeof 返回的都是 object 字符串。可以发现数组，普通对象和函数对象执行 instanceof Object 都返回true。当且仅当变量是普通对象的时候，返回的是[object Object].: 检查一个值是否是对象（包括数组、函数、对象、正则表达式等）.需要注意的是，不会将 null 视为对象。当判断变量是不是数组对象的时候，这个方法很好用。
2024-12-20 17:39:23
442
原创 JS里面Map的使用以及与Object的对比
也可以通过map.keys(), map.values(), map.entries() 或者键、值、键值对进行迭代。针对不同的使用场景，可以选择不同的方式，如果需要更加关注性能，需要频繁插入和删除元素，需要非字符串作为键的话，选用Map。Object不能通过for...of迭代，只能通过Object.keys(obj)或者Object.values(obj) 后进行迭代。上面也提到了，Map的键值是可以任意类型的，所以它不能正确返回JSON格式。Map：它的键值对是按照插入的顺序存储的，是有序的。
2024-12-19 17:41:26
447
原创 Javascript中如何实现函数缓存？函数缓存有哪些应用场景？
简单来说，函数缓存是将函数的运算结果存储起来，以便下次用到相同的输入时，可以直接返回结果，而不需要重新计算。这种方式可以理解为用。最后补充应用场景，比如复杂计算（如递归函数）和高频调用的纯函数等，显示你的全面思考能力。：比如函数的输入是有限的枚举值，且经常重复。柯里化的好处是，我们可以延迟计算，或者分步计算，这对缓存机制的实现很有帮助。柯里化是一种把接收多个参数的函数转换为接收一个参数的函数的技巧。高阶函数是那些接收函数作为参数，或者返回一个函数的函数。，也就是用缓存存储的空间，换取未来计算时间的节省。
2024-12-19 10:26:58
721
原创 26个写出简洁优雅JavaScript代码的技巧
请注意，如果您使用它们，您的函数将只为未定义的参数提供默认值。它的代码易于理解，没有多余的部分，简单，并且可以通过测试。为了帮助你编写出色的 JavaScript 代码，我将在今天的内容中与你分享 26 个写干净代码的技巧，这些技巧将指导你编写既优雅又高效的代码。Promise 是回调的一个非常干净的替代方案，但 ES2017/ES8 带来了 async 和 wait，它提供了更干净的解决方案。
2024-12-18 12:57:01
1302
原创 前端中 JS 发起的请求可以暂停吗？
虽然JS发起的网络请求无法直接暂停，但我们可以通过模拟暂停数据处理或使用Axios的取消功能来实现类似的效果。这些方法虽然不是真正的暂停，但可以在一定程度上满足前端开发中对于请求控制的需求。在实际开发中，根据具体需求选择合适的方案，以优化用户体验和应用的性能。希望本文能帮助你更好地理解JS请求与暂停的问题，并在你的项目中实现相应的功能。
2024-12-17 14:19:16
487
原创 JavaScript 实现签名板
JavaScript 签名板的灵活性和可定制性使其成为现代网络应用的理想选择。随着技术的不断进步，我们可以预见，JavaScript 签名板将在未来的网络应用中扮演越来越重要的角色，为用户提供更加丰富和便捷的手写签名体验。通过本文的指导，开发者可以轻松地在自己的项目中实现这些功能，无论是简单的签名收集还是复杂的交互式绘图和注释，都能轻松应对。这种技术的应用不仅提高了工作效率，也为用户带来了更加直观和个性化的交互方式。
2024-12-16 10:51:07
945
原创 Code Review代码审查有用吗？谈谈我的感受
Code Review 是一种高效的质量保障手段，但需要权衡成本与收益。通过合理优化流程，Code Review 的价值通常大于它的弊端。团队如果能建立良好的审查文化，将会从中受益匪浅。Code Review 的核心是让团队协作优先于个人风格。通过建立规范、明确审查重点、优化沟通方式，可以减少不必要的冲突，同时让每个人的代码审查变成学习和改进的机会。
2024-12-15 09:00:00
879
原创 sessionStorage 能在多个标签页之间共享数据吗？
最近，我的一个朋友在面试中被一个关于的问题难住了。我们来聊聊这个话题。能在多个标签页之间共享数据吗？在回答这个问题之前我们先来聊聊另一个存储API与经常是放在一起讨论，那他们之间的区别是什么呢？只读的属性允许你访问一个`Document`[1] 源（origin）的对象 `Storage`[2]；存储的数据将保存在浏览器会话中。类似 `sessionStorage`[3]，但其区别在于：存储在的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在的数据会被清除。
2024-12-15 08:15:00
556
原创 浅拷贝和深拷贝的区别？怎么实现一个深拷贝？
浅拷贝：拷贝后，修改拷贝后的对象，会影响拷贝前的对象深拷贝：拷贝后，修改拷贝后的对象，不影响之前的对象浅拷贝是拷贝一层，深层次的对象级别的就拷贝引用；深拷贝是拷贝多层，每一级别的数据都会拷贝出来；
2024-12-14 09:00:00
364
原创 如何防止接口重复请求？我给出了三个方案！
这里我连续点击了4次按钮，可以看到，的确是只有一个请求发送出去，可是因为在代码逻辑中，我们对错误进行了一些处理，所以就将报错消息提示了3次，这样是很不友好的，而且，如果在错误捕获中有做更多的逻辑处理，那么很有可能会导致整个程序的异常。的，但又不能确保真的是每个接口都加了的，可是如果要一个接口一个接口的排查，那这维护了四五年的系统，成百上千的接口肯定要耗费非常多的精力，根本就是不现实的，所以就只能去做。方案二的路子，我们发现确实问题重重，那么接下来我们来看第三种方案，也是我们最终采用的方案。
2024-12-13 10:15:47
1283
原创 在 Chrome中直接调用大型语言模型的API
AI 时代的高速发展，我们都习惯了使用 ChatGPT、Claude、Gemini 和其他 AI 工具来询问各种问题，目前大部分的 AI 应用都是通过服务端 API 来实现的。如果想要在 Web 上使用 AI 功能往往需要靠服务器来处理一些非常大的模型。这在制作一些生成内容的 AI 方面尤其常见，因为这些模型的大小是一个普通网页容量的好几千倍，对于其他种类的 AI 功能也是一样，其中模型的大小可能会在几十到几百兆字节之间。
2024-12-12 15:00:01
1542
原创 告别繁琐的 try-catch：JavaScript 安全赋值运算符 (?= ) 来了！
安全赋值运算符 (?将通过使 JavaScript 错误处理更加直观和简洁来彻底改变 JavaScript 错误处理。随着该提案的不断发展，它将有望成为每个 JavaScript 开发人员工具箱中的必备工具。准备迎接更干净、更安全的代码吧！🚀。
2024-12-12 10:11:04
440
原创 如何做静态资源预加载
静态资源预加载是一种优化网页加载速度和用户体验的技术，主要通过提前加载用户可能需要的资源（如图片、脚本、样式表等），以减少后续请求的延迟。
2024-12-11 11:42:52
442
原创 npm, yarn, pnpm之间的区别
在现代化的开发中，一个人可能同时开发多个项目，安装的项目越来越多，所随之安装的依赖包也越来越臃肿，而且有时候所安装的速度也很慢，甚至会安装失败。因此我们就需要去了解一下，我们的包管理器，在前端比较主流的包管理器主要有三个（当然还有其他优秀的包管理器，本文主要介绍这三个），分别是：npm，yarn，pnpm特性npmyarnpnpm依赖管理方式扁平化管理，嵌套依赖树，可能重复安装扁平化管理和符号链接，同版本只安装一次基于硬链接和符号链接的内容寻址存储安装速度最慢中等（并行安装）
2024-12-10 10:16:00
2134
原创 超火前端框架：Astro 5.0 正式发布啦
Astro 是专注于构建内容驱动型网站（如博客、营销和电商）的现代 Web 框架，以快速加载和优秀的 SEO 表现为核心优势。
2024-12-09 18:00:00
1211
原创 代码是上午写的，人是下午被开除的！
，表示需求简单，工作完全可以胜任。什么子查询，关联查询，左连接，右连接，通通不用，就是要先查一张表，然后遍历结果，再查另一张表。1.Leader 说 “辛苦了”，你就回“你也别闲着，帮我倒杯水”，表示对领导关怀的认可。毕竟，你写代码的时候，只有你和上帝知道逻辑是啥，没准过两天，就只有上帝知道了。第二点，不要去封装代码，从上到下的顺着写，程序顺序执行，效率才是最高的。不要听技术总监跟你说的，要写注释，要写文档，他是为了降低你开发效率。让他打你，然后技术总监，肯定觉得你受欺负了，然后给你颁发离职成就的。
2024-12-09 10:23:35
594
原创 优化单页应用 (SPA) 加载时间：异步代码块预加载
在本文中，将解释如何通过避免基于路由的懒加载引发的瀑布效应，提升客户端渲染应用的性能。我们会通过注入一个自定义脚本来预加载当前路由的代码块，确保这些代码块能与入口代码块并行下载。我将使用 Rsbuild 来实现脚本注入，但代码可以很容易地适配到 Webpack 和其他打包工具。代码示例基于一个只有两个页面的小型应用：一个首页（路径为和/home）和一个设置页面（路径为/settings。
2024-12-06 10:30:00
1956
原创 VUE3不需要使用pinnia
经过我的努力，vue3又减少了一个库的使用，我就说不需要用pinia，不过放弃pinia也就意味着放弃了它自带的一些方法等等，这些方法实现很简单，很轻松就可以手写出来，如果你是这些方法的重度用户，保留pinia也没问题，如果你也想代码更加精简，赶紧尝试下组合式函数吧。
2024-12-05 10:36:32
394
原创 零基础学鸿蒙开发--第十篇--应⽤级状态管理与Stage模型基本概念
如果开发者需要在⼀个⻚⾯内的所有组件中共享状态，或者是在多 个⻚⾯之间共享状态，这些装饰器便不再适⽤了，此时我们需要的就是应⽤级状态管理功能。都是将状态数据保存在内存中，应⽤⼀旦退出，数据就会被清理，如果需要对数据进⾏持久化存储，就需要⽤到。
2024-12-05 08:00:00
1304
原创 零基础学鸿蒙开发--第九篇--网络请求
默认情况下，应⽤只能访问有限的系统资源，若应⽤需要访问⼀些受保护的数据（照⽚、通讯录、位置等）或者功 能（打电话、发短信、联⽹等），需要先申请相应的权限。中⽤于表示异步操作结果的对象，若操作成功，其中会包含具体结果，若操作失败，其会包含错误的原因。在拦截器中，开发者可以对请求的参数或者响应的结果做⼀些统⼀的处理，⽐如在请求拦截器中统⼀为所有请求增 加。，开发者在完成第⼀步后，系统会在安装应⽤时⾃动为其进⾏权限预授予，开发者不需要做其他操作即可使⽤权限。相当于鸿蒙应⽤项⽬的⼀个第三⽅库，鸿蒙应⽤项⽬使⽤。
2024-12-04 08:15:00
2305
原创 零基础学鸿蒙开发--第八篇--组件生命周期和页面路由
在鸿蒙应⽤中，每个⾃定义组件从创建到销毁，都会经历⼀系列的步骤，在这个过程中，系统会在⼀些特定的阶段 运⾏⼀些特定函数，这些函数就被称为⽣命周期钩⼦函数，利⽤这些钩⼦函数，开发者可以在组件创建或者销毁时 执⾏⼀些⾃⼰的代码，例如在组件出现之前从后台服务器请求数据。当⽤户在⼀个⻚⾯完成操作后，通常需要返回到上⼀个⻚⾯或者指定⻚⾯，这就需要⽤到⻚⾯返回功 能。这种⽅式会返回到上⼀个⻚⾯，即上⼀个⻚⾯在⻚⾯栈中的位置。若指定的⻚⾯不在历史⻚⾯栈中，也就是⽤户并未浏览过指定⻚⾯，那么将⽆法回到指定⻚⾯。
2024-12-03 10:34:31
1101
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人