自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 大屏项目:react中实现3d效果的环形图包括指引线

参考链接。

2024-01-15 10:28:39 653

原创 react中实现拓扑图

在react中使用时遇到了一个异步的问题,通过componentDidUpdate监听了数据的更新变化。项目中的原型图需要使用react实现一个拓扑图(关系图)通过项目需要以及修改,形成了下边的样式。

2024-01-09 17:11:27 1280

原创 echarts 提示框设置自定义样式

echarts中遇到的需要自定义的提示框样式,大致样式是这样,我们需要使用echarts中的属性和自定义的html元素共同实现。带颜色的方块在formatter的函数里边使用自定义html实现,提示框样式在属性中实现。

2024-01-09 16:55:59 956

原创 react中遇到的分页问题

1.由于useState和useRef的区别那我们就不考虑使用useState。1.使用useState时不能够进行当前页码的改变,数据不会随着页码变化。2.删除当前页的最后一条数据时,页码返回上一页但是数据为空。2.再删除的逻辑当中添加判断条件。

2023-11-07 14:29:21 580

原创 Ant Design Pro【面包屑导航】二级路由和三级路由都有component的情况,三级不显示component的页面,怎么解决?

Ant Design Pro官网当中没有给出二级路由的页面和三级路由的页面同时展示的解决办法,而我们的需求是要加上面包屑导航,展示二级和三级的页面。我的解决办法如下(期待更好的办法)根据路由自动进行匹配。

2023-10-27 20:49:12 528

原创 前端开发中遇到的复杂数据求和问题

首先我们的数据结构大概是这样子,detials里边的数据可能有一条也可能多条,我们需要对红框中的数字进行相加渲染到列表中。在js中常用的数学计算库就是Math,但是Math库中没有能够进行求和的方法。或者可以去寻找更合适的库进行操作。2.使用reduce函数。那我们有两种解决办法。

2023-10-20 10:43:31 250

原创 使用pro-components遇到的问题

使用ProTable组件进行数据渲染遇到的复杂数据结构如何处理?

2023-10-16 14:46:59 636

原创 自己封装的reduce、map、foreach、filter、bind等方法

在循环中,我们检查累加器(accumulator)是否已经定义,如果是,则调用回调函数 callback,并传入累加器的值、当前元素的值、当前索引和原始数组作为参数,并将回调函数的返回值赋值给累加器。在循环中,我们遍历数组的每个元素,并在每次循环中调用回调函数 callback,并传入当前元素的值、当前索引和原始数组作为参数。在循环中,我们遍历数组的每个元素,并在每次循环中调用回调函数 callback,并传入当前元素的值、当前索引和原始数组作为参数。最后,我们返回这个新函数作为 bind 方法的结果。

2023-09-07 18:33:23 246

原创 史上最全react面试题

webpack是一个前端模块化打包工具,主要由入口,出口,loader,plugins四个部分。前端的打包工具还有一个gulp,不过gulp侧重于前端开发的过程,而webpack侧重于模块,例如他会将css文件看作一个模块,通过css-loader将css打包成符合css的静态资源。如果你还不熟悉回调渲染模式(Render Callback Pattern),这个代码可能看起来有点怪。state = {

2023-07-31 09:26:01 515

原创 vue全家桶面试题

Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行钩子函数,这个时候,数据还没有挂载呢,只是一个空壳,无法访问到数据和真实的dom,一般不做操作挂载数据,绑定事件等等,然后执行函数,这个时候

2023-07-22 12:40:18 1374

原创 【面试官】说说你对闭包的理解

相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数减1。当这个值的引用次数变成0时,则说明没有办法再访问这个值了,因而就可以将其占用的内存空间回收回来。当变量进入环境时,例如,在函数中声明一个变量,就将这个变量标记为“进入环境”。从逻辑上讲,永远不能释放进入环境的变量所占用的内存,因为只要执行流进入相应的环境,就可能会用到它们。,而Javascript的GC在100ms甚至以上,对一般的应用还好,但对于JS游戏,动画对连贯性要求比较高的应用,就麻烦了。这个方案的思想很简单,就是。

2023-07-18 16:03:19 162

原创 史上最全js面试题

对象字面量:var obj = {};构造函数:var obj = new Object();Object是JavaScript中所有对象的父对象数据封装类对象:Object、Array、Boolean、Number和String其他对象:Function、Arguments、Math、Date、RegExp、Error闭包就是能够读取其他函数内部变量的函数。

2023-07-16 21:56:42 2344

原创 史上最全高质量css+html面试题

当对一个文档进行布局(layout)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)contentpaddingbordermarginmargin(外边距)- 清除边框外的区域,外边距是透明的。border(边框)- 围绕在内边距和内容外的边框。padding(内边距)- 清除内容周围的区域,内边距是透明的。content(内容)- 盒子的内容,显示文本和图像。CSS hack。

2023-07-13 21:59:19 1596

原创 详谈加密算法

数字签名信息加密是前后端开发都经常需要使用到的技术,应用场景包括了用户登入、交易、信息通讯、oauth 等等,不同的应用场景也会需要使用到不同的签名加密算法,或者需要搭配不一样的 签名加密算法 来达到业务目标。这里简单的给大家介绍几种常见的签名加密算法和一些典型场景下的应用。数字签名又称公钥数字签名,是一种类似写在纸上的普通的物理签名,但是使用了公钥加密领域的技术实现,用于鉴别数字信息的方法。

2023-06-29 16:50:24 224

原创 vu3中使用vuedraggable拖拽插件【跨列表拖动】

在我的vue+vite项目中使用vuedraggable插件需要用到插槽,否则不生效,以下我的实现过程。官网中方法没有使用插槽,我不理解,期待大神指点一二。

2023-06-12 16:22:27 491

原创 vue项目答辩题目【第二弹】

单点登录(Single Sign-On,简称 SSO)是一种身份验证机制,允许用户使用一组凭据(例如用户名和密码)登录到多个应用程序或系统中,而不需要为每个应用程序或系统单独进行身份验证。这样可以提高用户体验和安全性。假设一个公司有多个应用程序,例如邮件系统、CRM系统、ERP系统等,每个应用程序都需要用户进行身份验证。如果用户需要登录多个应用程序,他们需要输入多次用户名和密码,这会降低用户体验和效率。使用单点登录,用户只需要登录一次,就可以访问所有应用程序。单点登录的实现需要使用一些标准协议和技术,例如:

2023-06-12 15:03:25 1375

原创 如何实现图片懒加载,如何实现图片懒加载的性能优化,如何判断元素是否在可视化区域

Vue3中实现自定义图片懒加载插件可以使用Vue3提供的自定义指令来实现。首先,我们需要在项目中安装库,它是用来监听元素是否进入视口的库。然后,我们可以创建一个lazyloadimport {在上面的代码中,我们创建了一个名为lazyload的指令,它会在元素进入视口时将src属性设置为指令的值,即图片的地址。我们使用来监听元素是否进入视口,当元素进入视口时,我们将src属性设置为指令的值,并停止监听该元素。最后,我们可以在模板中使用v-lazyload指令来实现图片懒加载,代码如下:

2023-06-05 09:32:16 845

原创 面对数据量大的情况如何进行优化?

分治算法是一种递归式的算法思想,它将一个大问题分解成若干个小问题,然后递归地解决每个小问题,最后将所有小问题的解合并起来得到大问题的解。在实现分治算法时,需要注意递归的终止条件和子问题的规模。如果子问题的规模太小,则递归的效率会变得很低,甚至可能导致栈溢出等问题。因此,需要根据具体问题的规模和复杂度来确定递归的终止条件和子问题的规模。哈希算法是一种将任意长度的消息压缩到某一固定长度的算法。它将输入数据(也称为消息)映射到固定长度的哈希值,通常是一个固定长度的二进制字符串。BitMap 算法是一种基于位运算。

2023-06-05 09:12:25 3340

原创 vue3+vite 中使用百度地图【两种方式】

点击发布后就能够获取到样式的id,还可以进行修改等操作。在详情页有新建选项,去创建自己的样式,并进行发布。进入地图选项,下滑页面,可以看到查看详情。

2023-05-25 09:49:40 4243 1

原创 【vue3】需要了解哪些【全】

总之,Vue3带来了更好的性能、更小的体积、更好的TypeScript支持、更好的组件封装和更好的响应式系统,使得开发者可以更加高效地开发Vue应用。系统:Vue3的响应式系统进行了重构,可以更好地处理嵌套对象和数组的变化,同时也提供了更多的API来处理响应式数据。watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性。computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值。

2023-05-24 16:14:59 940

原创 vuex的实现原理

当我们提交一个mutation时,Vuex会将这个mutation的类型和payload保存下来,并将其放入一个。,将这个mutation的类型和payload传递给订阅者,订阅者会根据mutation的类型和payload来。,当组件被创建时,它会自动订阅Vuex中的状态变化。当状态发生变化时,组件会自动更新自己的视图。Vuex的视图更新原理主要是基于响应式数据和发布订阅模式实现的。,然后对状态进行修改。的,当状态发生变化时,所有依赖这个状态的组件都会自动更新。在Vuex中,所有的状态都被存储在一个。

2023-05-23 10:14:35 655

原创 vue的路由的原理(自己封装一个vue-router插件)

Vue Router 是 Vue.js 官方的路由管理器,它和 Vue.js 的核心深度集成,可以非常方便地实现单页应用程序的路由功能两种模式:hash模式和history模式hash模式实现基础步骤:vueRouter作为一个插件 ,需要实现install方法,install方法中接收两个参数,一个是vue构造函数,另一个是使用**vue.use()**的时候传递的参数。然后我们去监听事件的变化,当hash值发生变化时,匹配对应的组件。这个时候我们需要封装一个match方法,

2023-05-22 17:19:45 623

原创 【面试官:开发vue项目都遇到过哪些问题怎么解决的?】

我参与了一个电商网站的前端开发项目,这个项目的难点在于需要实现复杂的购物车功能和支付流程,同时还需要考虑到用户体验和页面性能的优化。比如:为了用户可以更好的体验xxx,公司研发了xxx,该项目主要针对xx用户,由xxx和xxx系统或架构组成,由xx语言编写等等。比如:使用xx管理用例的编写,通过xx管理代码和版本,使用xx工具做了什么,我对该模块的工作使用了xx技术等等。比如:编写了xx个用例,发现了xx个bug,编写了xx行代码,利用xx工具做的测试结果,开发成果,评审结果等。

2023-05-12 11:52:37 876

原创 vue项目答辩题目【第一弹】

Animation和Translation都可以用来定义动画,但是它们的具体含义和使用方式略有不同。Animation通常指的是一系列连续的图像或对象,通过快速播放来创造出一种运动或变化的效果。在计算机图形学中,动画可以通过在一定时间内连续地显示一系列图像来实现。这些图像可以是手绘的,也可以是由计算机生成的。动画可以用于电影、电视节目、游戏等领域。Translation则是指将一个对象从一个位置移动到另一个位置的过程。

2023-05-11 12:01:16 2702

原创 微信小程序相关面试题

微信小程序自定义tabbar是指开发者可以自定义小程序底部导航栏的样式和功能,使其更符合自己的需求和品牌形象。通过自定义tabbar,开发者可以实现以下功能:自定义导航栏的样式,包括颜色、图标、文字等。实现导航栏的跳转功能,可以跳转到不同的页面。实现导航栏的切换功能,可以在不同的页面之间切换。实现导航栏的角标功能,可以在导航栏上显示未读消息数等信息。自定义tabbar需要在app.json文件中配置,通过设置tabBar属性来实现。

2023-04-27 07:46:20 1627

原创 常见的前端考试面试题目【vue,react,css,six】

严格模式是 ECMAScript 5 引入的一种 JavaScript 执行模式,它强制执行一些更严格的语法和行为规则,以提高代码的安全性和可靠性。变量必须先声明再使用,否则会抛出错误。禁止使用 with 语句。禁止删除不可删除的属性。函数的参数名不能重复。禁止使用八进制数字。对象字面量中属性名不能重复。函数不能有重名的参数。禁止使用 eval 函数。禁止 this 关键字指向全局对象。严格模式下,所有的变量都必须先声明再使用。

2023-04-17 07:54:29 3059

原创 Vue2和Vue3响应式原理【全】

响应式原理就是指的是MVVM的设计模式的核心,即数据驱动页面,一旦数据改- 变,视图也会跟着改动。vue2的响应式原理是由Object.defineProperty()实现的 (数据劫持)vue3的响应式原理是由es6中的Proxy所实现的 (数据代理)直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。(应当直接在 Object 构造器对象上调用此方法,而不是在任意一个 Object 类型的实例上调用。

2023-04-14 09:57:40 3255

原创 面试官:谈谈你对TypeScript有什么了解【全】

可以看到,如果只是掌握了 typeScript 的一些基础类型,可能很难游刃有余的去使用 typeScript,需要了解一些typescript的高阶用法并且typescript在版本的迭代中新增了很多功能,需要不断学习与掌握。

2023-04-10 14:19:46 711

原创 强缓存和协商缓存

Last-Modified 表示网页最后修改的时间,当浏览器向服务器请求数据时,服务器会比较浏览器发送的 If-Modified-Since 和 Last-Modified 值,如果相同,说明缓存有效,直接返回 304 Not Modified 状态码,让浏览器从缓存中获取数据;Expires 是一个绝对时间,它表示网页过期的时间,当浏览器向服务器请求数据时,服务器会比较当前时间和 Expires 所表示的时间,如果当前时间小于过期时间,说明缓存有效,直接返回浏览器缓存的资源;

2023-04-04 08:04:10 175

原创 常见的前端考试面试题目【react,javascript,five】

1.说说你对react的理解?有哪些特性?2.说说Real diff算法是怎么运作的3.说说React生命周期有哪些不同的阶段?每个阶段对应的方法是?4.说说你对React中虚拟dom的理解?5.说说你对react hook的理解?6.React组件之间如何通信?7.说说你对受控组件和非受控组件的理解?应用场景?8.说说Connect组件的原理是什么?9.说说react 中jsx语法糖的本质?10.说说你对redux中间件的理解?常用的中间件有哪些?实现原理?

2023-03-27 18:05:23 1481

原创 常见的前端考试面试题目【css,webpack,javascript ...】

是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台,屏幕尺寸,屏幕定向等)进行相应的响应和调整通过媒体查询检测不同的设备屏幕尺寸做处理,为了处理移动端,页面头部必须有meta声明viewport媒体查询百分比vw/vhrem 【1rem等于html的字体大小】px、em、rem和%的区别与总结1.px是固定长度单位,不随其它元素的变化而变化;

2023-03-24 19:11:22 808

原创 原生js模拟手机端注册页面,实现验证码倒计时功能

如果需要模拟发送短信的验证码,需要在后端使用腾讯云或阿里云的短信服务,具体操作可以查询哔哩哔哩!css与js相结合,前端使用原生的JavaScript。只在前端获取验证码的话可以使用随机数获取到,进行比对。

2023-03-24 17:13:29 301

原创 使用原生js+百度地图api实现获取当前地理位置

在百度地图获取到自己的百度地图ak,填到ak的位置。

2023-03-24 17:00:44 762

原创 知道react里面的createPortal么?说说使用场景。

【代码】知道react里面的createPortal么?说说使用场景。

2023-03-20 21:19:54 362

原创 浅谈useEffect的理解,可以模拟哪些生命周期?useEffect的依赖为引用类型如何处理?

我们将跟UI渲染无关的业务逻辑称之为副作用。useEffect是react在函数式组件里提供的副作用解决方案,它接受两个参数。第一个是必传参数,类型为函数。我们写在此函数中的业务逻辑代码就是我们所说的副作用。

2023-03-20 20:56:01 507

原创 什么是垂直外边距合并?说说合并后的几种情况?

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。实际工作中,垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距,而且只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题,IE下反而表现良好。

2023-03-20 20:36:28 186

原创 js节流与防抖

/ 防抖处理--拿到包装好的事件处理回调函数--回调函数的返回值是Promise。游戏中的一些设计–王者荣耀 英雄的普攻;//当用户不断触发事件按照2秒的频率执行。//当用户停止输入的时候延时2秒后执行。"Promise的返回值结果:""拿到真正执行函数的返回值:"用户频繁点击按钮操作;监听页面的滚动事件;

2023-03-18 09:07:21 62

原创 redux、react-redux、redux-thunk、redux-saga、@reduxjs/toolkit理解与使用,区别与使用场景?

无论你是一个全新的Redux用户设置你的第一个项目,还是一个有经验的用户谁想要简化现有的应用程序,Redux工具包可以使我们的的Redux代码更好。redux是react中进行state状态管理的JS库,一般是管理多个组件中共享数据的,它并不是react的插件,是一个独立的库vue和angular等等一些框架都是可以使用的。我们不能解决每一个用例,但本着创建-反应-应用的精神,我们可以尝试提供一些抽象的设置过程和处理最常见的用例的工具,以及包括一些有用的实用程序,让用户简化他们的应用程序代码。

2023-03-16 10:39:17 487

原创 React的props.children使用map函数来遍历会收到异常显示,为什么?应如何遍历?

主要是因为我们不能保证将是一个数组。

2023-03-16 08:59:29 312

原创 react新出来两个钩子函数是什么?和删掉的will系列有什么区别?react废弃了哪些钩子?为什么?

React16新的生命周期弃用了:新增了:新增的钩子函数能够代替弃用的三个钩子函数React16并没有删除这三个钩子函数,但是不能和新的钩子函getDerivedStateFromProps,getSnapshotBeforeUpdate数混用React17将会删除componentWillMount,componentWillReceiveProps,omponentWillUpdate新增了对错误的处理 componentDidCatch。

2023-03-15 20:59:15 671

空空如也

空空如也

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

TA关注的人

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