自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(30)
  • 收藏
  • 关注

原创 web前端面试题总结(目录篇)

web前端面试题总结(带链接的目录)

2022-12-14 18:25:56 158

原创 javascript中的深拷贝和浅拷贝

浅拷贝对于简单的对象或数组通常足够,而深拷贝则能确保彻底复制所有的嵌套对象和数组。浅拷贝(Shallow Copy):创建一个新的对象或数组,复制原始对象或数组的引用,并将其赋值给新对象或数组。深拷贝(Deep Copy):创建一个新的对象或数组,并递归地复制原始对象或数组的所有嵌套对象和数组。这意味着新对象或数组是完全独立的,对它的修改不会影响到原始对象或数组。递归拷贝:递归地遍历原始对象或数组,创建新的对象或数组,并复制每个属性或元素。):可以用于对象和数组的浅拷贝。方法:可以用于对象的浅拷贝。

2023-11-03 15:24:20 82

原创 前端使用高德地图

注册高德开发者账号:首先,你需要在高德开放平台(https://lbs.amap.com/)注册一个开发者账号,并创建一个应用。这些是使用高德地图的基本步骤,你还可以进一步了解高德地图API文档,以查找更多可用的功能和选项,并根据实际需求进行定制和开发。获取API Key:在创建完应用后,你会获得一个唯一的 API Key,这是用于访问高德地图 API 的凭证。以上示例创建了一个标记并将其添加到地图上。你可以根据需要添加更多的控件和覆盖物。标签内添加以下代码,引入高德地图API。

2023-11-03 15:21:45 424

原创 从url输入到创建的过程

从 URL 输入到创建的过程包括了解析 URL、建立 TCP 连接、发送 HTTP 请求、服务器处理请求、服务器发送 HTTP 响应、浏览器解析和渲染响应等多个步骤。响应体则是实际的响应数据。它首先会检查请求的合法性和权限,然后找到对应的资源,并通过合适的响应头设置返回内容的类型(如 text/html、image/jpeg)等。一旦建立了 TCP 连接,浏览器会发送一个 HTTP 请求到服务器,该请求包含了要请求的资源的详细信息,如请求方法(GET、POST 等)、请求头、请求参数等。

2023-11-03 15:20:30 127

原创 Flexbox布局的理解以及应用场景

Flexbox 是一种非常有用的 CSS 布局技术,可以帮助开发人员轻松地解决许多常见的布局问题,并实现响应式设计。支持复杂布局:Flexbox 可以处理任何数量的项目,并支持多种布局模式,如水平布局、垂直布局、网格布局等。页面头部:Flexbox 可以用于创建水平和垂直居中的头部元素,如公司标识、导航链接和联系信息等。表单布局:Flexbox 可以轻松实现表单元素的水平和垂直对齐,并支持复杂的表单布局。简单易用:与传统布局相比,Flexbox 可以更轻松地解决许多常见的布局问题。

2023-11-03 15:15:30 134

原创 javascript中for...of和for...in的区别

在JavaScript中,for…of和for…in都是用来遍历数组或对象的语句,但是它们的遍历方式和作用略有不同。

2023-11-03 15:01:21 44

原创 javaScript当中this指向的问题

在JavaScript中,关键字this用于引用当前执行代码的上下文对象。this的值取决于函数的调用方式和上下文环境。

2023-11-03 14:58:48 27

原创 vue2和vue3的生命周期(区别以及执行顺序)

此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。同一个阶段的生命周期Vue3先执行,后执行vue2生命周期,然后再执行下一个阶段的生命周期。– 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。– 在卸载组件实例之前调用。修改父组件的数据后触发父组件的。修改子组件的数据后触发子组件的。

2023-04-13 11:13:59 3157

原创 vue路由的原理以及分类

History主要是利用HTML5History来操作游览器历史记录栈,主要方法有back,go来读取游览器路由历史记录并控制跳转,HTML5新增pushState,replaceState两个方法来修改历史记录,调用这两个方法修改历史信息后,虽然当前url改变了,但游览器不会立即请求该url,这就满足单页面应用更新视图但不重新请求页面的需求。而后来就提出了前端路由的概念 前端路由的特点就是改变url不刷新页面,对url变化的监听,更新视图模块。Vue路由实现有两种模式。

2023-01-31 13:47:26 122

原创 vue自定义指令的理解以及应用场景

bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用unbind:只调用一次,指令与元素解绑时调用。

2023-01-31 13:44:52 229

原创 http请求报文响应报文

一、 HTTP请求报文主要由**请求行**、**请求头**、**空行**、**请求正文**二、 HTTP响应报文主要由**状态行**、**响应头部**、**响应正文**

2023-01-31 10:19:40 1364

原创 token cookie session

Session中的信息保存在Web服务器内容中,保存的数据量可大可小。由于用户停止使用应用程序后它仍然在内存中保持一段时间,因此使用Session对象使保存用户数据的方法效率很低。Cookies是一些存储在用户电脑上的小文件。它是被设计用来保存一些站点的用户数据,这样能够让服务器为这样的用户定制内容。Session用于保存每个用户的专用信息,每个客户端用户访问时,服务器都为每个用户分配一个唯一的会话ID(Session ID) . 她的生存期是用户持续请求时间再加上一段时间(一般是20分钟左右)。

2023-01-31 10:14:26 92

原创 react虚拟dom相关

虚拟dom的优势:简单方便,如果使用手动去操作真实DOM来完成页面,繁琐又容易出错,在大规模应用下维护起来也很困难,性能方便,使用虚拟dom能够有效的去避免真实dom树的频繁更新,减少多次引起的重绘于回流,从而提高性能,跨平台:react借助 着虚拟dom带来了跨平台的能力,一套代码多端运行,但是也有一些缺点,在一些性能要求极高的应用中,虚拟dom无法进行针对性的极致优化首次渲染大量dom时,由于多了一层虚拟dom的计算速度比正常的稍慢。在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

2023-01-06 19:53:26 170

原创 对react的理解?有哪些特性?

React,用于构建用户界面的 JavaScript 库,只提供了 UI 层面的解决方案。使用虚拟 DOM 来有效地操作 DOM,遵循从高阶组件到低阶组件的单向数据流。遵循组件设计模式、声明式编程范式和函数式编程概念,以使前端应用程序更高效。

2023-01-06 17:21:20 153

原创 【面试题整理,未分类】

在Vue2.0中,代码复用和抽象主要形式是组件,然而有的情况下,仍然需要对普通DOM元素进行底层操作,这时候就需要使用到自定义指令应用场景:表单防止重复提交、图片懒加载、一键copy的功能浏览器首次请求资源后,需要再次请求时,浏览器会首先获取该资源缓存的header信息,然后根据Cache-Control和expires来判断该资源在本地缓存否过期。若没过期则直接从本地缓存中获取资源信息,浏览器就不再向服务器重新请求资源,如过期则需重新发送请求,重新缓存资源,更新缓存时间。

2023-01-05 17:28:09 134

原创 Git常用命令

说说git常用的命令有哪些?1. git init 初始化仓库,默认为 master 分支2. git add . 提交全部文件修改到缓存区3. git add 提交某些文件到缓存区4. git diff 查看当前代码 add后,会 add 哪些内容5. git diff --staged查看现在 commit 提交后,会提交哪些内容6. git status 查看当前分支状态7. git pull 拉取远程仓库的分支与本地当前分

2023-01-05 17:24:11 87

原创 数组常用方法及作用

数组常用的方法及作用Array.length:返回或设置一个数组中的元素个数 Array.from() :对伪数组或可迭代对象(包括arguments2. Array,Map,Set,String…)转换成数组对象 Array.isArray():用于确定传递的值是否是一个 Array3. concat():方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。4. every(callback):方法测试数组的所有元素是否都通过了指定函数的测试5. filter():创建一个新

2023-01-05 17:15:27 186

原创 如何通过原生js实现一个节流函数和防抖函数?

如何通过原生js实现一个节流函数和防抖函数防抖:任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行。如果n秒内高频事件再次被触发,则重新计算时间。节流:指定时间间隔内只会执行一次任务

2022-12-29 17:15:47 203

原创 react组件通信

组件之间的通信分为 父传子通信 , 子传父通信 ,非父子组件通信

2022-12-29 17:04:04 93

原创 react 生命周期

1. 挂载阶段: - constructor():在react组件挂载之前,会调用它的构造函数 - ComponentWillMount():在render()方法之前调用,并且在初始化挂载及后续更新时都会被调用 - ComponentDidMount():在挂载之后(插入dom树中)立即调用2. 更新阶段: - componentWillReceiveProps():在接收父组件改变后的props需要重新渲染组件时使用的比较多,外部组件频繁的时候会导致效率会比较低

2022-12-29 17:00:00 150

原创 Js数据类型判断都有哪几种方式?至少说出5种?它们的区别是什么?

1. typeof判断:typeof返回的类型都是字符串形式2. Constructor:实例constructor属性指向构造函数本身3. Instanceof:instanceof可以判类型是否是实例的构造函数4. Object.prototype.toString.call():判断类型的原型对象是否在某个对象的原型链上5. 通过object原型上的方法判断:比如array.isArray()来判断是不是一个数组6. ===(严格运算符)

2022-12-29 16:43:05 211

原创 Real diff算法

第一次render在执行的时候会将第一次的虚拟dom做一次缓存,第二次渲染的时候会将新的虚拟dom和老的虚拟dom进行对比。这个对比的过程其实就是diff算法。在DOM需要更新的时候,通过diff算法可以 计算出 虚拟DOM 中真正变化的部分,从而只针对变化的部分进行更新渲染,避免”牵一发而动全身“,造成性能浪费。

2022-12-29 15:21:53 251

原创 webSocket

而在websocket出现之前,开发实时web应用的方式为轮询,不停地向服务器发送 HTTP 请求,问有没有数据,有数据的话服务器就用响应报文回应。如果轮询的频率比较高,那么就可以近似地实现“实时通信”的效果;轮询的缺点也很明显,反复发送无效查询请求耗费了大量的带宽和 CPU资源。WebSocket,是一种网络传输协议,位于OSI模型的应用层。客户端和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输。它对开发者要求高了许多。

2022-12-29 14:40:37 345

原创 git使用以及相关命令

git,是一个分布式版本控制软件,最初目的是为更好地管理Linux内核开发而设计分布式版本控制系统的客户端并不只提取最新版本的文件快照,而是把代码仓库完整地镜像下来github或者gitee实际就可以充当这个服务器角色,其是一个开源协作社区当我们通过git init创建或者git clone一个项目的时候,项目目录会隐藏一个.git子目录,其作用是用来跟踪管理版本库的文件状态对应的,不同状态的文件在Git中处于不同的工作区域,主要分成了四部分:工作区:相当于本地写代码的区域,暂存区:暂存区是一

2022-12-23 14:37:07 176

原创 ts中的泛型

泛型是什么泛型指的是在定义函数/接口/类型时,不预先指定具体的类型,而是在使用的时候指定类型限制的一种特性泛型的意义(目的)设计泛型的关键目的是在成员之间提供有意义的约束。这些成员可以是:类的实例成员、类的方法、函数参数和函数返回值。泛型的写法就是在标志符后面添加尖括号(),然后在尖括号里写形参,并在 body(函数体, 接口体或类体) 里用这些形参做一些逻辑处理。

2022-12-17 11:30:41 835

原创 前端面试题3

前端面试题3,有关浏览器,react,vue

2022-12-14 19:01:56 80

原创 前端面试题2(包含react、vue、js)

前端面试题2(包含react、vue、js)

2022-12-08 16:24:43 148

原创 前端面试题(1),多为react相关

前端面试题 (1)

2022-12-02 15:32:15 363

原创 react星星评价展示组件,具体到小数点

可以将星星的渲染精确到小数位,和组件库中的组件不同,组件库中组件只可精确到一半,在很多项目中我们都需要进行精确到小数位。

2022-11-28 11:04:14 671

原创 react类组件和函数组件有何不同?

class组件是有状态的组件,可以定义state状态,函数组件无状态class组件有生命周期的,函数组件无生命周期class组件是由this对象,函数组件没有this对象组件调用: class组件实例化后调用render方法调用,函数组件直接调用的。class组件内部的话,render方法return返回渲染jsx模板,函数组件直接返回即可ref获取子组件的对象,class组件可以直接获取到的,函数组件无法直接获取到。绑定bind改变this指向,只适用于class组件。

2022-10-27 09:17:11 1561

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除