凌晨两点的夜猫子

前言今天在刷牛客看面经的时候偶然看见 浏览器缓存 这个词汇，平常开发中很少会去关注这个，也只知道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> ...

前言 昨天趁着闲暇去兼职当了汪峰演唱会的安保，有幸分到了内场，几乎全程看完了演唱会，也有了一些感触 所听汪峰的歌多以激昂为主，其实对我来说没有过多的感想，我更喜欢类似于薛之谦的这种，比较内敛却能引起强烈情感共鸣。或许是薛之谦离我更近，又或是性格使然吧。当然也不是说不能完全共鸣汪峰的歌，只是没有那种强烈的共鸣，就不多赘述了 所见所见其实是最大的感触，我看见了一个不一样的世界，一个我从未见过的世界。以前的世界总是被限制在了家里，学校里，自我的世界里，可当我向外看时，我看见了有人拖家带口来看演唱会还有两位小朋友，这是内场已就意味着在这3小时不到的时间里他们花费了近1w的门票费用，第一次这么直观显示的感受到了人与人之间的差距，我朋友说人与人的从在孕期期间就不一样了，诚然是这样的。 有人视若珍宝，有人弃之如草芥——内场第一排的位置，有人在全场都一起摇摆时仰做椅子屹然不动，有人还未结束便提前离场 美好而盛大——演唱会临近结束，有一场美好而盛大的彩花洒满全场，这一切的一切都是如此的真实而遥远，一切所见所闻皆为未闻，我试图抓住一把礼花在手，但也仅仅抓住了三两片，而其余的则飘然落地，布满全场。我知道 ...

前言最近停摆了快一个周左右，一是开学了各种杂七杂八的事情比较多，另一个是我之前在想是否有必要写这些面经，也是很早就遇见的问题了网上的资源丰富总能找到写的远比我好的，那我写出来的东西有什么意义呢？或许是接触的人太优秀，不甘于自己的平庸想了想，虽然写出来可能帮助不了别人，但至少让我更加清晰这些概念了，写过和看过是不一样的，后续也会继续更新的 另外发现Echo的各位大家最近似乎都在准备考研和实习的事情，大家加油！（此外特别感谢苏雨只会喵喵，帮我解答了一些面试的疑问，对面试有一个新的认知） 好了言归正传，今天来聊聊Js的原型链，之前一直没有碰这一部分因为prototype和_proto_以及对象实例这些的联系感觉很懵，今天我们来啃一啃这个硬骨头 原型JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象 当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾 准确地说，这些属性和方法定义在Object的构造器函数（constructor functions）之上的 ...