鱼与前端🐟

前言emm,最近都在忙活八股算法,没什么时间去梳理一下最近发生的事情,以此来做个记录吧. 正文时至四月,春招可以说是完完全全的走掉了,这个春招里我就拿到过一个小厂的offer,由于自己自信后面能够拿到更好的就拒掉了(事实证明并没有),所以这段时间是没有好好把握住的,有点可惜.不过实际上八股文加算法总共的学习时间也就从3月份开始的一个半月,这一个半月的知识浓度比之前大特别多.每天都在消化吸收,挑战自己不熟练的,没有见过的一些新事物,比如算法,比如计网.这两个东西应该是很多人不想面对的吧.好在我坚持了下来,这段时间陆陆续续的刷了一百多道中等加简单难度的leetcode,感悟非常的深,其实部分算法题也不见得特别困难,可能是我做的难度原因.甚至有些题目能让我回想起以前OJ刷题时候的记忆,除开比较用智商的题目,大多数的题都有专门的方法去解决,也算是比较套路化.截到目前为止,我能罗列出来的算法有滑动窗口,动态规划,dfs,bfs,贪心,回溯以及部分排序,虽然不能说完全熟悉他的做题方法,但是碰到类似的题目也知道该用什么方法去解决了.算是这段时间的一点小进步.数据结构方面大概就是一些简单题显露出来的 ...

前言本篇关于尽可能手撕一切可以实现的代码，先从js开始下手 防抖code123456789101112function debounce(fn,timer){ var t = null; return function(){ let firstClick = !t; if(firstClick){ fn.apply(this,arguments); } t = setTimeout(() => { t = null; }, timer); }} 节流code12345678910function throttle(fn,delay){ var begin = 0; return function(){ var cur = +new Date(); if(cur-begin>=delay){ fn.apply(this,arguments); begin = cur; ...

前言本文整理了高频vue面试考点，并将难度分为简单中等困难三个难度。 简单MVC和MVVM的区别MVCMVC的全称是 Model View Controller 是模型，视图，控制器的缩写，是一种软件设计规范。 Model模型:是应用程序中用于处理程序数据逻辑的部分。通常模型对象负责从数据库里面存取数据 View视图:是应用程序中处理数据显示的部分。通常视图是依据模型数据渲染的。 Controller:是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。 MVC的思想:一句话就是Controller负责将Model的数据取出来用View显示出来，换句话说就是在Controller里面把Model的值赋给View MVVMMVVM新增了VM类ViewModel层:做了两件事情完成了双向绑定。 将Model模型转化为了View视图。即将后端的数据转化为所看到的页面。使用的方式是数据绑定。 将View视图转化为了Model模型。即将页面转化为了后端的数据。使用的方式是DOM事件监听。 MVVM和MVC最大的区别就是:他实现了View和M ...

前言本文通过OSI七层模型阐述前端常考的计网知识点 应用层HTTP参见HTTP灵魂之问 DNSDNS的作用就是通过域名查询到IP 因为IP存在数字和英文的组合IPv6，很不利于人类记忆，所以出现了域名。你可以把域名看成某个IP的别名，DNS就是去查询这个别名真正的名称是什么 在TCP握手之前就已经进行了DNS查询，这个查询是操作系统自己完成的，当在浏览器中想访问www.google.com会进行以下操作。 本地客户端向服务器发起请求查询 IP 地址 查看浏览器有没有该域名的 IP 缓存 查看操作系统有没有该域名的 IP 缓存 查看 Host 文件有没有该域名的解析配置 如果这时候还没得话，会通过直接去 DNS 根服务器查询，这一步查询会找出负责 com 这个一级域名的服务器 然后去该服务器查询 google.com 这个二级域名 接下来查询 www.google.com 这个三级域名的地址 返回给 DNS 客户端并缓存起来 以上介绍的是DNS迭代查询，还有一种是递归查询，区别是前者是由客户端去请求，后者是由系统配置的DNS去请求，得到结果之后将数据返回给客户端。 DN ...

前言记录HTTP前端常考考点，关联计算机网络。 1.0 1.x 2.0HTTP 1.0任何格式的内容都可以发送，这使得互联网不仅可以传输文字，还能传输图像、视频、二进制等文件。 除了GET命令，还引入了POST命令和HEAD命令。 http请求和回应的格式改变，除了数据部分，每次通信都必须包括头信息（HTTP header），用来描述一些元数据。 只使用 header 中的 If-Modified-Since 和 Expires 作为缓存失效的标准。 不支持断点续传，也就是说，每次都会传送全部的页面和数据。 通常每台计算机只能绑定一个 IP，所以请求消息中的 URL 并没有传递主机名（hostname） HTTP 1.1http1.1是目前最为主流的http协议版本，从1999年发布至今，仍是主流的http协议版本。 引入了持久连接（ persistent connection），即TCP连接默认不关闭，可以被多个请求复用，不用声明Connection: keep-alive。长连接的连接时长可以通过请求头中的 keep-alive 来设置 引入了管道机制（ pipelining） ...

前言老项目新谈，用vue3重构ing 主题演示待填充… 构建工具+技术栈编译软件：vscode开发框架: vue3打包工具：viteUI：element-plusicon：阿里巴巴其他：pinia， vue-router，git插件：pubsub，nanoid，less-loader后端： nodejs，mysql part0 路由&pinia定义路由，以及重定向。当时在router里面把路径写错了导致页面跳转问题出现。！！！vue3的路由写法123456789101112import { createRouter, createWebHashHistory} from "vue-router"const routes = [{ xxxx}]const router = createRouter({ history: createWebHashHistory(), routes,});export default routerpinia写法 part1 mainFrame这 ...

前言咱们常见的打包工具比如vite，vuecli底层都是通过webpack实现的，下面就来对webpack进行一个学习并且实战运用 为什么需要webpack这就要回顾一下没出现打包工具之前的弊端了。在以前，我们的js都是引入之后写在页面上的，有很多第三方的js比如jquery，lodash等，以及自己编写的js，此时需要注意引入的顺序，否则就会报错。可能会想到将它们合并到一个文件里面就不会报错，但是这样一来冗长的代码导致可读性差，可维护性弱的问题。此外还有作用域和文件太大的问题。 作用域问题我们知道，像jq这种库，全局声明是$符号，这个符号是绑定在window对象上面的，而lodash是绑定的下划线，我们自己的业务文件可能也绑定了类似于user这样的变量到window上面。这样一来我们的window对象就会被污染了，使得它变得非常臃肿。这就是作用域问题。 文件太大如果不合并，那么有多少个js，就加载多少个js，页面可能就会出现一边加载一边渲染的问题。如果将文件合并，这个巨大的js就会带来网络瓶颈，比如首页白屏问题 before webpack在webpack之前，我们使用的是grun ...

关键词类型、栈和堆、检测方式、数据类型转换 类型首先js的类型有基本数据类型和引用类型前者有七种 后者是一种根据以前的USONB理论 大致是Undefined,String,Symbol,Object,Null,Number,BigInt,Boolean 基本数据类型的作用？基础类型存储在栈内存，被引用或拷贝时，会创建一个完全相等的变量；占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。 object为什么是引用类型？而引用类型 在创建对象的时候会在堆内存中开辟一个空间 用来存放对象的属性 在为对象添加属性的时候，是将属性放在堆内存中开辟的空间里。在栈内存中保存显示 对象名+一个地址 类似于指针 执行堆内存中对象开辟的空间引用类型存储在堆内存，存储的是地址，多个引用指向同一个地址，这里会涉及一个“共享”的概念；占据空间大、大小不固定。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。引申出栈和堆的概念！ BigIntjs的精度只有2的53次方，所以当数据大于这个数的时候会出现解析不准确(最 ...

前言前端也是要刷算法的呀= =选自 leetcode hot 100 和 剑指 offer 1.两数之和 【哈希表】主要介绍实战给定一个整数数组nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target 的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。示例 1：输入：nums = [2,7,11,15], target = 9输出：[0,1]解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。示例 2：输入：nums = [3,2,4], target = 6输出：[1,2]示例 3：输入：nums = [3,3], target = 6输出：[0,1]提示：2 <= nums.length <= 104-109 <= nums[i] <= 109-109 <= target <= 109只会存在一个有效答案进阶：你可以想出一个时间复杂度小于O(n2) 的算法吗？这道题对前端来说考察 ...

记录《深入浅出Vue.js》这本书中的内容，以笔记的形式了解vue之中涉及的部分原理 Object变化侦测vue的特性之一就是响应式系统，我们在学习的过程中知道它是通过侦测数据的变化进行视图的更新，而具体到其中的原理是什么呢？ 推和拉变化侦测分为两种类型 一种是推一种是拉。在Angular和React里面，变化侦测的内容属于”拉“，意思是当状态发生变化的时候，它不知道哪个状态改变了。只知道状态有可能变了。然后发送一个信号告诉框架。而在Vue当中，变化侦测属于”推”。当状态发送改变的时候，vue立刻就知道了，然后在一定程度上知道哪些状态变了。意味着vue能进行颗粒度更细的更新。 颗粒度所谓颗粒度呢，就是指某一个状态在发生更新的时候，会影响到多少节点。举个例子来说，假如一个状态绑定着很多个依赖，此时每个依赖表示一个具体的DOM节点，当这个状态改变的时候，会向所有依赖发出通知，进行更新操作。因此颗粒度越细，开销也就越大，所以vue将粒度调为中等，同时将依赖绑定的DOM节点换为了组件。 如何追踪变化vue中，先前的版本里，es6对浏览器的支持并不理想，所以采取了defineProperty ...