凌晨两点的夜猫子

Review of 20242024一晃眼就逝去了,发生了很多经历了很多也成长了很多…… 日常1~4月平平淡淡,重复着每一天做着相同的事情，维持着 宿舍-教学楼-实验室 三点一线的规律生活,每天都是一样的,没有太多波澜,也没有太多惊喜,也没有太多遗憾,就这样平淡的度过了。 不过此时我开始接触React,从此从Vue转向React,从此开始我的前端技术定向之旅。也有很多的commit记录，看着满满的绿色方块，心里也蛮有成就感的。 这时总是被粽子、念哥他们催促说早点找个实习，但我个人不以为意，觉得才大二时间还早，所以一直拖着拖着……现在想来，当时的自己多少有点蠢了，唉 5月，参加了实验室团建认识了她，在一起了一段时间，那时候很快乐充实，但后来终究是观念不合，还是没能坚持一起走下去，想来大多是我的原因吧 6月的时候，混水了朋友的“港珠澳大学生计算机创新作品赛”，但遗憾只得了三等奖。期间粽子回来了，好久没见到粽子了感觉粽子发福了唉！然后粽子请大家吃了矮板凳火锅，好好好！ 7月开始刷算法，力扣Hot100过了一遍，痛苦ing，自己是菜鸡。。。。。 8月,突然听见大喷菇和或或在极安智信实习，人 ...

自我介绍说输出1234567891011121314151617181920（1）求输出function foo() { var i = 0; return function() { console.log(i++); }}var f1 = foo(), f2 = foo();f1(); f1(); f2(); （2）求输出：var obj = {},arr = [];for (var i = 0; i < 3; i++) { obj.a = i; arr.push(obj);}console.log(arr); 算法123456789101112131415161718192021有效的括号 给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串 s ，判断字符串是否有效。有效字符串需满足：\1. 左括号必须 ...

前言今天在刷牛客看面经的时候偶然看见 浏览器缓存 这个词汇，平常开发中很少会去关注这个，也只知道F5会清除缓存，以及开发部署新版本的时候会有缓存导致看不到新版本效果，于是就打算好好了解一下浏览器缓存。 我希望能够尽量清晰明了的讲解，同时考虑到浏览器缓存都是在后台处理，无需用户干预平时也不会过多涉及，所以只会简单介绍一些常见的缓存策略。 缓存策略 DNS缓存 本地缓存（memory缓存） Http缓存（强缓存和协商缓存） 服务端缓存（cdn缓存） 浏览器缓存（cookie、localstorage、sessionstorage） DNS缓存DNS缓存是浏览器缓存的一种，浏览器会缓存DNS解析结果，减少DNS解析时间，提高网页加载速度。 简单来说就是，我们初次通过域名访问网站时，会将域名解析为IP地址，这个解析结果会被浏览器缓存，下次访问该域名时，浏览器会直接使用缓存中的IP地址，而无需再次进行DNS解析。 本地缓存（memory缓存）memory cache 是浏览器为了加快读取缓存速度而进行的自身的优化行为，不受开发者控制，也不受 HTTP 协议头的约束。当资源被存入内存后，下次同 ...

前言怎么才算一种好的代码组织方式呢？这是一个值得深思的问题，哪怕是同一个人在不同的时期写不同的项目甚至同一个项目时， 也会有不同的代码组织方式，那么怎么才算一种好的代码组织方式呢？ 但是，这并不是一个简单的问题，需要从多个角度来考虑，包括代码的可读性、可维护性、可扩展性等方面。 当被问到的时候大家可能回答，一个好的代码组织方式应该具备以下几个特点：模块化、可重用性、可扩展性、可读性、一致性…… 但我个人认为简单来看的话又重点体现在了可读性，一个项目的代码是可读的易于上手的，当一个人接手一个项目的时候，能够快速上手， 快速理解这个项目，那么这个项目的代码组织方式就是好的，当然，这并不是唯一的标准，但是我认为这是最基本的要求。 代码组织方式强映射关系强映射关系，意味着路由中的各个页面模块与后端接口的各个模块之间以及Ts类型模块有明确的对应关系， 这样前端开发人员就可以根据路由结构来快速定位到对应的后端接口，从而提高开发效率。 并且，这种强映射关系也使得前端代码更加清晰和易于维护，因为前端开发人员可以很容易地找到与后端接口相对应的代码，从而避免出现接口调用错误等问题。 此处我是遵循了相应 ...

前言最近期末月在复习PTA上面的题老是有做出来了的答案干扰，就很烦，然后突然奇想写了几段代码来解决这个事情，还算实用有趣，我想大家肯能也和我一样有同样是诉求 介绍先让我看看效果： 使用前: 使用后: 实现去除单选框1234567// 使用querySelectorAll方法查找所有符合条件的input元素const radioInputs = document.querySelectorAll('input[type="radio"]');// 遍历找到的每个元素并将其从DOM树中删除radioInputs.forEach(function(input) { input.parentNode.removeChild(input);}); 去除多选框1234567// 使用querySelectorAll方法查找所有符合条件的input元素const checkboxInputs = document.querySelectorAll('input[type="checkbox"]&# ...

前言最近再实习的过程中，碰到一个需要通过WebSocket连接服务器，并进行消息推送的需求，虽然leader说此项目当前不需要，实现弹窗效果，只需要直接展示出来即可，但我仍然想尝试实现一个优雅的WebSocket弹窗，于是下去研究了一下。 实现思路WebSocket配置首先，我们需要连接WebSocket服务器，并监听消息。 123456export function contectWebSocket() { const url = new URL("ws://localhost:4000/ws"); url.searchParams.append("token", localStorage.getItem("token") || ""); const socket = new WebSocket(url); return { socket, url };} 上述我们已经简单的实现了WebSocket的连接，并获取到WebSocket对象，大家可以根据自己的 ...

前言前段时间在用node.js写一个后端项目，后面就想着线上部署一下吧，然后就遇见了各种坎坷磨难，一言难尽 购买服务器首先，既然要搭建服务器那么最起码我们得有一个服务器，物理服务器太麻烦了，果断选择云服务器，虽然我是实物主义，云服务器并不符合实物主义，但物理服务器确实过于繁琐，先不论财力支出，时间成本过于高昂，并不符合我的初衷。 我是在阿里云买的ECS云服务器，阿里云有学生优惠，学生认证后，购买服务器可以便宜很多，官网地址是：https://www.aliyun.com/ 然后选择的是Ubuntu的镜像源 第一次踩坑：第一次买没什么经验然后发现，如果大家买的地域是国内的，且想用https协议那么就需要备案，过程漫长而繁琐，http不需要备案。如果地域是香港或者新加坡的则无此担忧。此外，大家务必注意买的服务器是否具有官网IP，当时我买的时候没注意导致了后续得额外购买弹性公网，不过也有别的解决办法，可以通过内网穿透来实现，但需要额外配置，这里就不展开了，大家自行百度吧。(狠狠吐糟，居然还有没有弹性公网的,当时和朋友说的时候他也表示无语) 部署基础配置已经实现了服务器购买后，必然是连接 ...

前言最近在用node.js写一个后端项目的时候，注册需要实现一个验证码功能，果断的向好友寻求帮助，然后bakptr将他的一种无状态验证码思路推荐给了我，后面再一段时间摸索后终于完成了相应的部署，并成功实现了验证码功能。今晚有空在这里记录一下，再次感谢bakptr的帮助。 实现思路TOTP首先，我们需要了解TOTP（Time-Based One-Time Password）这种验证码的原理，它是一种基于时间的一次性密码算法，可以用于验证用户身份。其原理是使用一个密钥和一个时间戳来生成一个一次性密码，每次生成的时间戳都会不同，因此可以保证验证码的唯一性和安全性。 大概思路为，我们先获取当前的时间戳timeWindow 然后将email和timeWindow拼接成一个字符串，使用HMAC-SHA256算法对这个字符串进行签名，最后将签名结果的前codeLength个字符作为验证码。 12345678910111213141516171819202122232425262728293031function getCurrentTimeWindow() { const timest ...

前言自从16.8版本发布以来，React引入了Hooks，使得函数组件也可以拥有类组件的state和生命周期，并且更加简洁明了。相比于类组件，函数组件拥有一下优点： 代码更加简洁，不需要定义类，不需要使用繁琐的this关键字 代码更加可读，函数组件的代码更加直观，易于理解 代码更加易于测试，函数组件的代码更加独立，易于测试 代码更加易于维护，函数组件的代码更加模块化，易于维护 大大提高了代码的复用性，减少了代码的冗余 但在16.8之前，由于未引入Hooks，函数组件无法拥有state和生命周期，因此只能用于展示组件，无法用于业务逻辑处理。而Hooks的出现，使得函数组件也可以拥有state和生命周期，从而可以用于业务逻辑处理。 State讨论之前我们需要先知道什么是 state ，state 是组件内部的状态，是React组件的记忆单元，用于保存组件的内部状态，状态的变化会触发组件的重新渲染已更新UI 但是函数组件没有state，因此我们需要使用Hooks来添加state，而Hooks添加的state是局部的，只在当前组件中有效，不会影响到其他组件。 以此也就引发了我的疑问，函数 ...

前言最近翻了翻Vue的官方文档，发现对于v-for 与 v-if的介绍时与之前所了解到的v-for 与 v-if的优先级恰恰相反，详细查询了相关资料后，发现大多数对于此出的介绍都是基于Vue2文档的，在Vue3中，v-if的优先级高于v-for vue2版本，v-for高于v-if且两者不可一同使用，vue3是可以一起用的，vue3更新了优先级，v-if高于v-for Vue2中的v-if与v-for在Vue2中，v-for的优先级高于v-if，这意味着v-for会先执行，然后再执行v-if，这可能会导致一些意想不到的问题。例如，如果你在一个列表中使用了v-for和v-if，那么v-if会先执行，这可能会导致列表中的元素被过滤掉，然后再执行v-for，这可能会导致列表中的元素被重复渲染。 123<div v-for="item in items" v-if="item.show" :key="item.id"> {{ item.text }}</div> ...