my的博客

原创 基础数据结构

在 JS 中，二叉树使用对象来定义。数据域左侧子结点（左子树根结点）的引用右侧子结点（右子树根结点）的引用定义二叉树构造函数时，我们需要把左侧子结点和右侧子结点都预置为空// 二叉树结点的构造函数 function TreeNode(val) {当需要新建一个二叉树结点时，直接调用构造函数、传入数据域的值。

原创 《前端算法与数据结构面试》学习笔记

通过这些，首先是对数据结构遗忘的部分进行巩固，其次可以帮助对算法建立起一个比较系统的大框架，可以让自己非常明确每个数据结构的特点和一些普适性的解决方案，使在刷题的时候更加具有方向性，并方便日后知识点的补充添加，第三是也通过一些案例提升了自己的编码水平，看会了和自己能熟练并准确得动手打出来是两回事，尤其在面试阶段。也在此督促自己，多去及时巩固复习，利用遗忘曲线，减少记忆的时间成本。笔者根据掘金小册-《前端算法与数据结构面试》对算法建立起了大概的框架，并且加入自己的理解整理起来。时间复杂度和空间复杂度。

原创 http1.0 1.1 2对比和一些问题

在一个 TCP 连接上，我们可以向对方不断发送帧，每帧的 stream identifier 的标明这一帧属于哪个流，然后在对方接收时，根据 stream identifier 拼接每个流的所有帧组成一整块数据。那浏览器就会在一个 HOST 上建立多个 TCP 连接，连接数量的最大限制取决于浏览器设置，这些连接会在空闲的时候被浏览器用来发送新的请求，如果所有的连接都正在发送请求呢？流的概念实现了单连接上多请求 - 响应并行，解决了线头阻塞的问题，减少了 TCP 连接数量和 TCP 连接慢启动造成的问题。

原创 水平、垂直、水平垂直居中常见方法

原创 JS文件加载/阻塞问题（性能优化）

蓝色线代表网络读取（脚本下载），红色线代表执行，这俩都是针对脚本的；绿色线代表 HTML 解析。async属性，浏览器会立即下载相应的脚本，在下载的过程中页面的处理不会停止，下载完成后立即执行，执行过程中页面处理会停止。defer属性，浏览器会立即下载相应的脚本，在下载的过程中页面的处理不会停止，等到文档解析完成后，事件触发之前，脚本才会执行。同一标签同时使用defer、async属性时，遵循async。

原创 CSS常见布局及其实现

在实现项目的静态页面时，我们首先要从大局出发，思考整个页面的布局方式，根据需求选择合适的布局方式搭建起页面的基础框架，之后再去填充细节。

原创 面试初记录

通过面试，真的能发现自己在哪些方面的不足，也非常容易找到自己的痛点。有些知识点就看了一眼但是没有深究，所以就没有理解。

原创 浏览器同源策略与跨域

protocol,domain,port三者必须相同。

原创 前端学习路线

本文记录一下自己的一些学习资源，也是自己未来学习的计划路线。掘金算法小册，结合真题对前端常见常考的算法介绍。入行不同年份阶段会遇到的问题，并且提出解答方案。推荐的算法leedcoed刷题顺序。前端面试题汇总，超级全面（八股）大厂常见笔试面试手写题。

原创 webpack和vite

分析器，使用交互式可缩放树图可视化 webpack 输出文件的大小，用来分析打包dist文件哪些资源可以进行优化常见的面试题。

原创 axios（非常全面）

项目中涉及到的多个请求的配置很多都是相同的，如get请求，其他配置可能都相同，只有url不同。那相同部分代码就会造成冗余，通过二次封装，可以实现接口代码复用。疑问：axios本身就是promise，为什么在进行封装请求方法的时候还要在外面加一层promise。后端：中间件/服务端进行跨域相关配置，在项目中新建允许跨域配置类。先引入封装好的方法，在要调用的接口重新封装成一个方法暴露出去。这里主要介绍前端的跨域解决方案,都是做配置项，实现代理转发。一些具体的业务，需要携带一些参数。在本地调试的时候，还需要在。

原创 query和params的区别

【代码】query和params的区别。

原创 组件间数据传递

若要变成响应式，在provide中使用computed( ()=> 要共享的数据 )点击（或其他）触发A组件中的事件，来传递事件和数据给B组件。另外也可以通过父子间拿到实例的方法，对实例对象（数组）进行属性操作。$相当于document.getElementById。

原创 性能优化:keep-alive和路由懒加载

vue是SPA（单页面），所以首页在第一次加载的时候就会把所有组件的相关资源都加载了，即使实际上有些其他未出现在当前视图的组件的资源暂时会用不上，这样会导致网页首页加载速度过慢，用户体验不好。组件进行切换，我们有时只是想看看其他页面，但点回来仍然希望保持原有的组件状态，也就是不重新渲染数据，这时候就需要用到keep-alive（抽象组件）实现。所以我们可以在打包的时候不再将所有的js包打包到一起，而是将不同路由对应的组件进行分别打包成单独的js块，当路由被访问的时候再加载对应的组件。1.将异步组件定义为。

原创 自定义指令

目录一、自定义指令二、v-lazy注册和使用vue3-lazy插件实现插件注册指令实现相关链接三、v-loading功能分析具体实现1.loading.vue2.创建loading指令对象（directive.js）3.注册并使用v-loading项目中用到了v-lazy指令和v-loading自定义指令，笔者在学习的时候非常困惑这到底是什么鬼，所以查阅资料整理了下思路，发现自定义指令真的太好用了！目的：对底层的DOM进行操作，可复用（注意最好数据不会发生改变）IntersectionObserver: h

原创 Vue响应式原理

数组，对象等转化成可观测数据。

原创 this判断（面试题）

【代码】this判断（面试题）

原创 vue3+vite+Element-plus实现的通用后台

根据B站vue3+vite+Element-plus实现的通用后台视频复现的项目

原创 JavaScript思维导图

JavaScript思维导图

原创 async/await

因为内部的所有阻塞会被封装成一个。Generator语法糖。中，await函数调用。

原创 Promise

Promise是一个构造函数pending 进行fulfilled 已成功rejected 已失败特点对象的状态不受外界的影响。只有异步操作的结果能够决定当前的状态（promise承诺）状态发生改变，就不会再改变（resolved定型）。如果再对promise对象添加回调函数，也会立即得到这个结果。

原创 类数组与数组

类数组详解

原创 call,apply,bind函数对比及实现

3.指针从function变化为thisArg（这里相当于给thisArg添加一个fn属性，值为function）1.调用function:function必须存在且是一个函数,之后调用并返回。2.传入参数thisArg，如果没有传入参数，则默认为window。整体上和call一样，只有参数不同，apply第二个参数为数组。4.取参数call传的参数（从第二个开始截取）

原创 作用域和执行上下文

JavaScript属于解释型语言，其运行包括解释和执行两个阶段。