- 博客(41)
- 收藏
- 关注
RSS订阅原创 Monorepo 与包管理工具：从幽灵依赖看 npm 与 pnpm 的架构差异
Monorepo是一种将多个项目集中管理的代码仓库模式，具有代码共享、统一依赖管理、原子化提交等优势，适合微前端和关联项目开发。相比Multirepo，Monorepo简化了依赖管理但增加了仓库体积。在工具选择上，pnpm比npm更高效，能避免"幽灵依赖"问题——即未声明却可使用的间接依赖包，这种依赖可能引发版本冲突和安全风险。建议新项目使用pnpm进行严格依赖隔离，定期用depcheck工具检测幽灵依赖。
2025-07-11 13:28:54
1022
原创 告别系统时间篡改：用页面加载时间搞定前端倒计时的 “防作弊” 方案
摘要：前端实现倒计时功能时，直接使用new Date().getTime()获取系统时间存在安全隐患，用户可修改系统时间影响功能准确性。本文提出使用performance API结合后端时间戳的解决方案：通过performance.now()获取不可篡改的页面加载时间，配合服务器时间计算精准倒计时。该方法适用于抢票等对时间敏感的场景，有效避免用户修改系统时间带来的问题。
2025-07-08 11:06:11
195
原创 前端架构知识体系：Vue 项目架构设计、性能优化与 CI/CD 全流程
前端架构设计全流程解析 本文系统阐述了企业级Vue项目从技术选型到部署上线的架构设计全流程。技术选型推荐Vue3+Pinia+Vite组合，搭配ElementPlus或Vant组件库，通过ESLint+Prettier+Stylelint保障代码规范。架构设计层面，提出RBAC/ABAC权限方案、微前端集成策略，并详细列举性能优化手段（懒加载、CDN、虚拟滚动等）。部署环节构建Jenkins+GitLab的CI/CD流水线，强调Docker容器化与蓝绿发布策略。
2025-07-07 15:57:32
936
原创 彻底拆解 Vue scoped 指令：从编译原理到工程实践的全链路解析
Vue的scoped样式隔离机制解析：通过为DOM元素添加唯一哈希属性（如data-v-xxx）并将CSS规则转换为属性选择器实现组件样式隔离。vue-loader在编译时进行两步处理：标记DOM元素和转换CSS选择器。该机制虽有效，但需注意权重影响（选择器权重会增加）和父子组件样式渗透问题。可通过深度选择器（:deep）或全局样式来修改子组件样式。理解这些原理有助于解决实际开发中的样式冲突问题。
2025-06-24 18:07:04
602
原创 微信中 qrcode 生成二维码长按无效果的解决方案
摘要：在微信浏览器中使用qrcode插件生成二维码时，发现用户长按无法调起微信扫描功能。经排查发现，插件生成的canvas元素虽被隐藏但仍覆盖在img标签上方，导致微信无法识别二维码。解决方案是将canvas转换为base64格式，创建新的img标签展示二维码，从而解决了微信长按识别的兼容性问题。该方法确保了二维码扫码功能的正常使用，适用于公众号关注、活动跳转等场景。
2025-06-18 15:38:49
527
原创 解决移动端浏览器无法使用 navigator.clipboard 的问题
最近在开发H5项目实现物流单号复制功能时，采用PC端的navigator.clipboard.writeText()方法存在兼容性问题。经测试发现，该方法在移动端微信浏览器及其他部分浏览器中不可用。
2025-05-28 16:19:05
501
原创 如何取消 fetch 的流式请求并处理错误信息
最近在做的ai项目,产品提了一个需求,要求如果ai正在输出内容,用户再次提交了prompt,终止当前的请求,去发送新的请求。
2025-04-03 16:47:09
513
原创 webpack打包优化策略
3.图片压缩，使用图片压缩插件，压缩图片，并且可以将比较小的图片转换成base64格式。1.使用CDN，将比较大的依赖包放到CDN，通过script引入项目中。2.项目分包，路由使用懒加载。
2025-02-13 13:35:52
534
原创 2025好未来前端一面面试题(新鲜出炉)
最近我参加了好未来前端开发岗位的面试，想跟大家分享一下面试经历和心得。不同于传统的面试模式，这次面试的一大特点是更注重实际场景的考察，而不是单纯的技术知识点测试。题目的答案还没时间写,年前会给大家补齐(呜呜呜,别骂我)
2025-01-23 14:34:25
398
原创 微信小程序实现语音转文字
最近在做ai问答的小程序开发，需要有一个语音输入转文字发送的功能，找了网上很多教程，包括还有问了ai，发现都没有很好的解决，这里给大家一个标准的解决方案。
2025-01-09 15:42:35
1268
原创 解决微信小程序中调用流式接口，处理unicode编码时 TextDecoder 不兼容的问题
【摘要】开发AI问答小程序时，发现TextDecoder API在生产环境不兼容，导致流式Unicode数据无法解析。尝试多个polyfill库无效后，作者自行实现了一个UTF-8解码器：通过判断字节序列长度（1-4字节）逐字符转换，并处理UTF-16代理对。解决方案包括创建TextDecoder类，支持ArrayBuffer/Uint8Array输入，将代码封装为textDecoder.js并在app.js全局引入。该方法有效解决了小程序生产环境下的Unicode解码问题，代码可直接复用
2025-01-07 11:31:55
1438
22
原创 React 常见 bug 排查指南：方法绑定与全局状态管理问题
在 React 中，状态管理可以通过多种方式实现。从useState到useReducer，再到像 Redux 或 Zustand 这样的全局状态管理库，开发者可以根据应用的需求选择合适的工具。尤其是随着应用的复杂度增加，使用全局状态管理来共享数据变得尤为重要。但无论我们是使用 React 内置的状态管理还是外部库，都难免会遇到一个常见问题——方法绑定和this指向问题，尤其是在函数式组件中。
2024-12-30 17:28:37
871
原创 解决slice截取字符串出现乱码的问题
在开发中，我们经常会截取字符串，平常用的比较多的方法就是slice和substring，但是有的小伙伴通过slice截取的时候，经常会出现乱码的问题，我们来看一下现在有这样一段代码，截取字符串0-1位置的字符诶，很奇怪，怎么出现乱码了呢？？？我们再打印一下0-2位置的字符呢诶，正确了！我们打印一下表情的lentgh属性试一下我们会发现，输出了2，可是我们的表情明明只是一个字符啊。
2024-10-22 18:16:24
323
原创 一道价值很高的事件循环面试题（promise和setTimeout）
虽然promise.then是微任务，应该在setTimeout之前执行，但是运行到promise.then的时候，promise还没有resolve，所以不会执行，只有等到promise的状态变化，才会执行promise.then。6.查找任务队列，执行setTimeout中的代码，先输出 timeStart,然后将success resolve出去，但是会等到当前执行栈执行完才会执行下一个，所以先输出timeEnd。4.promise.then() ———— 异步任务（微任务）
2024-10-21 20:26:48
239
原创 操纵DOM元素产生死循环，你遇到过吗（附解决方案）
在业务开发中，需求各种各样，我们来看这样一段代码，页面中有几个div，我想点击按钮，复制一份到list中,并且打印一下索引值看一下但是我们去浏览器运行一下试试我们发现输出了很大的索引，并且我的页面还在无限的打印，我们的获取的item集合应该只有4个呀 ，为什么会有这种情况？
2024-09-20 16:14:13
419
原创 奇怪的面试题——怎么使 if（a==1&&a==2&&a==3）为true
大家来看这样一道题，怎么使这乍一看，他就不可能啊，怎么可能a既等于1，又等于2，还等于三？绝对是出这道题的人脑子瓦特了🤬，但是大家细想，出这种奇怪的面试题，其实主要是对我们js基础的考察，我们来一步一步的分解它。
2024-09-19 16:40:18
484
原创 var、let、const的区别以及暂时性死区（重点：let和const是有变量提升的！！）
但是呢，其实真正意义上说，let和const是有变量提升的！我们先来看一下MDN上是怎么说的其实let和const有变量提升的，只是因为产生了。
2024-09-14 11:48:04
350
原创 如何判断对象中是否存在某个属性
对象在我们开发中使用的非常多，在使用场景中，我们也会遇到很多需要判断对象中是否存在某个属性的情况，判断方法当然比较多，就看当前的场景适用哪种方法，下面是分享的几种方法。
2024-09-06 17:36:14
662
原创 箭头函数和函数的二义性
在js语言中，对于函数，其实定义不是很准确，我们在js的语言环境中，函数既可以当作方法去调用，也可以去通过new关键字，创建一个构造函数的实例对象去调用你会发现，都输出成功，但是其实很少有编程语言可以这样写，因为按照语言的规范，方法就是方法，对象就是对象，这样就造成了函数的二义性。
2024-09-06 16:27:03
387
原创 如何访问Express项目image文件夹下的图片
引言我们在自己做前后端分离的项目时，前端可以使用vue来创建前端项目，随着node.js的发展，基于node.js的express框架火了起来，我们可以通过vue+express来创建一个完整的项目，在前端项目中，我们有时需要去拿到后端的图片，怎么解决呢？解决方案废话不多说，直接上解决方案首先，请看一下express的目录如果想通过浏览器或者前端项目访问到express中的图片，我们首先需要将你想访问的文件夹指定成静态资源，服务器才可以将他返回给前端或者浏览器，我们需要在app.js
2024-02-04 16:06:02
902
1
原创 动态表单的批量新增功能的实现
我们通过v-for去遍历form.list，这样我们拿到的每个item就是list中的每一项，然后给每个输入框绑定item.value,我们点击新增，会像list中push一个新的{value:""}这种格式的变量，就能实现动态新增，删除我们去通过传递给我们的index去寻找对应的输入输入框，然后删除数组的对应项。这时，我们就不能单纯的去一对一的进行v-model的绑定，而是需要通过v-for进行遍历，通过item和index去进行动态绑定，
2024-01-05 10:53:15
528
1
原创 el-dialog中echarts图表不显示的解决方案
在vue的项目开发中，会有这样一种情况，我们需要在dialog中防止echarts图示，但是在上手的时候会发现，第一次打开dialog时图示不会显示，但是第二次打开之后就显示了。
2023-11-08 11:00:48
1987
1
原创 JS中防抖和节流的实现
在 JavaScript 中，防抖（debounce）和节流（throttle）是两种常用的性能优化技术，用于控制函数的执行频率，以避免过多的计算或请求。
2023-10-27 14:14:16
126
1
原创 map方法的用法详解
JavaScript中的map()方法是数组对象的一个高阶函数，它用于对数组中的每个元素进行遍历处理（类似于for和foreach），并返回一个新的数组。并且不会改变原数组。
2023-10-27 10:18:37
135
1
原创 reduce方法的用法详解
reduce方法作为JavaScript中数组的一个高阶函数， 对数组中的每个元素执行一个由您提供的reduce函数(升序执行)，将其结果汇总为单个返回值。reduce方法可做的事情特别多，就是循环遍历能做的，reduce都可以做，比如数组求和、数组求积、数组中元素出现的次数、等等。
2023-10-27 09:56:27
326
1
原创 SPA（单页面应用）首屏加载慢的解决方案
SPA（single-page application），翻译过来就是单页应用，SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTMLJavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面，在任何时间点都不会重新加载，与其对应的是MPA（MultiPage-page application）多页面应用。
2023-10-26 10:35:34
332
原创 动态绑定树状结构数据（问题解决方案：使用了递归）
在日常的开发中，我们会经常遇到棘手的问题，就是树状结构的数据处理，现在的大多数的树状结构的代码都是来源于elementUI，在elementUi中，提供了很多的方法供我们选择。，将我们处理完的data数据赋给tree时，数据类型一定要是数组！
2023-08-25 11:08:51
195
1
原创 ！！js中双感叹号的用法
双感叹号在我们平时的开发中也是十分常用的，它的用法可以理解为对变量进行判断，当！！遇到null，undefind和空值时，就会返回false。我们在浏览器尝试一下 可以看到，浏览器打印的值都为false，在实际开发中，常用的场景是循环遍历数组时，每个item中的包含的对象不一样，需要动态的去控制组件是否显示
2023-08-14 14:07:03
198
原创 Vue动态绑定dom元素的样式（背景颜色，字体颜色）（嵌套了三元表达式）
在项目开发时，许多情况下，dom元素的样式不是一成不变的，是需要根据接口返回的数据去进行动态显示的，在vue中，v-bind就很好的为我们解决了这一问题。：在动态绑定图片的url地址是，需要写在require中！
2023-07-30 17:29:22
648
1
原创 解决动态绑定echarts的data数据，页面无法进行渲染展示的问题
一般在我们使用echarts去绘制图标的时候，里面的data值一般都是去进行动态绑定的，比如在vue中去发送axios或者ajax请求，在请求成功的回调函数中对echarts的data数据进行动态绑定，但是有时会出现页面无法渲染的情况。以下提供了解决方案。
2023-07-30 11:13:48
3954
4
原创 Vue通过axios（封装ajax）调用接口并返回进行数据
在vscode或其他主流浏览器的控制台通过"npm install axios -g"去全局安装axios。
2023-07-26 14:16:23
1958
1
原创 Vue通过Vue.prototype.$name实现全局挂载
在Vue中，$可以被理解成一种代码规范，在Vue的官方文档中,this.$是指vue中内置的一些属性，当然这些属性也可以通过我们的全局挂载去实现，这样做的意义是防止与实例中定义的数据，方法，计算属性冲突。例如，我们在data中定义了number，但是在我们绑定到原型中的时候没有用$符号，在我们想通过this.number去获取数据的时候，就会产生代码冲突。在main.js中通过Vue.prototype可以实现全局挂载，在每一个Vue实例中都可以使用它，减少代码冗余，那为什么要使用$符号去定义呢？
2023-07-26 09:33:47
298
1
原创 “vue : 无法加载文件 D:\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本”的解决方法
vue创建项目报错，用管理员打开vscode，再去更改执行策略，即可创建成功！
2023-07-25 09:00:12
2064
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人