- 博客(123)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 【Javascript】 小白必备！手把手教你实现代码节流&防抖✨
当一个事件被触发后，在一定时间间隔内，不管事件再次触发多少次，都只会执行一次函数。代码节流和防抖是前端开发中常用的技巧，可以提高页面性能和用户体验。接下来，我将以“手把手”的方式为你详细介绍如何实现代码节流和防抖。（Debouncing）与节流相似，但是它允许事件在一定时间间隔内的连续触发，只是等待一段时间后才执行函数。使用防抖函数将会在规定的延迟时间内，只执行最后一次触发的函数回调。✨ 首先，我们来了解一下什么是代码节流和防抖。🔧 接下来，我们开始实现代码节流和防抖。1️⃣ 首先实现函数节流的工具函数。
2023-12-25 11:02:20
658
2
原创 【vue】仿PC端微信制作聊天框
采用(vue+vue-router+vuex+es6+stylus) 来实现一个仿PC端微信的小demo，可以使用一个智能api，实现智能对话。欢迎大家对鄙人提出宝贵意见，相互学习讨论，一起进步。demo地址源码地址实现页面的核心组件分别是搜索框，左侧聊天列表，消息对话框，还有输入框虽说在这里使用vuex有点大材小用，但是面对各组件之间状态传递，多层嵌套的组件传参，毅然决然决定使用vuex进行数据管理，把所有事件和状态存储在store对象中，在组件中通过计算属性获得事件，因此就有了实时性。聊天消息列表在
2022-06-17 13:05:36
9394
12
原创 假如你让5k的程序员开发app
-----------------------------------------------------------------------------------------开发一个APP有多难？只能说比较难，也比较耗费成本，问题太抽象我没法量化的回答有多么难，说下大致成本，你转换成难度系数。一个APP最简单的也是几千起步，这种几千的就是大学生的那种比较简单的毕业设计。一般是单端（就是说只要安卓或者只要苹果）不包含后台（就是不用云端数据交互，所有的数据都在本地手机本身交互保存），正规的商业APP一般是5
2021-02-23 16:28:16
265
原创 【TypeScript】不想用是因为你不知道这些好处
最近，团队在开发组件库时，部分成员对使用TypeScript抱怨频繁，表示“TypeScript太麻烦了，我们不想用！”于是我进行了代码审查，发现了许多重复的类型定义，导致代码复用性下降。进一步交流后发现，很多人并不清楚如何在TypeScript中正确地复用类型。当团队成员尝试复用已有类型时，他们往往只是简单地为其新增属性，却忽略了更高效的复用方式。a: string;b: string;c: string;a: string;b: string;e: string;a: string;
2024-04-19 09:14:03
580
原创 【JavaScript】这样用js模拟敲击左右箭头键⬅️➡️，简单易懂！
值得注意的是，在进行模拟键盘输入时可能会受到浏览器的限制，在一些特定的场景下无法正常使用。例如在跨域环境中，或者非用户交互触发的情况下可能会被浏览器限制，这时你可以考虑使用外部库，比如Robotjs，或者使用操作系统级别的自动化工具（比如AutoHotkey、AutoIt等），这样可以避免这些限制。因此，在Node.js项目中模拟键盘输入时，你需要安装并调用第三方库Robotjs，才能正常实现模拟键盘输入相关的功能。在前端开发中，模拟键盘按键是一项非常实用的技能，尤其是当你需要在页面上实现一些交互操作时。
2024-04-19 08:49:22
231
1
原创 【JavaScript】实现下--刘谦春晚魔术：约瑟夫环的数学魅力！
约瑟夫环问题源自古罗马，由历史学家约瑟夫斯提出，而它的数学模型则在19世纪被命名。这个问题的设定如下：n个人围成一圈，从第一人开始报数，每报到第k个人，该人就会被淘汰。游戏继续进行，直到最后只剩下一个人。我们的目标是找出这个幸存者的编号。让我们使用扑克牌来解读约瑟夫环问题，揭示其中的奥秘。
2024-02-19 14:02:34
663
2
原创 【Vue3】打造Input幽灵建议！
前几天在看一个网站的时候，发现它的对话框很有意思，当你输入一段文字时，然后按 Tab 键，它会自动给你文字建议，就比如下面的例子，你输入 “你”，绑定 Input 的 Tab 键盘事件，记得阻止默认行为，因为按 Tab 键会导致 Input 失焦~按 Tab 键，就会自动提示你 “你好” 的建议。
2024-01-15 10:41:49
489
原创 【安全策略】前端 JS 安全对抗&浏览器调试方法
如今这个时代，数据已经变得越来越重要，网页和APP是主流的数据载体。而如果获取数据的接口没有设置任何的保护措施，那么数据的安全性将面临极大的威胁。不仅可能造成数据的轻易窃取和篡改，还可能导致一些重要功能的接口被恶意调用，引发DDoS、条件竞争等攻击效果。这是我们绝对不能忽视的问题！😱 数据泄露风险：未经保护的数据接口很容易遭到黑客的攻击，从而导致数据泄露。一旦敏感信息落入错误的手中，后果将不堪设想。为了避免这种情况发生，我们需要采取一系列的安全措施，确保数据在传输和存储过程中始终得到有效的保护。
2024-01-15 10:37:01
1597
原创 【面试】 前端竞争压力大？揭秘让你们学后端的真实动机！
前端开发属于程序员吗?网友是这样回答的：看完前端同学的评论，我悟了，你们让人都去学后端卷，然后减小前端竞争压力是吧？哈哈哈，你们这帮老6……那些觉得的同学们想必已经熟练掌握了以下内容吧？
2024-01-08 13:57:02
1122
原创 【css】 打破平凡！22个酷炫CSS技巧，让你的网站在激烈竞争中脱颖而出✨
想要让你的网站在激烈的竞争中脱颖而出吗？使用CSS的强大功能可以帮助你实现这一目标。本文将分享22个实用的CSS技巧，帮助你提升网站的外观和用户体验。无论你是一个新手还是有经验的开发者，这些技巧都将为你的网站注入新鲜的设计元素和动感效果。💡 自定义字体：通过使用@font-face规则，你可以在网站中应用自定义字体，增加独特性和品牌识别度。选择适合你网站风格的字体，并确保它们能够正确加载和显示。🎨 渐变背景色：使用CSS渐变背景色可以为你的网站添加华丽的外观。
2023-12-28 13:47:21
508
原创 【JavaScript】 细说JS数据处理方法，让你的数据表现出色如画
这四个方法提供了更高层次的抽象，使代码更简洁和可读，并提高对数组的操作效率。返回指定字符或子字符串在原字符串中从startIndex开始最后一次出现的位置的索引。返回指定字符或子字符串在原字符串中从startIndex开始第一次出现的位置的索引。findIndex(callback): 返回数组中满足条件的第一个元素的索引。数字范围限制：使用 Math.max()和 Math.min()方法限制数字的范围。数字比较：使用比较运算符（如 、=、==、。
2023-12-28 08:49:37
655
原创 【echarts大屏】横向柱状图翻页轮询，让数据动起来！
想要打造震撼人心的数据可视化大屏？那么不妨尝试一下【echarts大屏】横向柱状图翻页轮询效果！通过这种方式，可以让你的数据图表生动起来，吸引用户的注意力。✨ 接下来，我将为你介绍如何实现【echarts大屏】横向柱状图翻页轮询的效果。1️⃣ 准备工作：首先，你需要引入ECharts库，并创建一个容器元素，用于展示图表。2️⃣ 数据准备：根据你的需求，准备好要展示的数据。可以是实时的数据、动态变化的数据等。3️⃣ 配置图表：使用ECharts提供的API，配置横向柱状图的样式、坐标轴等，以及
2023-12-25 11:34:39
745
原创 【多样注释】刚入职就崩溃！这段神秘注释让人无法忍受
最近写码写的头晕脑涨，同事听完后给我发来几张神图，我看完当场笑尿🤣，分享一下，权当博君一笑了。代码注释图案传送门
2023-11-14 17:12:19
140
原创 【多样注释】佛祖保佑你的代码无BUG
代码佛祖图案&前段时间在写Android项目代码，结构上比较乱，当然BUG很多也是自然的。有趣的是我在代码里发现了几段有意思的注释，我当时是觉得挺好玩，贴出来大家也乐一乐顺便水一篇文章。我一个朋友调侃到“佛祖表示：这个真特么难”。
2023-11-14 13:49:45
349
原创 【vue】0到1的常规vue3项目起步
路由设计原则：找页面的切换方式，如果是整体切换，则为一级路由，如果是在一级路由的内部进行的内容切换，则为二级路由。这里自动导入需要深入到elementPlus的组件中，按照官方的配置文档来。基于vite的项目默认不支持css预处理器，需要开发者单独安装。配置别名路径可以在写代码时联想提示路径。
2023-11-13 13:19:41
199
原创 【uniapp】解决在H5谷歌浏览器下 u-input 标签 设置只读后,click事件不生效
导致外层的view上写的点击事件不再生效。后，u–input就不再拦截鼠标事件，外层的view上的点击事件就能够正常生效了。使u–input里写上readonly&disabled为true之后，在外层的view上写的点击事件生效。的作用是让元素实体 “虚化”，我们可以看到这个标签，但只是一个虚幻的影子而已，类似于海市蜃楼。：由于兼容性差异，nvue下需使用u–input，非nvue下需使用u-input。但是更换浏览器后就可以，打包app也是正常可以触发的，本来是没打算。的u-input元素会。
2023-11-07 15:44:44
7979
原创 【JavaScript】前端一定要看的 Promise 用法详细解析
Promise是ES6之后新增的一个重要知识点（也可以说是最重要的知识点之一），是每个前端开发都必须要掌握的知识点。但是对于Promise的学习来说，很多同学会觉得有点迷茫，刚开始不知所云、困难重重。接下来需要详细学习Promise的各种用法（事无巨细），并且我还会通过手写Promise让大家了解它的底层原理。第一，我们需要自己来设计回调函数、回调函数的名称、回调函数的使用等；
2023-11-02 14:33:10
188
原创 【心得】来聊聊令人头疼的前端内存泄漏~
内存泄漏可以被视为你家中的水泄漏；虽然一开始小滴水可能看起来不是什么大问题，但随着时间的推移，它们可能会造成严重的损害。同样，在JavaScript中，当不再需要的对象没有从内存中释放时，就会发生内存泄漏。随着时间的推移，这种累积的内存使用可以减慢甚至崩溃你的应用程序。
2023-10-23 10:42:57
167
原创 【Javascript】不满意网上的Token无感知刷新方案，自己琢磨了个感觉还不错~
大家设想一下，如果有一个超级大的表单页面，用户好不容易填完了，然后点击提交，这个时候请求接口居然返回401，然后跳转到登录页。。。那用户心里肯定是一万个草泥马~~~所以项目里实现token无感知刷新是很有必要的~逻辑都写拦截器里，耦合性高，不太好接口重试的机制做的，不太好接口并发时的逻辑处理做的，不太好我为什么不想要让这套逻辑耦合在拦截器里呢？一方面是因为，我想要写一套代码，在很多的项目里面可以用，把代码侵入性降到最低。
2023-10-23 09:31:57
162
原创 【Vue3-Vite】Vite配置--路径别名配置
vue3-vite路径别名配置使用 @ 代替 src，因为 typescript 特殊的 import 方式 , 需要配置允许默认导入的方式，还有路径别名的配置。官方教程: https://cn.vitejs.dev/guide/env-and-mode.html。本地安装 Node 的 TypeScript 类型描述文件即可解决编译器报错。使用 @ 代替 src。
2023-09-07 14:43:58
909
原创 【前端面试】快来看看这8个高级面试题
前端高级面试是一篇非常流行的前端面试笔记和指南，可以帮助准备面试的开发人员更好地了解和准备常见面试问题。该书包含了以下主题：1. HTML，CSS和JavaScript基础知识；2. DOM，BOM及常用API；3. Ajax原理以及相关技术；4. 前端自动化构建工具，如Gulp、Grunt和Webpack等；5. 前端框架，如AngularJS、React和Vue.js等；6. 浏览器兼容性问题；7. 性能优化；8. 安全问题；9. 移动端开发问题。
2023-09-05 11:28:40
282
原创 【javascript】禁止浏览器调试前端页面
前端页面防止调试的方法主要是通过不断 debugger 来疯狂输出断点，因为 debugger 在控制台被打开的时候就会执行由于程序被 debugger 阻止，所以无法进行断点调试，所以网页的请求也是看不到的。Function 构造器生成的 debugger 会在每一次执行时开启一个临时 js 文件，当然使用的时候，为了更加的安全，最好使用加密后的脚本。由于前端页面会调用很多接口，有些接口会被别人爬虫分析，破解后获取数据，为了杜绝这种情况，最简单的方法就是禁止人家调试自己的前端代码。
2023-09-04 10:31:54
903
原创 【vue】实现高性能虚拟滚动的Vue代码解析
通过以上的代码分析，我们深入了解了基于Vue实现的高性能虚拟滚动技术。这项技术通过动态计算偏移量和显示的数据范围，使得页面在渲染大量数据时能够保持流畅性。特别是在滚动事件中加入时间间隔判断，进一步优化了滚动性能。虽然本文只是简单介绍了虚拟滚动的实现思路，但它背后的原理和技术值得我们深入学习和探讨。通过这个示例，我们不仅可以提升页面性能，还可以更好地理解前端渲染机制和优化策略。希望本文对你理解和掌握虚拟滚动技术有所帮助！如果你有任何疑问或者想进一步深入讨论，欢迎在评论区留言。
2023-08-26 12:16:08
608
原创 【uniapp】封装一个全局自定义的模态框
通过封装全局自定义的模态框，开发者可以大大提高应用程序的用户体验。同时，全局自定义的模态框还可以帮助开发者提高应用程序的统一性和品牌形象，增强用户的忠诚度和满意度。全局自定义的模态框是一种通用的UI组件，它可以在应用程序的任何位置被触发并弹出来。开发者可以根据自己的需求，设计出符合应用程序整体风格的模态框，包括颜色、字体、布局等。考虑到uni-app内置的模态框和app原生提示框的自定义能力有限，我决定自行封装全局自定义的模态框，以此为应用程序提供更加统一且个性化的界面。主要是dom树&css样式。
2023-08-09 11:09:43
1202
原创 【JavaScript】watch监听多次调用请求怎么办？
仍然在更改一个属性时连续触发多次，可能是因为在代码中的某些地方已经多次修改了该属性。这种情况下可以尝试将该属性设置为一个计算属性，然后对这个计算属性进行。的变化并执行相应的操作。由于计算属性只有在它依赖的值发生变化时才会被重新计算，所以通过这种方式可以避免多次触发。请注意，在使用计算属性时需要选择合适的数据类型和返回值，以确保计算属性能够正常工作。在上面的代码中，我们使用了一个新的计算属性。
2023-06-28 15:51:17
927
原创 【http服务】Windows 使用命令来查看和停止端口
1. “Get-NetTCPConnection localport 8000”:这个命令使用的Get-NetTCPConnection cmdlet检索信息所有TCP连接在本地机器上使用端口8000。3. “Stop-Process ID”:这个命令使用的Stop-Process cmdlet停止指定进程ID的过程。2. ”OwningProcess”:前一个命令的输出包括属性称为“OwningProcess”,代表进程的进程ID (PID)使用端口8000。命令来停止指定进程ID的进程。
2023-06-28 15:12:45
1756
原创 【中文编程】青语言
中文编程是一种将中文语言与计算机编程结合的编程方式。相较于传统的英文编程，中文编程有着更加贴近自然语言和易于理解的特点，因此受到了越来越多人的关注。而青语言就是中文编程的其中一种实现方式。它采用中文作为程序语言，不需要使用英文或其他外语符号。这种语言的出现，使得普通人也能够轻松地学习编程，并进行相关开发工作。下面我们来了解一下青语言的具体特点。
2023-06-09 11:08:57
726
原创 【报错解决】import piniaPersist from ‘pinia-plugin-persist‘
希望这些方法能够帮助你解决这个问题。
2023-06-09 09:42:56
5530
7
原创 【uni-app】封装一个uni轮询请求
的action，用于停止当前的轮询并启动一个新的轮询。在这个action中，你可以先调用。action 停止当前的轮询，然后通过创建一个新的。action 停止当前的轮询任务，然后创建一个新的。接下来，在组件内部，你可以像下面这样来调用。方法停止当前的轮询任务，并清除状态中的。在上面代码中，我们首先定义了一个名为。action 来执行轮询的重启。的状态属性，用于保存当前轮询任务的。来启动一个新的轮询任务。action中，我们会先调用。action中，我们会使用。来启动一个新的轮询任务。ID 存储到状态中。
2023-05-30 13:21:30
1400
原创 【JavaScript】try、catch、finally 使用
在 JavaScript 中，`try`、`catch` 和 `finally` 是处理异常和错误的代码块。`try` 包含可能出现错误的代码块，如果在执行该代码块时发生错误，则 JavaScript 引擎会抛出一个异常。`catch` 用于捕获异常并执行相应的处理，而 `finally` 在 `try` 或者 `catch` 执行完之后，都会执行其中的代码块。`try` 和 `catch` 是成对出现的，可以省略 `finally`。`try` 块中的代码如果发生错误，就立即转到处理程序 `catch`
2023-05-29 09:14:43
1507
原创 【uni-app】实现上拉加载
假设你正在开发一款社交软件，用户可以浏览其他用户发布的动态信息。当用户下滑页面查看信息时，如果所有信息都被加载出来了，那么用户无法继续获取新的动态信息。因此，我们需要在这种情况下使用“上拉加载更多”的功能。具体而言，当用户下拉到页面底部时，会自动触发上拉加载更多的操作，在请求新的数据后更新页面内容。，以显示上拉加载更多组件。然后调用你的接口获取下一页数据，更新数据列表。中实现上拉加载更多的功能，可以使用 uni-loadmore 组件。在上面的示例代码中，假设你的后端接口需要传递一个名为。
2023-05-25 16:52:43
2938
原创 【uni-app】简单的（uni.request）请求封装
两个接口，来分别发起 GET 和 POST 请求。这样在使用时，只需要传入相应的参数即可。发起网络请求，并返回一个 Promise 对象。在成功和失败时分别调用了。表示请求地址的根路径。以上代码中，我们首先定义了一个常量。
2023-05-17 18:07:35
265
原创 【vue】vuex数据丢失怎么办？盘一盘vue传值的方法
全局监听，页面刷新的时候将 store 里 state 的值存到 sessionStorage 中，然后从sessionStorage 中获取，再赋值给 store ，并移除 sessionStorage 中的数据。vuex的 store 中的数据是保存在运行内存中的，当页面刷新时，页面会重新加载 vue 实例，vuex 里面的数据就会被重新赋值，这样就会出现页面刷新vuex中的数据丢失的问题。getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值。
2023-02-27 13:39:33
555
原创 【JavaScript】1000个判断条件难道要写了1000个 if ? 来看看分支优化
分支优化在各种语言中都有不同的实现方式和应用场景，本篇通过JavaScript介绍了两种代码分支优化的思想，代码的实现非常简单，重点在于这种思想的应用。观点1：压根不需要多此一举去优化它，并且优化后的代码因为多创建了一个对象/数组，对对象/数组进行检索反而比单纯的if else还是废性能。观点2：分支优化后的代码可读性/可维护性更好，并且引入对象/数组所带来的性能问题在当今时代根本不值一提。作者：海底烧烤店。
2023-02-17 14:51:27
100
原创 【面试-优化渲染性能】如何渲染几万条数据并不卡住界面
面试，性能优化，有着非常明显的差异，这是因为，设置了 content-visibility: auto 的元素，在非可视区域内，目前并没有被渲染，因此，右侧内容的高度其实是比正常状态下少了一大截的。当然，现代浏览器愈加趋于智能，基于这种场景，其实我们非常希望对于仍未看到，仍旧未滚动到的区域，可以延迟加载，只有到我们需要展示、滚动到该处时，页面内容才进行渲染。由于，我们没有对页面内容进行任何处理，因此，所有的 .paragraph 在页面刷新的一瞬间，都会进行渲染，看到的效果就如上所示。
2023-02-07 11:16:14
714
原创 前端经典面试500题【下】
前端面试题，前端培训,课程升级亮点:完善课程体系基础代码严训;混合app开发技术;精通前端懂后端等等真正为粉丝考虑打好进阶基础拓展技术面，学习即工作经验，就业直通一线名企!
2023-01-31 13:58:41
4963
原创 前端经典面试500题【中】
前端面试题，前端培训,课程升级亮点:完善课程体系;基础代码严训;混合app开发技术;精通前端懂后端等等.真正为粉丝考虑,打好进阶基础,拓展技术面,学习即工作经验,就业直通一线名企!
2023-01-31 13:53:23
1304
原创 前端经典面试500题【上】
前端经典面试500题是一篇非常流行的前端面试笔记和指南，可以帮助准备面试的开发人员更好地了解和准备常见面试问题。该书包含了以下主题：1. HTML，CSS和JavaScript基础知识；2. DOM，BOM及常用API；3. Ajax原理以及相关技术；4. 前端自动化构建工具，如Gulp、Grunt和Webpack等；5. 前端框架，如AngularJS、React和Vue.js等；6. 浏览器兼容性问题；7. 性能优化；8. 安全问题；9. 移动端开发问题。
2023-01-31 13:52:02
6890
3
原创 令人窒息的百度面试题（正值换工作季，还不收藏？？？）
最近去网上找了一些百度的面经，冥冥之中在众多的面试题中打开了下边两个面试题：2021百度前端社招面经百度前端面试题分享，带答案看完之后我直呼“哇哦~”，全部在我的射程范围之内。我该不会如此幸运到问的全会吧。是的，答案就是不会，我就是没有幸运到全会。话不多说，接下来就回顾下面试题。关于这个问题我写过使用driver.js库和Vue Tour实现的新手指引。使用js实现如下：实现思路是：返回值是一个 [3] 对象，是包含整个元素的最小矩形（包括 padding 和 border-width）。该对象使用 le
2023-01-31 13:43:44
3124
echarts大屏+地图模块json数据+中华人民共和国svg
2022-09-01
uni项目easycom引入npm下的vanweapp失败？
2022-05-13
TA创建的收藏夹 TA关注的收藏夹
TA关注的人