自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 前端模块化

模块化就是把一个较为复杂的程序按照一定的规范拆分并且封装成几个单独的代码文件,在使用的时候按照一定的规则将这些文件组合在一起。每个代码文件中的数据是私有的,通过向外部暴露一些接口或者是一个方法来实现和其他模块间的通信。

2024-12-25 20:07:29 371

原创 前端工程化必须要知道的前端埋点

埋点是一种数据采集技术,主要用于收集用户在Web应用或移动应用中的行为数据。通过在代码中插入特定的监控代码(埋点代码),可以在用户触发特定事件(如点击按钮、浏览页面等)时捕获相关信息,并将这些信息发送到数据分析平台进行存储和分析。埋点可以帮助开发者、产品经理和运营团队了解用户在使用应用过程中的操作习惯和需求,为产品优化、营销策略和用户体验改进提供依据。假设我们有一个电商网站,我们想要追踪用户点击“加入购物车”按钮的行为。

2024-11-30 21:11:09 322

原创 Web Notifications API-让网页也能像QQ一样实现消息通知

Web Notifications API允许网页或者是应用程序以系统级别发送在页面外部显示的通知,这样就可以实现即时应用程序在后台或者是空闲状态,Web应用程序也会向用户发送信息。

2024-11-23 11:04:39 455

原创 ES6之Proxy详解

Proxy是es6新增的一个属性,用于修改某些操作的默认行为,可以理解为在目标对象外层设置一层“拦截”,外界如果想要访问目标对象,都必须先通过这层拦截,所以proxy提供了一种机制可以对外界的访问进行过滤和改写,用在这里proxy表示代理器的意思。Proxy通过使用一个代理对象来包装目标对象,并提供了一组钩子函数(也称为“陷阱”),这些钩子函数可以在代理对象上进行操作。当我们对代理对象进行操作时,本质上是在调用这些钩子函数。

2024-11-09 15:21:01 1488

原创 NProgress---轻量级的前端进度条插件

NProgress插件出现在页面的顶部,作为一个进度条,在项目中使用大大优化了用户的体验,一般网站请求接口或者加载一些文件需要使用这种进度条来不断提示用户。

2024-10-11 10:27:21 713

原创 Vue2中路由的使用

可以使用keep-alive标签包含用来缓存路由组件,默认情况下缓存所有组件,可以使用:include="[‘组件名’]" 指定需要缓存的路由组件。exclude功能刚好相反。在使用keep-alive包含路由组件后,组件不会触发beforeDestory销魂流程,需要使用activated激活,deactivated()失活。

2024-09-20 17:10:15 583

原创 Vue2中父子组件通信双向绑定

在vue2中,如果想使用比较简单的方式来实现父组件向子组件传递参数并实现双向绑定。在父组件中,使用.sync修饰符来传递参数给子组件,并实现双向绑定;在子组件中,通过$emit方法触发一个自定义事件,并传递更新后的值给父组件。在上述代码的演示中,使用:childData.sync来传递参数给子组件,并实现双向绑定,在子组件中使用$emit方法触发一个名为updata:childData的自定义事件,并且将子组件的childData作为参数传递给父组件。

2024-09-13 16:52:33 976

原创 HTTP1.0和HTTP2.0的区别

HTTP2相对于HTTP1,最主要的区别在于采用了多路复用的技术,这使得它具有更好的性能和更低的延迟,HTTP1和HTTP2之间的区别如下1.二进制分帧:HTTP2在传输数据的时候采用的是二进制格式来进行分帧,相比之下,HTTP1采用的是纯文本格式。使用二进制分帧这种数据传输的方式可以减小数据传输的大小,并且可以有效地压缩数据,提高了数据传输的效率。2.头部压缩:HTTP2采用了HPACK算法进行头部压缩,从而减小了传输头部的大小,并提高了传输性能。

2024-08-17 11:14:19 593 1

原创 JS中的迭代器和生成器

1.通过调用生成器函数来创建迭代器(这个时候生成器函数不会执行)2.通过迭代器调用next执行生成器函数里面的代码3.执行到yield暂时跳出函数并且把yield后面是值加工成对象返回到调用next的地方。

2024-08-10 10:45:35 426

原创 JS中的闭包

闭包指的是那些引用了另一个函数作用域中变量的函数,通常是在嵌套函数中实现的。在上述代码中,给value1,value2赋值的代码位于内部函数(匿名函数中),在赋值的代码中引用了外部函数的变量propName.在这个内部函数被返回并且在其他地方被使用时,它仍然会引用着外部函数的变量。这个因为内部函数的作用域链包含 creatFunction()函数的作用域。为什么会这样,要从第一次调用函数会发生什么说起。

2024-08-03 10:26:13 501

原创 HTTP中的缓存方式

第一种方式是基于时间来实现的,第二种方式是基于设置一个唯一标识来实现的,两者比较来说,后者可以更加准确的判断出文件内容是否被修改,避免由于时间篡改导致的问题。

2024-07-26 18:10:29 599

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

浅拷贝实现的是对基础数据类型的拷贝,并且数据 只有单一的一层,而深拷贝用来拷贝具有嵌套层级的引用数据类型。对于基本数据类型来说,深拷贝和浅拷贝实现的效果一样;而对于引用数据类型来说,深拷贝可以实现操作该数据,并且不会影响到源数据的效果。

2024-07-16 16:45:16 839

原创 一文读懂DNS和CDN

CDN的全称是Content Delivery Network,即内容分发网络。是一种利用分布式节点技术,在全球部署服务器,即时地将网站,应用视频,音频等静态或者动态资源内容分发到用户所在的最近节点,提高用户访问这些内容的速度和稳定性,降低网络拥塞和延迟,同时也能减轻源站的压力。提升网络或应用的可用性和安全性。CDN的基本原理是将源站的内容分发到离用户最近的节点上进行缓存,并通过智能路由,负载均衡等技术来保证用户能够快速,稳定地访问到所需资源。

2024-07-12 17:14:30 1621

原创 JS中的上下文

执行上下文简称上下文。变量或者函数的上下文决定了它们可以访问哪些数据,以及它们的行为。每一个上下文都具有一个关联的变量对象,而这个上下文中定义的所有变量和函数都存在于这个对象上。

2024-07-02 21:46:45 1016

原创 计算机网络之UDP协议

UDP协议又叫做用户数据报协议,是一个目标在传输层提供直接发送报文的能力,UDP与TCP相比,它不会拆分数据,它只是能够发送报文。

2024-06-25 18:15:42 1440 1

原创 计算机网络之TCP的三次握手和四次挥手

TCP是一个全双工协议,保证双方的传输更加稳定和可靠。为了让双方都保证建立连接的时候,连接的双方都需要向对方发送SYC(同步请求)和ACK(响应)。在建立连接的时候,双方都没有繁琐的工作,所以在被建立连接的一方可以将自己的ACK和SYN作为一条信息回复,因此需要三次握手。在断开连接的时候,因为需要等被断开连接的一方把数据都处理完,所以被断开连接的一方需要分别发送ACK和FIN,因此需要四次挥手。

2024-06-24 11:47:16 793

原创 在vue3项目中使用el-tabs切换标签页时echarts图表显示不正确

el-tabs标签页是用来分隔内容上有关联但是属于不同类别的数据集合。Tabs组件提供了选项卡功能,默认选中第一个标签页,也可以通过value属性来指定当前选中的标签页.此外,el-tabs还提供了tab-click方法,来实现切换标签也触发的事件。

2024-06-01 09:13:18 1747 1

原创 ES6之Promise详解

1.语法:在语法上async/await提供了更简洁 ,更直观的一个语法,使异步代码更易读和维护。2.错误处理:在async/await中,可以直接使用try...catch来捕获异常,而在Promise中,则需要使用catch。3.代码流程:async/await可以使得异步代码看起来更像一个同步代码,易于阅读和理解。

2024-05-24 18:15:02 1535 1

原创 浅谈JS中的回调地狱

3.promise的链式编程可以保证代码的执行顺序,但是前提是每一次在执行完then中的操作时,必须要返回一个promise对象,这样才能保证下一次的then时能够接收到数据.从上述的代码示例可以看出,定时器中的任务是否执行完毕不影响后面 任务的执行,当定时器需要等待3秒再去执行时,不会阻塞后面函数的执行。这就是简单的异步任务的实现。从上面的实例可以看出,如果要按照语序输出一句话,就需要回调函数嵌套回调函数,上面代码就嵌套了三层回调函数,这种回调函数中嵌套回调函数的情况就称为回调地狱。

2024-05-19 08:08:57 1119 1

原创 JS中函数节流的使用

在JS中的函数大多数情况下都是由用户主动触发调用的,除非是函数本身不合理,一般我们不会遇到与性能相关的问题。但是在一些少数情况下,函数的触发不是由用户直接控制的。在这些场景下,函数非常有可能被频繁的地调用,从而造成大的性能问题。

2024-05-11 18:28:59 711 1

原创 JS中原型和原型链

构造函数在本质上与普通函数没有什么区别,只不过他是使用了new关键字创建对象的函数,所以被称作构造函数const per1=new Person('张峻豪',17);

2024-04-26 22:02:54 669 1

原创 Vue3中的响应式原理

由上可知,在vue3的底层原理中,首先通过Proxy(代理)来拦截对象中任意属性的变化,包括属性的读取,增加,修改和删除,通过Reflect(反射)对被进行代理的对象的属性进行操作。vue3中响应式原理的变化就解决了vue2中响应式原理的弊端。

2024-04-16 11:33:56 684

原创 Vue3+TS在setup中通过ref获取子组件实例数据

在完成第一步的基础上,在父组件中调用子组件实例中的某个属性的时候,TS会报错,虽然不会影响运行,要解决TS的报错,就需要来声明子组件实例的类型通过上述代码的声明就可以解决TS的报错.toggle();这样,我们就可以在父组件中通过定义的ref属性访问到子组件定义的类型。

2024-04-14 09:38:46 1264 1

原创 Vue3中自定义Ref的使用

在Vue3中,ref()接受一个内部值,它返回的是一个ref对象,这个对象是响应式的,可以更改的,且只有一个指向其内部属性值的属性value。ref()将传入参数的值包装为一个带value属性的ref对象。

2024-04-01 15:08:54 4495

原创 深度解析Vue3中的computed和watch

点击改变sum的值</button>console.log('sum的值改变了',newValue,oldValue);})<button @click="changeName">修改我的名字</button><button @click="changeAge">修改我的年龄</button><button @click="changeAll">修改我的全部信息

2024-03-27 21:29:12 1735 2

原创 前后端交互之FormData格式的参数传递

前后端在交互的时候,一般如果后端需要前端返回一个文件类型的数据,在一般情况下,前端会有FormData类型的数据格式来进行数据的传输,来上传文件和数据。FormData主要提供了一种表示表单数据的键值对key/value的构造方式,从命名我们可以得出,FormData是专门为表单传输量身定做的类型,但是FormData的功能要比application/json强的多,使用FormData也可以用来传递文件数据,而且在window上也直接挂载了FormData对象,方便我们使用。

2024-03-24 17:31:14 3355 1

原创 接口请求中POST与PUT的区别

RESTful API它是一种Web API的设计风格和开发方式,它遵循一组约束和属性,其中最重要的是客户端和服务器之间的无状态通信。在RESTful API中,资源通过URI进行标识,并且使用标准的HTTP方法,比如GET,POST,PUT,DELETE等进行操作,以及使用HTTP状态码和一些自定义的错误码来表达状态和错误信息,RESTful API的设计应该具有可读性,可维护性,可扩展性以及可靠性的特点。

2024-03-15 20:45:36 3055 1

原创 常见网络攻击手段

网络攻击也成赛博攻击,指的是对计算机信息系统,基础设施,计算机网络或者是个人计算机设备的,任何类型的进攻动作,对于计算机和计算机网络来说,破坏,揭露,修改导致软件或者服务失去功能,在没有得到授权的情况下偷取或者是访问任何一个计算机的数据都被认为对计算机和计算机网络的攻击。

2024-03-09 21:52:43 1103

原创 Vue组件之间通信(传递数据)的五种方式

(1).父传子:通过自定义属性来进行传值 (2).在父组件中使用子组件的时候,给父组件添加自定义属性,属性值为传递的数据 (3).在子组件通过使用props接受父组件的数据,props值为一个数组,元素是自定义属性 (4).在子组件中使用传递的数据时与data数据一样代码示例如下:父组件中:子组件中:二.子传父 1.步骤: (1).在父组件中定义修改方法,需要传递的参数 (2).在使用子组件

2024-03-02 15:41:26 3105

原创 确保Web安全的https

如果在HTTP协议通信过程中使用未经加密的明文,比如在Web页面中输入个人信息和密码,如果这条通信线路遭遇窃听,那么个人信息的密码就暴露了。此外,对于HTTP来说,不管是服务器还是客户端都是没有办法确认通信方的,所以说实际的通信可能并不是和预想的通信方在进行通信,并且还要考虑到接受的报文可能在通信途中已经遭到篡改的情况。所以,为了解决上述问题,我们需要在HTTP中再加入加密处理和认证等机制,我们把添加了加密以及认证机制的HTTP称为HTTPS。

2024-03-02 10:06:01 882

原创 XSS攻击详解

1.盗用cookie,获取用户的敏感信息;2.利用iframe,frame等方式,以用户的身份执行一些管理动作,或者执行一些一般的行为比如说发私信,加好友等;3.在一些访问量极大的页面上进行XSS攻击可以攻击一些小型网站;4.利用一些可被攻击的域或者其它的域信任的特点,以受信任来源的身份请求一些平时不被允许的操作。

2024-02-17 21:20:52 2230 1

原创 前端开发必学的Less实用指南(详细版)

Less(Leaner Style Sheets的缩写),它是一门向后兼容的CSS扩展语言,Less和Css两者之间是非常像的,因此,如果有CSS基础,学起Less也是比较容易的。Less和其他预处理在本质上都是JS库,这些库的作用是将预处理代码编译成标准的CSS代码,所以我们使用预处理器可以通过多种方式来使用。

2024-02-04 19:36:29 7761 1

原创 ES6语法新特性之扩展运算符

ES6中"..."表示扩展运算符,可以将一个数组转为用逗号分隔的参数序列,扩展运算符的作用是迭代对象并展开到单独的元素当中,所谓的可迭代的对象是指可以使用for...of,foreach类似方法的对象,比如数组,set,map对象。

2024-01-28 09:07:47 908 3

原创 js实现像素小鸟游戏

设置一个总的游戏页面,一个父元素盒子,把提示游戏开始的页面,小鸟的页面,分数显示的页面都在总页面下面写下,也就是用一个大的div来包裹游戏元素。

2023-10-30 21:54:18 187

空空如也

空空如也

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

TA关注的人

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