- 博客(83)
- 问答 (4)
- 收藏
- 关注
原创 前端倒计时误差!
前几天听说公司某个项目组,由于不对定时器进行误差处理,间接导致损失了几十万。。还被领导公开批评了。因为定时器误差,导致了公司几个单子处理失败。。。白白损失了 money。"倒计时误差"是前端开发中的经典问题,也是面试官考察候选人问题分析能力的高频考点。
2025-06-10 09:36:01
364
原创 前端金额运算精度丢失问题及解决方案
前端开发中难免会遇到价格和金额计算的需求,这类需求所要计算的数值大多数情况下是要求精确到小数点后的多少位。但是因为JS语言本身的缺陷,在处理浮点数的运算时会出现一些奇怪的问题,导致计算不精确。本文尝试从现象入手,分析造成这一问题原因,并总结和整合一些通用的解决方案,以供大家参考。本文对 Javascript 中浮点数运算出现的精度丢失问题进行了还原,分析了问题产生的原因在于二进制本身。同时给出了三个网络上比较成熟的解决方案,其中第一和第二方案基本可以满足大部分开发场景,如果不能满足就使用类库。
2025-06-05 09:36:58
902
原创 Vite模块联邦(vite-plugin-federation)实现去中心化微前端后台管理系统架构
在现代大型前端项目开发中,多团队协作时往往面临代码隔离与集成的挑战。为了解决这一问题,我们需要一种能够让各个微前端模块既能独立开发部署,又能作为完整系统一部分的解决方案。基于 Vite 的模块联邦插件提供了一种去中心化的微前端架构实现方式,实现了组件、路由的跨应用共享和动态加载。本文将结合实际项目经验,详细介绍如何利用模块联邦技术在 「vue3 生态」中构建去中心化的微前端架构。是 Vite 生态中实现模块联邦功能的插件,它允许多个独立应用在运行时共享模块和代码,无需重复构建或打包依赖。
2025-06-05 09:36:19
920
1
原创 Vue 3 的路由管理
路由指的是通过不同 URL 访问不同页面的方式。根据路由管辖权的归属不同,可以分为前端路由(Client-Side Routing)和后端路由单页应用一般采用前端路由。在 Vue 框架中,路由负责根据当前的 URL 地址,渲染对应的组件。。要理解路由管理,不妨自己造一个路由器。提示:以下是本篇文章正文内容,下面案例可供参考。
2025-05-29 10:12:57
521
原创 三行代码完成国际化适配
国际化适配一直以来都是一个棘手的问题,尤其是在项目一开始没有考虑的情况下,我们需要修改大量源码,使用类似于 ${t.xxx} 的占位符去一一修改我们已经写好的文字(如最耳熟能详的 vue-i18n)。这个工程量在项目后期是巨大的,令人无法接受的。目前,网上有五花八门的国际化方案,但是大部分都只解决了基础问题——能用,但是都存在这个痛点——太麻烦了。好,那么有没有一款插件,让我们不用自己动手做这件事呢?提示:以下是本篇文章正文内容,下面案例可供参考wenps正是这样一款通用插件})})
2025-05-27 11:53:05
1156
原创 requestAnimationFrame 与 requestIdleCallback 对比
看过埋点库 sunshine-track ,很多人疑惑为啥批量上报埋点信息的时候,用的是 requestIdleCallback 而不是 requestAnimationFrame,今天就解答一下sunshine-track 源码学习:https://github.com/sanxin-lin/sunshine-track提示:以下是本篇文章正文内容,下面案例可供参考分优先级处理:关键数据立即上报,普通数据批量处理队列机制:积累足够数据或达到时间阈值时触发。
2025-05-14 13:39:36
813
原创 从0设计开发一款JS-SDK
最近想研究一下js-sdk,所以就做了一些调研,记录下开发过程。前端SDK是什么?前端SDK是为了帮助前端实现特定需求,而向开发者暴露的一些JS-API的集合,规范的SDK包括若干API实现、说明文档等UI组件库:通过封装一系列组件,通过配置帮助开发者调用AntdElementUIJS类库:通过实现一类常用的方法,便于开发处理数据,也不用再考虑兼容性lodashmoment监控统计工具:通过API,来监听前端系统的报错、统计数据Sentry百度统计等。
2025-05-06 17:05:50
1269
原创 使用原生 CSS 实现轮播
最新!原生CSS也可以实现轮播图了,无需JavaScript!从 Chrome 135 开始,开发者可以使用 CSS Overflow 5 规范中的新功能来创建滚动和轮播效果(图1~3),而无需使用 JavaScript。这主要通过全新的 ::scroll-button() 和 ::scroll-marker() 功能来实现。☀️ ::scroll-button():自动生成滚动控制按钮 (上/下/左/右),用于触发滚动容器的滚动行为。
2025-05-06 17:04:23
497
原创 Vue 项目中的 vue.config.js:从基础到高级的全面解析
在 Vue.js 项目开发中,vue.config.js 文件是项目的核心配置文件,它位于 Vue CLI 项目的根目录下,用于对项目的构建、开发服务器、插件等进行高度自定义设置。通过合理配置 vue.config.js,可以优化项目构建过程、调整开发体验、以及增加项目的灵活性。本文将详细介绍 vue.config.js 的配置项,并通过丰富的代码示例展示如何使用这些配置来优化你的 Vue 项目。通过 configureWebpack,可以对 Webpack 的配置进行自定义,例如添加插件、修改模块规则等。
2025-05-06 10:44:28
730
原创 ES 中最具变革性的 JavaScript 特性
随着 ES15 和有前途的提案的推出,JS 功能有了全新的升级。从复杂的异步功能到语法数组糖和现代正则表达式,JavaScript 编码变得比以往任何时候都更容易、更快捷。
2025-05-06 10:44:12
790
原创 JavaScript 强大的 8 个 DOM API
作为前端开发者,我们每天都在操作 DOM,但 DOM API 中隐藏着许多鲜为人知却极其实用的方法。本文将介绍一些「冷门但能显著提升开发效率」的DOM操作技巧提示:以下是本篇文章正文内容,下面案例可供参考。
2025-04-21 11:26:14
960
原创 Vue3 响应式实践——reactive与ref
用了 reactive,数据改了,页面却没反应?解构一时爽,结果响应式没了?别头疼了!这篇直接给你把 Vue3 响应式 API 的那些弯弯绕绕讲透彻,让你彻底跟 reactive 的坑说拜拜,以后只宠 ref 这位“小甜甜”!刚上手 Vue3 的小伙伴,可能觉得 reactive 声明对象挺顺手。但真到项目里,你会发现 reactive 这家伙,坑你没商量!下面这些场景,都是过来人的血泪教训!ref。
2025-04-17 09:43:54
511
原创 40 个 CSS 技巧助你提升网页设计水平
网页设计领域快速发展。为了保持领先地位,掌握最新的 CSS 技术至关重要,这些技术可以将您的网站从普通变得与众不同。在本文中,我们将探索 100 个强大的 CSS 技巧,这些技巧将使您的网页设计技能更上一层楼。a {
2025-04-07 11:17:34
796
原创 Vue和React区别
Vue和React的区别和从编译原理的角度来聊聊Vue的template和React的jsx。面试官问这些问题一般是想了解你对这两个框架的理解,所以这是一个开放性的问题,不同的同学对框架的理解程度不同、侧重点不同,回答出来的答案也不同。这篇文章将从Vue出发来聊聊Vue和React的区别,大家有补充的欢迎在评论区提出。先来说说相同点,这个简单,组件化、采用虚拟DOM、以及都在向函数式编程靠拢,具体的表现就是Vue推出了Composition(组合式) API,React推出了hooks。
2025-04-07 11:17:00
715
原创 JavaScript 数组7个不常用的方法
JavaScript 数组除了 map()、filter()、find() 和 push() 之外还有更多功能。现在给大家分享一些鲜有人知道的数组方法,我们现在开始吧。
2025-04-03 08:50:18
454
原创 前端项目优化
在如今这个信息爆炸的时代,前端性能优化已经成为提升用户体验和网站竞争力的关键因素。一个加载迅速、响应灵敏的网站,不仅能吸引更多的用户,还能提高用户留存率和转化率。今天,就让我们一起深入探讨前端项目优化的方方面面,掌握那些能让网站“飞起来”的秘籍。提示:以下是本篇文章正文内容,下面案例可供参考前端项目优化是一个系统性工程,涉及加载优化、资源优化、代码优化、构建优化以及性能监控等多个方面。
2025-04-03 08:49:17
1100
原创 深度解析Vue响应式机制
最后总结一下reactive函数的执行流程:首先,当我们调用reactive函数并传入一个target对象时,reactive内部会调用createReactiveObject函数生成并返回一个proxy代理对象。这个proxy代理对象中get方法会收集并以键值对的方式存储依赖,当改变对象的某个属性时,触发proxy的set函数,set函数中的trigger函数会从之前存储的对象中循环调用所有依赖。
2025-03-24 09:13:32
734
原创 实用的 JavaScript 自动化脚本
以前,我总在浏览器上花大量时间处理重复性任务——填写表单、管理标签页、浏览无尽的页面。我感觉一定有更聪明的方法来处理这一切。所以,我转向JavaScript来自动化这些任务。效果立竿见影。以前需要数小时的工作,现在只需要几分钟就能完成。
2025-03-24 09:13:01
982
原创 8个关于Promise高级用途的技巧
我发现很多人只知道如何常规地使用promise。在js项目中,promise的使用应该是必不可少的,但我发现在同事和面试官中,很多中级以上的前端仍然坚持promiseInst.then()、promiseInst.catch()、Promise等常规用法等等。即使是 async/await 他们也只知道它但不知道为什么要使用它。但实际上,Promise 有很多巧妙的高级用法,并且一些高级用法在 alova 请求策略库内部也被广泛使用。现在,我将与大家分享8个高级使用技巧。
2025-03-17 09:07:08
994
原创 响应式设计:打造适配所有屏幕的H5页面大小
萝卜青菜,各有所爱;正如我们对于手机的选择一样,每个人都有自己偏好的品牌和型号,而这些设备的屏幕大小也千差万别。面对如此多样化的终端环境,如果一个H5页面仅仅针对某一特定尺寸的手机进行设计,那么当其他用户尝试访问时,可能会遇到布局错乱、元素显示不全等问题,极大地影响了用户体验。在这样的背景下,如何设计出能够完美适配所有屏幕的H5页面,成为了开发者们亟需解决的重要课题。
2025-03-17 09:06:46
887
原创 Vue3的响应式原理?
其实Vue3已经出来很久了,可能大部分公司都用上了,但是,Vue3究竟比Vue2好在哪里?其实很多人都不知道。今天我就先给大家讲一讲Vue3的响应式原理吧,顺便说一说Vue3的响应式到底比Vue2的响应式好在哪。先看看下面这段代码let name = '林三心', age = 22, money = 20${
2025-03-13 10:59:43
685
原创 做一个考试网站,怎么防止考生作弊呢?
最近公司在做一个内部的考试平台,说到考试网站,我们第一时间想到的就是防作弊,所以在做这个考试平台的时候,就在想应该怎么去做防作弊。
2025-02-13 16:18:03
363
原创 10 个非常有用的 CSS 单行代码,你可能没有使用过它们
CSS 是设计网站的工具之一。许多开发人员只了解 CSS 的基础知识,他们花了数小时才弄好布局,或者设计出总觉得缺少点什么的设计。但有一些特殊功能和隐藏的精华可以为您节省数小时的工作时间,并显著改善您的代码,使其更加完美。以下可能是你没有使用过,但绝对有用的 10 个 CSS 功能!
2025-02-13 16:04:30
803
原创 聊聊JavaScript如何判断对象自身为空?
如何判断一个对象为空是我们在开发中经常会遇到的问题,今天我们来聊聊几种经常使用的方法,以及在不同的场景下我们如何去使用。提示:以下是本篇文章正文内容,下面案例可供参考判断一个对象是否为空时,使用 Reflect.ownKeys 方法最为完美。
2025-01-06 14:47:14
974
原创 v-for和v-if为啥不共存?
当我们提到 Vue 的面试题时,不免总会提到一个问题:v-for 和 v-if 可以共存吗?Vue2 中 不可以Vue3 中 可以Vue2 中 v-for 优先级比 v-if 高Vue3 中 v-if 优先级比 v-for 高但是其实很多人都是背的,具体为啥会这样,很多人都没搞清楚,稍微再往深一问,95%的人就回答不出来了~提示:以下是本篇文章正文内容,下面案例可供参考总结就是不要让 v-if 和 v-for 共存在同一个标签中,遇到这种情况需要使用 computed 去计算,然后再去渲染。
2025-01-06 14:46:58
594
原创 WebSocket笔记
本文将介绍 WebSocket 的封装,比如:心跳机制,重连和一些问题如何去处理以下是百度百科中对WebSocket是一种在单个 TCP 连接上进行 全双工 通信的协议。WebSocket通信协议于2011年被 IETF 定为标准 RFC 6455,并由 RFC7936 补充规范。也被 W3C 定为标准。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。
2024-12-31 14:54:12
1410
原创 10个你可能错过的JavaScript怪异现象
如果编程语言是一个大家庭,那么JavaScript无疑是那个有点怪异,但又让所有人喜爱的“怪叔叔”——虽然大家都喜欢他,但似乎没人能完全理解他。你肯定听过那些让人啼笑皆非的故事,比如NaN竟然是个数字,或者JavaScript居然只用了10天就被开发出来(是真的!但是,今天我们要深入挖掘一些更为深奥的JavaScript冷知识——这些内容即使是资深开发者也未必知道。系好安全带,让我们一起探索这个充满混乱与魅力的JavaScript世界吧!提示:以下是本篇文章正文内容,下面案例可供参考。
2024-12-31 14:53:58
704
原创 7 种常见的前端攻击
大家都知道,保证网站的安全是十分重要的,一旦网站被攻陷,就有可能造成用户的经济损失,隐私泄露,网站功能被破坏,或者是传播恶意病毒等重大危害。所以下面我们就来讲讲7 种常见的前端攻击。
2024-12-31 14:53:47
869
原创 8 个 CSS 技巧,让你的代码更简洁优雅
写出简洁优雅的 CSS 代码不仅能提高代码的可维护性,还能减少样式冲突。本文将介绍 8 个实用技巧,帮你提升 CSS 代码质量。提示:以下是本篇文章正文内容,下面案例可供参考。
2024-12-25 14:29:07
1086
原创 如何使用流式渲染技术提升用户体验
流式渲染主要思想是将HTML文档分块(chunk)并逐块发送到客户端,而不是等待整个页面完全生成后再发送。流式渲染不是什么新鲜的技术。早在90年代,网页浏览器就已经开始使用这种方式来处理HTML文档。在 SPA (单页应用)流行的时代,由于 SPA 的核心是客户端动态地渲染内容,流式渲染没有得到太多关注。如今,随着服务端渲染相关技术的成熟,流式渲染成为可以显著提升首屏加载性能的利器。素材来源于文章本文从理论上探讨了流式渲染相关实现方案,理论上,流式渲染很简单。
2024-12-25 14:28:59
870
原创 一文搞懂JS原型与原型链!
作为一个初入前端的小白,原型链的概念太多,一直觉得难以理解,对整个原型链的了解非常模糊。提示:以下是本篇文章正文内容,下面案例可供参考每个 JavaScript 对象都有一个原型对象,通过 prototype 属性实现继承机制。每个对象均存在隐式原型(__proto__),函数对象才有prototype属性「__proto__存在的意义在于为原型链查找提供方向,原型链查找靠的是__proto__」,而不是prototype 函数对象的__proto__都指向Function.prototype。
2024-12-25 14:28:49
724
原创 前端常见的数据加密
你是否有过这样的经历?在注册一个新网站时,需要填写个人信息,例如姓名、邮箱、手机号码,甚至身份证号码。你可能会担心,这些信息会被泄露,被不法分子利用。前端数据加密,就是解决这个问题的关键技术之一。它可以在数据传输到服务器之前,对其进行加密处理,即使数据被窃取,也无法被轻易破解。提示:以下是本篇文章正文内容,下面案例可供参考前端数据加密是指在数据从用户浏览器传输到服务器之前,对其进行加密处理的技术。它将明文数据转换为密文,即使数据在传输过程中被截获,也无法被轻易读取或篡改。前端数据加密 vs 后端数据加密。
2024-12-17 09:51:58
1162
原创 要用Vue3,你该做出改变喽
Vue3 已经发布很长一段时间了,虽然早就用上了框架,但是很多人依旧保持着Vue2的思维习惯,导致大家在实际开发中并没有感觉到提升,属实是新瓶装旧酒。我们应该意识到这并不仅仅是一个数字大版本的迭代,而是一次全新的开发体验。让我们一起看看在使用Vue3开发时,应该在哪些地方做出改变?提示:以下是本篇文章正文内容,下面案例可供参考。
2024-12-16 17:20:50
704
原创 Vue 的 setup 语法糖为什么不能 export?
如果体验过 Vue 3 的语法糖,那你可能踩过这个雷:“不支持 ESM 模块的export”,因为其幕后机制不支持 ESM 的export语法。👇 这篇 Vue 学院1导出报错的原因的运行机制编译宏的妙用提示:以下是本篇文章正文内容,下面案例可供参考Vue 3 的封装是关键:Vue 3 的组件被设计为独立组件。:当你需要与外界共享内部状态时,defineExpose 提供了一种精准控制的方案。保持模块化:遵循“最小权限原则”,只暴露必要的内容,并保持组件的逻辑清晰且易于管理。
2024-12-16 16:26:00
1086
js中的this.callback(),this.async()如何理解
2022-12-07
hibernate测试出现错误,请问大佬怎么解决?
2020-03-03
修改eclipse背景图片透明度
2021-09-28
TA创建的收藏夹 TA关注的收藏夹
TA关注的人