- 博客(28)
- 收藏
- 关注
RSS订阅原创 Vue数据双向绑定机制及响应式原理深度解析（Vue2 vs Vue3）
本文深度解析Vue.js数据双向绑定与响应式原理，对比Vue2与Vue3的核心实现差异：从Vue2基于Object.defineProperty的递归劫持方案，到Vue3采用Proxy代理的惰性响应式机制，揭秘两代框架在数组处理、依赖收集、性能优化等方面的技术演进。通过10+关键代码示例剖析响应式系统底层逻辑，结合双版本流程图解，直观展现从数据劫持到DOM更新的完整链路。最后提供5大实战优化策略，包含万级数据冻结方案、shallowReactive深度控制、nextTick批量更新等高频场景解决方案，助开发
2025-04-20 08:00:00
1504
24
原创 Webpack热更新原理详解
在前端开发中，Webpack的热更新（Hot Module Replacement，简称HMR）是一种非常实用的功能，它允许在不刷新整个页面的情况下更新模块。这种技术可以显著提升开发效率，特别是在调试和快速迭代过程中。本文将深入探讨Webpack热更新的原理，并通过代码示例展示如何实现热更新。
2025-04-18 08:30:00
273
7
原创 JavaScript性能优化实战：让你的Web应用飞起来
一个性能良好的应用不仅能吸引用户，还能提高转化率和用户留存率。今天，我们就来深入探讨JavaScript性能优化的实战技巧，通过具体的代码示例，帮助你在实际项目中应用这些优化方法。
2025-04-17 08:30:00
1547
9
原创 学会这些ES6优化技巧，别再被leader吐槽得满头大汗啦！
最近在一次代码评审会上，一位Leader就忍不住吐槽了："你会用ES6，那倒是用啊！"可不是嘛，ES5的写法虽说也不是不行，但有时候代码写得又长又复杂，看着就让人头大。ES6已经来了好多年啦，可还是有不少小伙伴在写代码的时候，习惯性地用起了老掉牙的ES5写法。今天，我就来给大家分享一些值得用ES6机制优化的技巧，让你的代码瞬间“瘦身”又“提速”！
2025-04-16 08:30:00
975
原创 前端模块化：从混沌到秩序的奇妙进化之旅
在前端开发这片不断拓展的疆域中，项目规模如吹气球般膨胀，代码复杂度也跟着 “野蛮生长”。模块化开发就像一位神奇的建筑师，把杂乱无章的代码世界，精心拆分成一个个功能明确、能独立维护的小天地，让代码结构清晰明了，复用性和维护性大幅提升。下面，就请系好安全带，我们一同开启前端模块化的奇妙进化之旅。
2025-03-03 08:30:00
729
原创 JavaScript垃圾回收机制：从内存管理到性能哲学
需要额外补充一点的就是，由于js是单线程的，垃圾清除和执行js只能在同一线程运行，所以垃圾回收可能会影响运行性能，所以V8采用了增量标记，将标记拆分成多个子进程，和运行js任务交替进行，避免脚本长时间等待。正如计算机科学家Edsger Dijkstra所言："内存管理不是程序的附属品，而是编程本质的体现。"在自动回收与手动控制之间，我们始终在探索更优雅的解决方案。同时V8有一种对象晋升机制，简而言之，就是如果新生代的对象几次清除后都存在于内存中，就会晋升为老生代对象。：通过指针计数器管理对象生命周期。
2025-02-28 08:30:00
846
原创 “内存黑洞”大揭秘：你的 JavaScript 代码正在悄悄吃掉内存！
你是否曾经遇到过网页越用越卡，甚至直接崩溃的情况？你是否好奇，为什么你的 JavaScript 代码明明看起来没问题，却让浏览器内存爆表？这一切的背后，可能隐藏着一个“内存黑洞”——垃圾回收机制失效和内存泄漏！
2025-02-18 09:00:00
320
原创 闭包：JavaScript 中的“记忆魔法”，让你的函数记住一切！
闭包是 JavaScript 中最强大且最容易被误解的特性之一。它不仅是面试中的高频考点，更是实际开发中的利器。本文将带你揭开闭包的神秘面纱，通过生动的代码示例，让你彻底掌握这一“记忆魔法”！
2025-02-18 08:30:00
335
原创 性能优化秘籍：掌握防抖与节流，让你的前端应用飞起来！
在前端开发过程中，我们常常会遇到一些性能问题，比如频繁触发的事件导致页面卡顿、服务器请求过多等。为了解决这些问题，防抖（Debounce）和节流（Throttle）技术应运而生，它们能够有效地优化性能，提升用户体验。本文将深入探讨防抖与节流的原理、使用场景及demo实现案例。
2025-01-10 09:48:08
678
原创 Vite异军突起 - 为什么Vite的构建速度比WebPack快那么多？
在现代前端开发的舞台上，构建工具宛如幕后的 “导演”，掌控着项目从开发到上线的节奏，其中 Vite 和 Webpack 备受瞩目。Vite 异军突起，以令人惊叹的构建速度成为众多开发者的新宠，而这速度差异背后潜藏着诸多深层次缘由，值得我们抽丝剥茧般探究。
2024-12-26 19:30:39
945
原创 css-loader 与 style-loader：Webpack 中样式加载的双雄
在现代前端开发中，Webpack 已成为构建项目的核心工具之一，而处理 CSS 样式时，css-loader 和 style-loader 是两个极为关键的模块。理解它们各自的功能以及为何常常搭配使用，对于深入掌握前端构建流程至关重要。
2024-12-26 19:26:44
1038
原创 如何实现双Token无感刷新
为了解决这个问题，采取双Token（Access_Token,Refresh_Token）无感刷新，用户完全体会不到Token的变化，但实际上，Token已经刷新了。3.Access_Token过期后，前端携带Refresh_Token调用A接口得到新的Access_Token,把新的Access_Token替换旧的Access_Token存储起来。Refresh_Token：用于刷新Access_Token，即调用A接口需要携带Refresh_Token, 用它换得最新的Access_Token。
2023-04-27 14:54:18
1504
原创 如何用css画三角形？ ——border的妙用
一般来说，画一个任意的三角形需要指定三个方向的border(特殊的三角形，例如上面画的直角三角形只需要两个方向的border）
2023-01-13 21:36:29
279
原创 vue 用代码控制el-dropdown的展开和收起
因为el-dropdown默认触发方式是hover鼠标悬停，所以我第一个想到的方法是控制el-dropdown元素是否获得焦点的方式控制展开或者收起。比如想要el-dropdown展开，先通过ref找到元素，在调用focus（）方法主动获得焦点，就会展开。但是经过一通尝试，发现最后还是失败了。这样就可以顺利搞定啦。
2023-01-02 11:33:26
1945
原创 PAT（乙级）1052 卖个萌 (20 分)C++
萌萌哒表情符号通常由“手”、“眼”、“口”三个主要部分组成。简单起见，我们假设一个表情符号是按下列格式输出的：[左手]([左眼][口][右眼])[右手]现给出可选用的符号集合，请你按用户的要求输出表情。输入格式：输入首先在前三行顺序对应给出手、眼、口的可选符号集。每个符号括在一对方括号[]内。题目保证每个集合都至少有一个符号，并不超过 10 个符号；每个符号包含 1 到 4 个非空字符。萌萌哒表情符号通常由“手”、“眼”、“口”三个主要部分组成。简单起见，我们假设一个表情符号是按下列.
2021-09-20 12:10:32
118
原创 PAT（乙级）1078 字符串压缩与解压 (20 分)
文本压缩有很多种方法，这里我们只考虑最简单的一种：把由相同字符组成的一个连续的片段用这个字符和片段中含有这个字符的个数来表示。例如ccccc就用5c来表示。如果字符没有重复，就原样输出。例如aba压缩后仍然是aba。解压方法就是反过来，把形如5c这样的表示恢复为ccccc。本题需要你根据压缩或解压的要求，对给定字符串进行处理。这里我们简单地假设原始字符串是完全由英文字母和空格组成的非空字符串。输入格式：输入第一行给出一个字符，如果是C就表示下面的字符串需要被压缩；如果...
2021-08-31 23:10:48
162
1
原创 PAT(乙级)1043 输出PATest (20 分)
给定一个长度不超过104的、仅由英文字母构成的字符串。请将字符重新调整顺序，按PATestPATest....这样的顺序输出，并忽略其它字符。当然，六种字符的个数不一定是一样多的，若某种字符已经输出完，则余下的字符仍按 PATest 的顺序打印，直到所有字符都被输出。输入格式：输入在一行中给出一个长度不超过104的、仅由英文字母构成的非空字符串。输出格式：在一行中按题目要求输出排序后的字符串。题目保证输出非空。输入样例：redlesPayBestPATTopTeePHP...
2021-08-27 10:22:40
129
原创 PAT（乙级）1039 到底买不买 (20 分)
小红想买些珠子做一串自己喜欢的珠串。卖珠子的摊主有很多串五颜六色的珠串，但是不肯把任何一串拆散了卖。于是小红要你帮忙判断一下，某串珠子里是否包含了全部自己想要的珠子？如果是，那么告诉她有多少多余的珠子；如果不是，那么告诉她缺了多少珠子。为方便起见，我们用[0-9]、[a-z]、[A-Z]范围内的字符来表示颜色。例如在图1中，第3串是小红想做的珠串；那么第1串可以买，因为包含了全部她想要的珠子，还多了8颗不需要的珠子；第2串不能买，因为没有黑色珠子，并且少了一颗红色的珠子。图 1输入格式：
2021-08-26 22:04:28
83
原创 PAT (乙级) Practice 1029 旧键盘 (20 分)
旧键盘上坏了几个键，于是在敲一段文字的时候，对应的字符就不会出现。现在给出应该输入的一段文字、以及实际被输入的文字，请你列出肯定坏掉的那些键。输入格式：输入在 2 行中分别给出应该输入的文字、以及实际被输入的文字。每段文字是不超过 80 个字符的串，由字母 A-Z（包括大、小写）、数字 0-9、以及下划线_（代表空格）组成。题目保证 2 个字符串均非空。输出格式：按照发现顺序，在一行中输出坏掉的键。其中英文字母只输出大写，每个坏键只输出一次。题目保证至少有 1 个坏键。输入样例：.
2021-08-26 16:08:10
128
原创 PAT (乙级)1018 锤子剪刀布 (20 分)C++，C
大家应该都会玩“锤子剪刀布”的游戏：两人同时给出手势，胜负规则如图所示：现给出两人的交锋记录，请统计双方的胜、平、负次数，并且给出双方分别出什么手势的胜算最大。输入格式：输入第 1 行给出正整数N（≤105），即双方交锋的次数。随后N行，每行给出一次交锋的信息，即甲、乙双方同时给出的的手势。C代表“锤子”、J代表“剪刀”、B代表“布”，第 1 个字母代表甲方，第 2 个代表乙方，中间有 1 个空格。输出格式：输出第 1、2 行分别给出甲、乙的胜、平、负次数，数字间以 1 ...
2021-08-25 10:42:24
112
原创 PAT (乙级) 1015 德才论 (25 分)C++
宋代史学家司马光在《资治通鉴》中有一段著名的“德才论”：“是故才德全尽谓之圣人，才德兼亡谓之愚人，德胜才谓之君子，才胜德谓之小人。凡取人之术，苟不得圣人，君子而与之，与其得小人，不若得愚人。”现给出一批考生的德才分数，请根据司马光的理论给出录取排名。输入格式：输入第一行给出 3 个正整数，分别为：N（≤105），即考生总数；L（≥60），为录取最低分数线，即德分和才分均不低于L的考生才有资格被考虑录取；H（<100），为优先录取线——德分和才分均不低于此线的被定义为“才德全尽”，此类考..
2021-08-24 20:34:12
140
原创 PAT (乙级)1014 福尔摩斯的约会 (20 分)C语言
大侦探福尔摩斯接到一张奇怪的字条：我们约会吧！ 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm。大侦探很快就明白了，字条上奇怪的乱码实际上就是约会的时间星期四 14:04，因为前面两字符串中第 1 对相同的大写英文字母（大小写有区分）是第 4 个字母D，代表星期四；第 2 对相同的字符是E，那是第 5 个英文字母，代表一天里的第 14 个钟头（于是一天的 0 点到 23 点由数字 0 到 9、以及大写字母A到N表示）；...
2021-08-24 12:48:22
165
原创 PAT (乙级) 1010 一元多项式求导 (25 分)C语言
设计函数求一元多项式的导数。（注：xn（n为整数）的一阶导数为nxn−1。）输入格式:以指数递降方式输入多项式非零项系数和指数（绝对值均为不超过 1000 的整数）。数字间以空格分隔。输出格式:以与输入相同的格式输出导数多项式非零项的系数和指数。数字间以空格分隔，但结尾不能有多余空格。注意“零多项式”的指数和系数都是 0，但是表示为0 0。输入样例:3 4 -5 2 6 1 -2 0结尾无空行输出样例:12 3 -10 1 6 0代码：#include&l.
2021-08-24 00:26:00
145
原创 PAT (Basic Level)1088 三人行 (20 分)C语言
子曰：“三人行，必有我师焉。择其善者而从之，其不善者而改之。”本题给定甲、乙、丙三个人的能力值关系为：甲的能力值确定是 2 位正整数；把甲的能力值的 2 个数字调换位置就是乙的能力值；甲乙两人能力差是丙的能力值的 X 倍；乙的能力值是丙的 Y 倍。请你指出谁比你强应“从之”，谁比你弱应“改之”。输入格式：输入在一行中给出三个数，依次为：M（你自己的能力值）、X 和 Y。三个数字均为不超过 1000 的正整数。输出格式：在一行中首先输出甲的能力值，随后依次输出甲、乙、丙三人与你的关系：如果
2021-08-20 10:18:19
142
原创 PAT (Basic Level) 1093 字符串A+B (20 分)（C语言）
给定两个字符串A和B，本题要求你输出A+B，即两个字符串的并集。要求先输出A，再输出B，但重复的字符必须被剔除。输入格式：输入在两行中分别给出A和B，均为长度不超过106的、由可见 ASCII 字符 (即码值为32~126)和空格组成的、由回车标识结束的非空字符串。输出格式：在一行中输出题面要求的A和B的和。输入样例：This is a sample testto show you_How it works结尾无空行输出样例：This a...
2021-08-19 22:18:57
304
原创 关于【PAT】1009 说反话 (20 分)的疑问
给定一句英语，要求你编写程序，将句中所有单词的顺序颠倒输出。输入格式：测试输入包含一个测试用例，在一行内给出总长度不超过 80 的字符串。字符串由若干单词和若干空格组成，其中单词是由英文字母（大小写有区分）组成的字符串，单词之间用 1 个空格分开，输入保证句子末尾没有多余的空格。输出格式：每个测试用例的输出占一行，输出倒序后的句子。输入样例：Hello World Here I Come输出样例：Come I Here World Hello这是我的代码：#.
2021-08-19 15:46:25
102
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人