- 博客(439)
- 收藏
- 关注
RSS订阅
原创 （个人简介）Coding Home - 漂流瓶jz
华东师范大学 计算机专业硕士。Web前端开发工程师。部分文章的相关代码会放在GitHub上。
2017-03-14 10:56:18
874
1
原创 (非技术)从一公里到半程马拉松：我的一年跑步经历
上面就是我这一年以来的跑步经历啦。从经历中可以看到，其实跑马拉松并不是一个很难的事情，只要按部就班的锻炼身体，成功实现二次呼吸，一点一点的提高距离，就能做到了，不需要太努力就能实现。
2025-01-29 23:14:18
665
原创 谈一谈前端构建工具的本地代理配置（Webpack与Vite）
使用代理之后，在浏览器中，前端访问还是原来的非跨域的接口，但实际请求后端的url可能早就被改的面目全非了。
2025-01-20 23:59:14
1451
原创 如何使用React，透传各类组件能力/属性？
函数式组件与类式组件在Props和事件透传的方式基本一致，但是ref透传的区别较大。直接对比的话，好像类式组件的透传能力更强一些，但是它把组件内部所有内容全暴露在外，违反了封装的原则，子组件内部的改动很容易影响父组件，不是一个好的设计。在React19版本中，ref属性也变成了prop，仅通过透传Props，就能实现透传组件大部分能力了。
2024-12-26 23:16:50
1084
2
原创 JavaScript中的this, 究竟指向什么？
文章深入探讨了 JavaScript 中 this 的指向问题，涵盖了多种场景，如全局上下文、模块上下文、普通函数上下文、构造函数上下文、对象或实例属性的函数上下文、类的相关上下文、继承场景、call/apply/bind 方法、原始值原型函数属性上下文、回调函数上下文、箭头函数、eval 函数、事件处理器等，并对严格模式下 this 的处理做了总结，还讨论了特殊或组合场景。
2024-12-11 22:23:59
732
原创 UVA-12113 重叠的正方形 题解答案代码 算法竞赛入门经典第二版
注意，第一个减去的正方形必定是个完整的正方形。还有正方形重叠后，有一部分边是会被盖住的，因此我们当前减去的正方形，就是按之前顺序盖住的正方形，因此这个正方形上方应该是没有东西的，即正方形内部应该是空的。在一个4*4格子里面叠正方形，看看用6个能不能叠出这个图形。虽然输入的形式有点奇怪，但是不难处理，直接使用即可。以当前图形作为状态，一个方形一个方形的减去，看6个以内能不能减到空。
2024-10-21 00:14:29
187
原创 UVA-690 流水线调度 题解答案代码 算法竞赛入门经典第二版
题目总体来说不难，走到每一个程序时，循环尝试间隔任意步骤出发，看看最短时间为多少。第一个程序和第二个程序执行的间隔，可以认为是每个程序执行的最小间隔。通过这个间隔进行判断来剪枝。
2024-09-28 22:45:52
279
原创 UVA-818 切断圆环链 题解答案代码 算法竞赛入门经典第二版
首先断开的圆环，是可以链接其他已有的每个连通子图的。方法是对每个环断开再对其它圆环每个尝试连接，试图遍历所有场景找出可以形成一条链的组合。但是这种方法产生了不少重复遍历场景（断开的先后顺序不重要），且实际上不需要尝试链接，就能判断是否组成一条链，因此这里时间复杂度太高，大幅超时了。3.1. 首先看每个节点的度，如果度超过2，说明有一个点连接了超过两个点，那肯定需要再断开其他圆环才能形成链，说明这个断开组合不符合要求。2. breakMap函数，将断开的圆环和其它的圆环的链接删掉，组成一个新的图。
2024-09-21 23:33:19
500
原创 UVA-211 多米诺效应 题解答案代码 算法竞赛入门经典第二版
又是一道不难的题目。但是输出格式（空行）比较特别，我对照着uDebug改了才AC。我是用从上到下，从左到右，对每个点尝试每种可能的牌。
2024-09-17 19:39:38
256
原创 UVA-225 黄金图形 题解答案代码 算法竞赛入门经典第二版
已经访问过的块不能再次被访问，注意这里限制的是每次移动的起点和终点，中间路过已访问过的块是可以的。然后输入中哪些的阻碍的块是不能穿过的，即使移动起点和终点不在阻碍块上，只是中间路过也不行。一道不难的题目，即使不用什么剪枝方法，也不会超时，可以AC的。首先要根据字典序输出，即'e', 'n', 's', 'w'所以实际上是有两种逻辑不同的限制块类型。
2024-09-17 00:14:49
329
原创 使用天地图与Leaflet，轻松创建免费地图应用
天地图又叫做地理信息公共服务平台，是提供给公众免费使用的地理信息平台，提供了多种形式的地图开发资源，使用天地图，可以构建免费的地图应用。Leaflet是一个开源的Javascript地图库，我们使用它来进行地图的展示和交互。
2024-09-14 23:33:15
2730
原创 UVA-208 消防车 题解答案代码 算法竞赛入门经典第二版
这里有同学会问，遍历连通图也用的是DFS呀，为啥不会超时？因为我们要记录路径，所以DFS函数退出时要设置重新设置点为未访问过。但是连通图并不需要。所以连通图要快很多。另外题目的输出样例不对。看起来是%4d或者\t，但实际上就是普通的单个空格，甚至最前面不用空。直接用DFS遍历会超时。要先遍历一遍连通图，看看1和终点是否联通。一道不难的DFS题目。
2024-09-07 21:06:05
305
原创 UVA-1603 破坏正方形 题解答案代码 算法竞赛入门经典第二版
我又尝试了第一种的搜索对象是正方形的方法，一开始没有用迭代加深搜索，发现时间超级长。后来使用迭代加深搜索之后，直接AC了。AC代码可以优化的空间还很大，目前剪枝的方法都没用到。
2024-08-17 23:36:42
262
原创 CSS优先级，没你想的那么简单！全面介绍影响CSS优先级的各类因素
CSS优先级的判断，牵涉了太多CSS中的不同主题。可以说优先级的概念，贯穿了整个CSS领域。下面我们就来分别聊一下，这些主题是如何影响到CSS优先级的。
2024-08-11 23:43:12
924
原创 Vue中的事件总线(EventBus)是什么？它有什么优点和缺点？
事件总线是一种组件通信方式，用于在工程的中的任意组件中进行事件触发和数据传递。通过在全局创建一个事件总线，所有组件（无论他们的关系是父子还是兄弟还是不相关）都可以使用同一个总线发送事件和监听事件，传输数据。这样通信就可以不受组件间关系限制，实现灵活的通信能力。事件总线作为一种全局的组件通信方法，符合订阅发布模式，由于其简单有效的使用方式，受到部分开发者的欢迎。但是由于各种使用不慎和维护带来的问题，官方和许多开发者也不推荐使用：在绝大多数情况下，不鼓励使用全局的事件总线在组件之间进行通信。
2024-03-01 22:11:58
2393
1
原创 带你搞懂JavaScript中的原型和原型链
原型和原型链是JavaScript中与对象有关的重要概念，但是部分前端开发者却不太理解，也不清楚原型链有什么用处。
2023-12-10 19:40:06
959
原创 简单理解Vue2的响应式原理
使用Vue作为前端开发技术栈的同学，在使用Vue时都会有一些好奇：为啥我们的响应式变量要在data中定义？Vue是如何监听到变化，实现响应式的？这次我们就来探究一下，Vue2的响应式原理。
2023-11-12 15:52:42
556
原创 圣杯布局/双飞翼布局/flex/grid等，实现CSS三栏自适应布局的几种方法
我们介绍几种实现自适应三栏布局的几种方法，包括使用flex，grid等方法实现，以及经典的圣杯布局/双飞翼布局等。这些布局的实现源码我放到了Github上面进行了开源
2023-11-05 23:45:24
529
原创 超详细！手把手带你实现一个完整的Promise
本文首先介绍了JavaScript中异步编程的几种方式，再对Promise进行了简单介绍。然后从创建类开始，一步一步实现一个完整的Promise。我们实现的Promise不仅可以通过Promises/A+规范测试，并且提供了与ECMAScript同样的实用函数。
2023-10-04 15:25:30
1234
原创 UVA-1374 旋转游戏 题解答案代码 算法竞赛入门经典第二版
但是如果想不打表完成题目，那么就需要使用思路中给出的各种优化方案，不然很容易超时。我一开始用set作为存储已存在的数字，但还是超时，后面改成用数组存储AC了。即使超时，因为数据量不大（1000个）， 我们也可以直接打表直接返回结果。由于书上给了思路，所以做起来并不难。
2023-09-29 15:14:10
342
原创 UVA-1343 旋转游戏 题解答案代码 算法竞赛入门经典第二版
2. 使用一个long long类型的数字作为map的key，key表示这种数字在图形中分别的位置，value表示在第几步访问过。5. 乐观估价函数：在中心每个点的值不对的情况下，每个点都至少需要一次移动才能正确。上述的方法是结合使用的，一开始没想到估价函数，一直在剪枝策略中纠结，然后一直超时。（但是我想的剪枝方法不合理，使用了之后是错误的，在最后有给出）1. 对3种数字，每种数字递归遍历一次，这样每次只需要关注一种数字的变化，情况更少。虽然移动的可能性是无限的，但是最多的移动次数也就是十几次。
2023-09-17 02:22:24
364
原创 UVA-12325 宝箱 题解答案代码 算法竞赛入门经典第二版
根据书上的方法来做，是比较简单的题目。关键在于知道等体积时的枚举法。不过数据大小可能很大，虽然输入可以用int处理，但是 体积*价值 后，需要long long才存的下。
2023-09-09 21:20:48
264
原创 UVA-11212 编辑书稿 题解答案代码 算法竞赛入门经典第二版
那么广度优先搜索也可以剪枝，也可以有启发函数，而且是一样的启发函数。如果使用迭代加深搜索，搜到第n+1次时，会对前n次的计算结果进行重复搜索，效率不高。由于需要练习“迭代加深搜索”，因此我还是用这个方法做的，感兴趣的同学可以试一下广度优先搜索是否合适。我尝试使用了flag记录使用访问过的标志，但是发现这样效率更低。如果剪枝合适，不记录也是可以的。这道题目在书上的“迭代加深搜索”章节出现，即是采用迭代加深搜索的方法来做。数据粘贴的还原的方法我做的比较繁琐，但是比较容易理解，这个还可以优化。
2023-09-03 20:26:35
241
原创 谈一谈浏览器与Node.js中的JavaScript事件循环，宏任务与微任务机制
JavaScript是一个单线程非阻塞的脚本语言。这代表代码是执行在一个主线程上面的。但是JavaScript中有很多耗时的异步操作，例如AJAX，setTimeout等等；也有很多事件，例如用户触发的点击事件，鼠标事件等等。这些异步操作并不会阻塞我们代码的执行。可以看到，上述代码在浏览器中执行时，遇到setTimeout操作，并没有阻塞等待异步操作的结束再继续执行代码，而是先继续执行后面的代码。等异步操作结束后，浏览器再回来执行异步回调中的代码。
2023-08-21 15:29:08
1405
原创 UVA-1601 万圣节后的早晨 题解答案代码 算法竞赛入门经典第二版
由于最高只有3，因此我的全排列写的不怎么优雅，直接嵌套循环完成了。注意每个点可以动，也可以不动，因此我们要考虑只有一个点动，两个点动的情况。如果第一个点动了大现已经遍历过，这时候不能放入队列（因为在其他点不动的情况下，这个状态已经遍历过了）。在同一次中，B可以移动到A离开前的位置上，即如果A走了，B可以去A之前的位置。对每个状态遍历时，情况实际上有 3的全排列（值为6），以及每个点移动的可能四种位置： 3!当然因为墙的存在，因此并没有这么多。按照上面的方法做的话，耗时很久，我扣了点细节，最后终于压线AC。
2023-08-13 05:51:40
327
原创 UVA-1354 天平难题 题解答案代码 算法竞赛入门经典第二版
2. 计算宽度时，左侧的宽度除了【左子树的宽度+绳子左侧的长度】之外，右子树的左子树也可能很宽，超过【左子树的宽度+绳子左侧的长度】。因此，要对【右子树的左子树-绳子右侧的长度】和【左子树的宽度+绳子左侧的长度】进行比较，看看谁更长。我这里每次把当前所有结点列出，然后遍历选取两个组合构成一个新结点，原来的结点剔除，新结点加入。最后只剩一个结点时，就得到二叉树的一种情况。由于数据量较少，所以我这里没有剪枝。注意选取两个结点后也对应着两种，A放在左边B放在右边 和 B放在左边A放在右边。
2023-07-30 05:16:01
387
原创 UVA-140 带宽 题解答案代码 算法竞赛入门经典第二版
注意虽然是8最多8个结点，但是 字母不一定是从A-G，有可能出现任意的字母比如Z。因此，按照字典序中间的部分字母是空出来的，没有这个结点。我们在遍历的时候，要记得去除这些结点。在新确定一个结点时，计算该节点与已经确定的节点的距离，如果大于之前已经算出的最小的组合的带宽，那这个组合的带宽一定更大，就不用往下继续计算了。其实输入给出的数据量并不大，最多8个结点，不剪枝的话也就是8!个组合，应该时间也够。把输入的这些结点进行一个全排列，然后找出带宽最少的组合。我的方法并不是最优解（还差的很远）
2023-07-29 23:59:08
406
原创 UVA-129 困难的串 题解答案代码 算法竞赛入门经典第二版
所以，对于当前我们要判断的长度为n的串，它的第1到n-1的串中肯定是没有包含连续子串的，此时加了第n个字符，那么我们就只需要判断包含最后这个字符的子串有没有发生重复的情况即可。如果是包含连续子串的序列，那么这个序列后面无论再加多少个字符，都是包含连续子串的，因此不需要再递归了。首先我们按照字典序生成序列，然后判断序列是否包含连续子串。判断第n个不包含连续子串的序列。
2023-07-29 17:40:56
422
原创 UVA-524 素数环 题解答案代码 算法竞赛入门经典第二版
由于判断最大不超过31，因此素数的判断直接手写枚举放到代码里即可。使用书上讲的递归枚举的时候回溯即可。
2023-07-23 01:34:10
387
原创 浏览器中Cookie的全面介绍
在Web前端开发时，我们经常会遇到一些浏览器存储相关的工具，例如Cookie。Cookie的英文本意是曲奇，但是在Web中，它被用作浏览器中存储的数据。Cookie都是name=value的结构，name和value都为字符串。
2023-07-16 19:04:29
2193
1
原创 UVA-12118 检查员的难题 题解答案代码 算法竞赛入门经典第二版
那么我们可以把他们组成多个连通图，每个连通图用上面的方法组成欧拉回路。最后再把这些联通图连接起来，就成了一整个欧拉道路。这时候的值为：每个连通图的原有道路数+每个联通图中我们增加的道路数+连通图的数量-1。也就是 原有的总道路数+每个联通图中我们增加的道路数+连通图的数量-1。2. 如果这些道路是联通的，但是不能组成欧拉道路。这时候就又组成了欧拉道路，这时候值为原有道路的数量+我们连接的数量。1. 如果这些道路是联通的，而且组成欧拉道路，那么这些道路可以一笔画，即道路的条数就是我们经过道路的次数。
2023-07-15 22:52:30
347
原创 UVA-215 电子表格计算器 题解答案代码 算法竞赛入门经典第二版
题目并不难，数据量也不大，一次数据最多是20*10是200个。因此即使最长的嵌套引用关系，也只有200层，我们使用暴力，循环200层，每次算出当前所有引用节点有值的结点，200次以后必然能得出结果。如果无结果的数据，就是产生循环的无解数据了。
2023-07-15 17:25:13
467
原创 UVA-810 筛子难题 题解答案代码 算法竞赛入门经典第二版
我的理解是，即使进入的时候方向不一致，只要进入后骰子面的位置一致了，那么它随后进入其他结点的判断条件是一致的，即应该不能重复进入，给与限制。这里注意，由于位置可以重复进入，因此只记录方向是不够的，还必须记录顺序，即第一次经过，第二次经过要进行顺序的区分。2. 根据骰子的两个相邻的面（例如题目给出的正面和顶面），可以确定整个骰子在桌面的每个面的位置。在确定了正面的情况下，一个骰子的顶面可能是正面的四个邻边的每一个。在骰子面关系中的顶面就是实际的顶面时，如果向右移动，此时顶面就是原来的左面。
2023-07-09 06:07:06
390
原创 UVA-10410 树重建 题解答案代码 算法竞赛入门经典第二版
因此，当找到结点a为bfs[b] = bfs[a] + 1，且a < b时，即有可能是兄弟结点，也有可能是父节点。我尝试过，如果把这种情况作为父节点，题目给出的样例可以通过，但是提交后是WA。2. 即使子树成功，更大的子树也可能失败，需要再重新按照别的方案构建更小的子树，且方式不同。我们从b开始往前找，找到b的父节点。此时在bfs中，bfs[a] > bfs[b]。此时在bfs中，bfs[b] = bfs[a] + 1，且a < b。设结点a的bfs，dfs位置分别为bfs[a],dfs[a]
2023-06-24 01:33:08
757
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人