- 博客(151)
- 资源 (35)
- 收藏
- 关注
原创 Vue3 性能优化指南:从理论到实战
Vue3 凭借其响应式系统升级、Composition API和编译优化等特性,在性能上有了显著提升。但实际开发中,不当的使用仍可能导致性能问题。本文将深入探讨 Vue3的性能优化策略,并提供代码示例和实用工具推荐。
2025-04-03 21:32:19
421
原创 前端面试题详解
使用数据摘要算法(如MD5、SHA-256等)对数据进行哈希处理,生成一个固定长度的摘要值。这个摘要值可以用于验证数据的完整性,防止数据在传输过程中被篡改。使用方式前端对发送的数据进行哈希处理,将摘要值和加密后的数据一起发送给后端。后端收到数据后,对解密后的数据进行相同的哈希处理,比较生成的摘要值是否与前端发送的摘要值一致。前端接口加密是保障数据传输安全的重要手段之一。在选择加密方式时,需要根据实际应用场景和安全需求进行权衡。同时,结合其他安全措施,可以进一步提高接口的安全性。
2024-03-19 13:27:51
1319
原创 JavaScript代码规范
使用const或者let来定义变量。不这样做将创建一个全局变量。我们希望避免污染全局命名空间。Captain Planet 警告过我们。// 坏的// 好的为什么?let和const是块级作用域而不是函数作用域// 坏的 - 不必要的函数调用//实际上如果传入参数 hasName 符合条件中断了,那么这行代码毫无意义// 好的//如果传入的 hasName 符合要求就应该直接中断返回了,因为传参不用再进行获取。
2024-03-11 14:02:58
1167
原创 Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?
在 Vue3 Composition API 中,组件根据逻辑功能来组织的,一个功能所定义的所有 API 会放在一起(更加的高内聚,低耦合)正是解决上述问题,将某个逻辑关注点相关的代码全都放在一个函数里,这样当需要修改一个功能时,就不再需要在文件中跳来跳去。在逻辑组织方面的优势,以后修改一个属性功能的时候,只需要跳到控制该属性的方法中即可。然而,当组件变得复杂,导致对应属性的列表也会增长,这可能会导致组件难以阅读和理解。即使项目很大,功能很多,我们都能快速的定位到这个功能所用到的所有 API。
2024-03-11 13:59:47
1277
原创 Vue3.0里为什么要用 Proxy API 替代 defineProperty API
只能遍历对象属性进行劫持return})Proxy直接可以劫持整个对象,并返回一个新对象,我们可以只操作新的对象达到响应式目的= null) {return obj// Proxy相当于在对象外层加拦截console.log(`获取${= null) {return obj } // Proxy相当于在对象外层加拦截 const observed = new Proxy(obj , {
2024-03-11 13:58:30
1028
原创 TypeScript 中类、接口、枚举、函数、命名空间与模块的理解?应用场景?
1、类(Class)是面向对象程序设计(OOP,Object-Oriented Programming)实现信息封装的基础。类是一种用户定义的引用数据类型,也称类类型2、接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法。简单来讲,一个接口所描述的是一个对象相关的属性和方法,但并不提供具体创建此对象实例的方法3、枚举。
2024-03-07 14:59:53
1318
原创 Vue3.0里为什么要用 Proxy API 替代 defineProperty API ?
只能遍历对象属性进行劫持return})Proxy直接可以劫持整个对象,并返回一个新对象,我们可以只操作新的对象达到响应式目的= null) {return obj// Proxy相当于在对象外层加拦截console.log(`获取${= null) {return obj } // Proxy相当于在对象外层加拦截 const observed = new Proxy(obj , {
2024-03-07 14:23:25
852
原创 谈谈this对象的理解以及this的指向问题
函数的this关键字在JavaScript中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别在绝大多数情况下,函数的调用方式决定了this的值(运行时绑定)this关键字是函数运行时自动生成的一个内部对象,只能在函数内部使用,总指向调用它的对象// 当前调用栈是:baz// 因此,当前调用位置是全局作用域bar();// bar// 因此,当前调用位置在baz中foo();//
2024-03-07 14:14:55
991
原创 介绍防抖节流原理、区别以及应用,并用JavaScript进行实现
规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。在事件被触发 n 秒后再执行回调,如果在这 n 秒内又被触发,则重新计时。按钮提交场景**:防止多次提交按钮,只执行最后提交的一次。搜索框联想场景**:防止联想发送请求,只发送最后一次输入。
2024-03-07 11:58:28
398
原创 Javascript原型 ,原型链如何理解使用 ?有什么特点?
proto作为不同对象之间的桥梁, 用来指向创建它的构造函数的原型对象的提示:这里可以添加技术名词解释每个对象的proto都是指向它的构造函数的原型对象 prototype 的刚刚上面说了 ,所有的构造器都是函数对象 函数对象都是 Function 构造产生的。
2024-03-07 11:14:45
353
原创 Grid网格布局的基本使用
Grid 布局即网格布局, 是一个二维的布局方式, 由纵横相交的两组网格线形成的框架性布局结构 , 能 够同时处理行与列设置 display:grid/inline-grid 的元素就是网格布局容器, 这样就能出发浏览器渲染引擎的网格布局算法</div></div>.container 元素就是网格布局容器 .item 元素就是网格的项目 , 由于网格元素只能是容器的顶层子元素 ,所以 p 元素并不是网格元素。
2024-03-07 11:06:28
1199
原创 BFC(块级格式化上下文)的详解
页面中的 -块渲染区域, 并且有 — 套属于自己的渲染规则内部的盒子会在垂直方向上一个接一个的放置对于同 一个BFC的俩个相邻的盒子的margin会发生重叠 , 与方向无关每个元素的左外边距与包含块的左边界相接触 (从左到右) , 即使浮动元素也是如此BFC的区域不会与float的元素区域重叠计算BFC的高度时 , 浮动子元素也参与计算。
2024-03-07 10:42:09
400
原创 什么是响应式设计? 响应式设计的基本原理是什么? 如何做?
响应式网站设计 (Responsive web design) 是-种网络页面设计布局 , 页面的设计与开发应当根据用户行为以及设备环境(系统平台 、屏幕尺寸 、屏幕定向等)进行相应的响应和调整同时适配PC + 平板 + 手机等标签导航在接近手持终端设备时改变为经典的抽屉式导航网站的布局会根据视口来调整模块的大小和位置。
2024-03-07 09:49:53
873
原创 CSS选择器有哪些? 优先级? 哪些属性可以继承?
如果存在内联样式 , 那么 A = 1 , 否则 A = 0。C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数。内联 > ID选择器 > 类选择器 > 标签选择器。D 的值等于 标签选择器 和 伪元素 出现的总次数。h1 -h6标签字体的大下也是不能被继承的。B的值等于 ID选择器出现的次数。a 标签的字体颜色不能被继承。
2024-03-05 17:37:41
491
原创 CSS中 ,有哪些方式可以隐藏页面元素
从页面上仅仅是隐藏该元素 , DOM结果均会存在 , 只是当时在一个不可见的状态 , 不会触发重排。特点: 改变元素透明度 , 元素不可见 , 占据页面空间 , 可以响应点击事件。元素本身占有的空间就会被其他元素占有 ,也就是说它会导致浏览器的重排和重绘。特点 :元素不可见 , 不占据页面空间 , 无法响应点击事件。特点 :元素不可见 , 占据页面空间 , 无法响应点击事件。特点 :元素不可见 , 占据页面空间 , 无法响应点击事件。特点 :元素不可见 , 不占据空间 , 无法响应点击事件。
2024-03-05 17:24:32
475
原创 元素水平垂直居中的方法有哪些?
但是该方案需要知道子元素自身的宽高 ,但是我们可以通过下面 transform 属性进行移动。这种方案不要求父元素的高度 ,也就是即使父元素的高度变化了 ,仍然可以保持在父元素的垂直居中位。display: flex时 , 表示该容器内部的元素将按照flex进行布局。设置margin为负数时 , 使内部子元素到方块3的位置 , 即中间位置。当设置left 、top为50%的时候 , 内部子元素为方块2的位置。css3 中了 flex 布局, 可以非常简单实现垂直水平居中。初始位置为方块1的位置。
2024-03-05 17:10:18
534
原创 CSS☞回流重绘详解,什么场景触发
当我们对 DOM 的修改引发了 DOM 几何尺寸的变化 (比如修改元素的宽 、高或隐藏元素等) 时, 浏览。当你获取布局信息的操作的时候, 会强制队列刷新, 包括前面讲到的 offsetTop 等方法都会返回最新。在页面初始渲染阶段 , 回流不可避免的触发 , 可以理解成页面 — 开始是空白的元素 , 后面添加了新的元。由于每次重排都会造成额外的计算消耗, 因此大多数浏览器都会通过队列化修改并批量执行来优化重排。器需要重新计算元素的几何属性, 然后再将计算的结果绘制出来。
2024-03-05 16:57:28
1229
原创 JavaScript引擎的工作原理:代码解析与执行
JavaScript引擎是一种解释和执行JavaScript代码的软件或硬件组件。它负责将JavaScript代码转换为可执行的指令,并在计算机或设备上执行这些指令。每个浏览器都有自己的JavaScript引擎,用于在浏览器中执行JavaScript代码。V8引擎:由Google开发,用于Google Chrome浏览器和Node.js服务器环境。SpiderMonkey引擎:由Mozilla开发,用于Mozilla Firefox浏览器。
2024-03-01 17:57:48
1039
原创 TypeScript类型进阶
通过结合泛型、extends 关键字、内置泛型函数和其他高级类型概念,我们能够在 TypeScript 中编写更复杂、类型安全的代码,并利用 TypeScript 的强大类型系统来提高代码的可读性、可维护性和可扩展性。在上面的示例中,ReturnType 类型接受一个类型参数 T,并使用条件类型和 infer 关键字推断函数类型的返回类型。在上面的示例中,我们使用 keyof 操作符获取了 Person 接口的属性名集合,并通过索引访问类型获取了 Person 接口中 name 属性的类型。
2024-02-29 10:21:51
945
原创 音乐主题的网页制作
首页实现的页面:使用的前端技术:html、css 布局:导航头部、主体部分、底部;采用弹性布局的实现方式实现的代码:<!doctype html><html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="css/css.css"><link rel="stylesheet" type="text/css" href="c
2024-02-23 17:49:52
3591
30
原创 h-table(表格列表组件的全封装)
如何使用vue封装列表高级查看,表格多种配置使用。三大组件共同合成封装表格组件。(3)tool工具设置栏。(2)table表格。
2024-02-23 17:46:35
789
原创 解决npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
解决npm版本问题
2022-07-22 10:07:16
1304
基于spring+springboot+mybati的前后端不分离的图书商店系统book-shop.zip
2021-04-15
基于Android的时间统计工具TimeSumLBXF-master.rar
2021-02-02
基于Android的动态论坛项目android-SignInSystem-master.zip
2021-02-02
基于Html+CSS+Javascript的旅游网站.rar
2021-02-02
windows网络编程FtpClient.rar
2021-02-02
基于springboot+mybatis+vue.js的权限管理系统
2020-12-21
前端基于html+css+js的酒类项目
2020-12-20
基于web的Android安卓手机短信管理系统
2020-12-20
基于Android仿QQ聊天系统(Android端+服务端)
2020-12-20
基于springboot+mybatis+vue的图书借阅管理系统
2020-12-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人