自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 前端CSS经典面试题总结

2.1 介绍一 下 CSS 的盒子模型?2.2 css 选择器优先级?2.3 垂直居中几种方式?2.4 简明说一下 CSS link 与 @import 的区别和用法?2.5 rgba和opacity的透明效果有什么不同?2.6 display:none和visibility:hidden的区别?2.7 position的值, relative和absolute分别是相对于谁进行定位的?2.8 画一条0.5px的直线?2.9 calc, support, media各自的含义及用法?

2023-05-12 20:12:25 2348

原创 经典HTML前端面试题总结

1. 1简述一下你对 HTML 语义化的理解?1.2 标签上 title 与 alt 属性的区别是什么?1.3 iframe的优缺点?1.4 href 与 src?1.5 HTML、XHTML、XML有什么区别1.6 知道img的srcset的作用是什么?1.7 link和@import的区别?1.8 谈谈对BFC的理解 是什么?1.9 html5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器谦容问题?如何区分HTML和HTML5?1.10 浏览器的内核分别是什么?

2023-05-12 20:06:58 1189

原创 react-draggable实现拖拽详解

在页面中导入react-draggable。2. 初始化开始位置。

2023-03-04 19:51:48 4863 1

原创 ![] == ![],![] == [],结果是什么?为什么?

3、根据上面提到的规则(如果一个操作数是对象,另一个操作数不是,则调用对象的valueOf()方法,用得到的基本类型值按照前面的规则进行比较,如果对象没有valueOf()方法,则调用 toString())2、根据上面提到的规则(如果有一个操作数是布尔值,则在比较相等性之前先将其转换为数值——false转换为0,而true转换为1),则需要把 false 转成 0。也就是 [] ==![] 相当于 [] == false 相当于 [] == 0。也就是 [] == 0 相当于 ‘’ == 0。

2023-02-09 14:14:37 514

原创 umi中AssertionError [ERR_ASSERTION]: filePath not found of

AssertionError [ERR_ASSERTION]: filePath not found of,AssertionError [ERR_ASSERTION]: filePath not found of D:/a_umi_info/git_ERP/ERP_app_umi/node_modules/antd/dist/antd.less

2023-02-02 19:46:47 7212 3

原创 对 Iterator, Generator 的理解?

Iterator 是一个循环接口,任何实现了此接口的数据都可以被 for of 循环遍历Generator 是一个可以暂停和继续执行的函数,他可以完全实现 Iterator 的功能,并且由于可以保存上下文,他非常适合实现简单的状态机。另外通过一些流程控制代码的配合,可以比较容易进行异步操作。Async/Await 就是generator进行异步操作的语法糖。而这个语法糖反而是被使用最广泛的,比如著名的 Koa。

2023-05-17 10:57:02 1115

原创 伪类和伪元素的区别?

伪元素以“::”符号开始,并指定需要样式化的元素的特定部分,比如基本的 ::before 和 ::after 两个伪元素就是用来在目标元素前后添加内容的。是在 CSS3 中引入的,用于描述元素的一些动态的和行为相关的状态。伪类常用于根据用户的操作或当前文档的状态来应用样式,例如 :hover、:active、:focus 等等。伪类和伪元素是CSS中的两种特殊方式,可以对HTML元素添加一些不同于普通选择器样式的显示效果。::before(元素前插入)::after(元素后插入):hover(悬停)

2023-05-15 16:16:13 1251

原创 跨域时怎么处理 cookie?

结果很意外,请求的响应被浏览器拦截了,浏览器还贴心的在console上抛出了一个错误。这里要注意,浏览器不是在请求阶段就对请求进行拦截,而是正常发出请求,拿到服务端的响应之后,开始查看响应header里面有没有Access-Control-Allow-Origin这个header,如果没有,响应的结果就不会到js那里去。登录是基于session的,也就是说,登录成功后,server会通过set-cookie,将cookie设置到浏览器中,这样,下次访问同源下的api时,cookie就会被带上。

2023-05-11 11:58:04 1391

原创 说说你的ES7-ES12的了解

Promise.allSettled():Promise.allSettled()方法接收一个promise数组并返回一个promise并行,在所有promise都已解析或被拒绝后。String.prototype.matchAll():match()只返回匹配到的第一个结果,而matchAll()返回一个迭代器,可以匹配出所有结果。Promise.any():Promise.any() 方法表示只要传入的 Promise 其中之一变成fulfilled 状态,就可以继续操作。

2023-05-09 10:33:51 309

原创 分片上传和断点续传的区别?实现思路是什么?

虽然分片上传和断点续传都基于把数据切分成小块,并结合特殊技术来处理,但是它们的应用场景略有不同。分片上传针对的是单个大文件的上传,而断点续传主要用于文件传输中的断点续传,满足用户在大文件上传/下载的过程中,网络出现异常时能够恢复上传或下载任务,节约时间和流量。

2023-05-09 08:54:25 857

原创 rgba和opacity的透明效果有什么不同?

透明计算方式不同:在浏览器渲染时,当元素使用rgba设置透明度时,计算方式是通过将该元素与其下方的背景色混合来实现的,这意味着元素的透明度也可以影响到下面的元素。rgba和opacity的兼容性问题:opacity是CSS2规范中的属性,对于所有支持CSS2的浏览器都有较好的兼容性,而rgba则是CSS3中的属性,在一些旧版本的浏览器中可能会出现兼容性问题,需要额外做一些兼容性处理。应用场景不同:由于rgba可以更精确地控制元素的透明度,因此它更适合处理需要不同透明度的颜色背景。

2023-05-09 08:47:45 719

原创 微信小程序rich-text富文本 解决图片超出屏幕宽度

使用正则将数据中https://img-blog.csdnimg.cn/a49b804bc3e546b6a9d9cb454ca3fde5.png的img标签定义class或者直接写样式。再js文件中将数据进行修改。

2023-03-27 16:54:26 1553

原创 微信小程序自定义组件生命周期有哪些?

需要注意的是,自定义组件的生命周期函数和小程序页面的生命周期函数有所不同,编写组件时需要注意各个生命周期函数的执行顺序和时机,并根据实际需求进行相应的操作和处理。同时,在组件的生命周期函数中,也可以使用 this.setData 方法来更新组件的数据,从而实现视图的更新和交互效果。

2023-03-23 20:20:59 1200

原创 微信小程序事件通道使用教程

需要注意的是,在使用事件通道时,传递的数据类型应该符合小程序的数据格式要求,避免出现无法解析的数据格式或类型错误。同时,在事件通道中,建议使用常量或字符串作为事件名称,便于开发人员进行维护和管理。通过事件通道,一个页面或组件可以向事件通道发送一个事件,其他页面或组件可以通过监听该事件来获取消息并进行相应处理。微信小程序事件通道(事件总线)是用于在小程序多个页面或组件之间通过触发事件进行通信的机制。

2023-03-23 20:01:50 1216

原创 web-view是什么

中无法直接访问小程序内的数据,也无法直接调用小程序API,需要通过特定方式与小程序进行交互。同时,为了保证用户体验和安全性,小程序会对 web-view 加载的页面进行一定的限制,例如禁止加载恶意网址和拦截指定的JS操作。web-view 是一个自定义元素,它允许您在应用程序中显示网页。它是在 Electron 中实现的,而不是在浏览器中。web-view是微信小程序提供的一个组件,用于在小程序中展示网页。使用该组件可以在小程序中集成第三方网站或页面,实现更加丰富的功能和交互体验。

2023-03-23 19:55:58 842

原创 app.json 文件内容错误] app.json: [“usingComp<van-icon name=“https://b.yzcdn.cn/vant/icon-demo-1126.png“ />

如果是从官网复制的代码按照他的格式直接粘贴的:如下可能会提示你找不到该文件夹包,

2023-03-22 16:26:31 232

原创 微信小程序与H5的区别?

用户粘性:小程序具有强大的用户粘性,因为用户可以直接在微信中打开并使用小程序,无需下载安装。用户体验不同:微信小程序可以提供更加原生化的用户体验,例如可以使用微信支付、微信分享等,而H5则需要通过第三方库或API来实现。推广方式不同:微信小程序可以通过微信公众号、微信朋友圈等途径进行推广,而H5则需要通过搜索引擎、社交媒体等途径进行推广。开发语言不同:微信小程序使用的是WXML、WXSS和JS,而H5使用的是HTML、CSS和JS。运行环境:小程序需要在微信客户端中运行,而H5则是在浏览器中运行。

2023-03-21 20:27:28 1057

原创 小程序和Vue写法的区别

b,在小程序中:编写子组件、子组件的json文件中,将该文件声明为组件、父组件的json文件中,在usingComponents填写子组件的组件吗及路径、在父组件中直接引用即可。b,在小程序中:在父组件中直接赋值给一个变量,在子组件中properties中,接收传递的值 3)父组件想要调用子组件的方法。组件化方式不同:小程序的组件化方式是基于模板和样式的,而Vue的组件化方式是基于组件的。路由方式不同:小程序的路由方式是基于页面栈的,而Vue的路由方式是基于URL的。

2023-03-21 20:16:28 2633 1

原创 微信小程序可以进行dom操作吗?

原因:在小程序中,渲染层和逻辑层是分开的,分别运行在不同的线程中,逻辑层运行在 JSCore 中,并没有一个完整浏览器对象,因而缺少相关的DOM API和BOM API。

2023-03-21 19:14:55 3215

原创 2023前端面试题(经典面试题)

在vue中引入了scoped这个概念,scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式,使用了data-v-hash的方式来使css有了它对应模块的标识,这样写css的时候不需要加太多额外的选择器,方便很多。如果computed属性的属性值是函数,那么默认使用get方法,函数的返回值就是属性的属性值;compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。

2023-03-20 21:05:23 1395

原创 如何把一个对象变成可迭代对象?

可迭代对象(Iterable object)是数组的泛化,这个概念是在说任何对象都可以被定制为可在 for…of 循环中使用的对象。也就是说,可以应用 for…of 的对象被称为 可迭代对象。

2023-03-20 20:26:54 634

原创 React18新特性

React 团队在 2022 年 3 月 29 日正式发布了 React 的第 18 个版本。我将在这篇文章里简单介绍 React 18的新特性,React Concurrent Mode(并发模式)的实现,以及简要的升级指南。

2023-03-20 20:21:36 439

原创 对于浏览器内核的理解

经常听说各种不同的浏览器,IE、Opera、Firefox、Safari、The World还有现在的Chrome等。看似许多不同的浏览器,其实其中还是有很多相似之处。今天,我们就来了解他们的内核~!那内核是什么呢?内核只是一个通俗的说法,其英文名称为“”,翻译过来就是“排版引擎”,也被称为“页面渲染引擎”(下文中各种说法通用)。它负责取得网页的内容(HTML、XML、图像等等)、整理信息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。

2023-03-20 20:13:40 371

原创 Promise与async/await的区别?

从字面意思上很好理解,async是异步的意思,await有等待的意思,而两者的用法上也是如此。async用于申明一个function是异步的,而await 用于等待一个异步方法执行完成。async和await是用来处理异步的。async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。async 是“异步”的简写,而 await 可以认为是 async wait 的简写。3、await 后面紧跟着的最好是一个耗时的操作或者是一个异步操作(方法)。

2023-03-20 20:01:31 814

原创 路由动画切换( 左移,右移)

2、在入口文件处判断to和from中的index值大小,来进行路由动画的切换。1、 在router路由表中定义meta属性中的index,用index值来判断是左移还是右移。

2023-03-15 11:12:48 287

原创 json-server单独使用或者在react中进行使用

在该文件夹下定义db.json文件。

2023-03-10 15:32:42 599

原创 css3动画属性

transform:translate3d(value,value,value) // x轴 、y轴 、z轴。border-radius:value value value value // 左上 右上 右下 左下。: transform:scale(value,value) // 水平 垂直。transform:skew(value,value) // 水平 倾斜。border-radius:value value // 左上右下 右上左下。border-radius:value // 四角。

2023-03-10 07:46:09 487

原创 JS原生代码编写获取当前页面高度和触发滚动事件

【代码】JS原生代码编写获取当前页面高度和触发滚动事件。

2023-03-08 10:08:57 420

原创 对React Native的了解?

是一个由Facebook于2015 年 9 月发布的一款开源的,它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。它既保留了 React 的开发效率,又同时拥有 Native 应用的良好体验,加上Learn Once。

2023-03-07 21:04:02 369

原创 如何实现jwt鉴权机制之详解

声明算法的字段名为alg,同时还有一个typ的字段,默认JWT即可。JWT(JSON Web Token),本质就是一个字符串书写规范,如下图,作用是用来在用户和服务器之间传递安全可靠的信息。在分布式系统中,每个子系统都要获取到秘钥,那么这个子系统根据该秘钥可以发布和验证令牌,但有些服务器只需要。一旦前面两部分数据被篡改,只要服务器加密用的密钥没有泄露,得到的签名肯定和之前的签名不一致。签名是对头部和载荷内容进行签名,一般情况,设置一个。载荷即消息体,这里会存放实际的内容,也就是。的数据声明,例如用户的。

2023-03-07 20:57:50 428

原创 简述下 React 的事件代理机制?

React 并不会把所有的处理函数直接绑定在真实的节点上。而是把所有的事件绑定到结构的最外层,使用一个统一的事件监听器,这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。当组件挂载或卸载时,只是在这个统一的事件监听器上插入或删除一些对象。当事件发生时,首先被这个统一的事件监听器处理,然后在映射里找到真正的事件处理函数并调用。这样做的优点是解决了兼容性问题,并且简化了事件处理和回收机制(不需要手动的解绑事件,React 已经在内部处理了)。但是有些事件 React 并没有实现,比如。

2023-03-07 20:43:36 309

原创 获取dom节点与页面顶部的高度 +平滑的自动上拉到页面顶部

【代码】获取dom节点与页面顶部的高度 +平滑的自动上拉到页面顶部。

2023-03-05 19:37:39 224

原创 vue中使用json-server

1.安装json-server的两个依赖npm -g i json-servernpm install -g json-server2.安装axios依赖npm i axios3.全局导入axios使用src目录下main.js文件内import axios from ‘axios’;4.配置全局默认地址:src目录下main.js文件内axios.defaults.baseURL = ‘http://localhost:8081’5.创建一个json文件夹,json文件夹内新创一个data.jso

2023-03-05 19:26:50 1376

原创 react中使用百度地图报错:‘BMapGL‘ is not defined no-undef解决方法

在BMapGL前加个window即可,就出来了

2023-03-05 19:18:29 1071

原创 react路由传参的三种方式(易理解)

【代码】react路由传参的三种方式(易理解)

2023-03-04 08:37:55 739

原创 渐进增强和优雅降级之间的区别

而将那些被认为过时或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 IE、Mozilla 等)的前一个版本。内容是建立网站的诱因,有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。(1)渐进增强(progressive enhancement):主要是针对低版本的浏览器进行页面重构,保证基本的功能情况下,再针对高级浏览器进行效果、交互等方面的改进和追加功能,以达到更好的用户体验。

2023-03-02 20:32:18 96

原创 state 和 props 触发更新的生命周期分别有什么区别?

注意:此方法仅作为性能优化的方式而存在。不要企图依靠此方法来“阻止”渲染,因为这可能会产生 bug。应该考虑使用内置的 PureComponent 组件,而不是手动编写 shouldComponentUpdate()

2023-02-28 21:15:01 706

原创 React循环DOM时为什么需要添加key

所以在每次更新的时候,React需要基于这两颗不同的树之间的差别来判断如何有效的更新UI,如果一棵树参考另外一棵树进行完全比较更新,那么即使是最先进的算法,该算法的复杂程度为 O(n3),其中 n 是树中元素的数量,如果在React中使用了该算法,那么展示1000个元素所需要执行的计算量将在十亿的量级范围,这个开销太过昂贵了,React的更新性能会变得非常低效;在下面这种场景下,key为"星际穿越"和"盗梦空间"的元素仅仅进行位移,不需要进行任何的修改;的不变,这种低效的比较方式会带来一定的性能问题,

2023-02-28 20:54:31 110

原创 mongoose + express写自查寻接口时,以递归格式多级查询或aggregate查询

【代码】mongoose + express写自查寻接口时,以递归格式多级查询或aggregate查询。

2023-02-27 15:56:23 184

原创 package.json详情解释,且他有什么规则?

我们在开发过程时经常会跟package.json打交道,它主要是描述当前项目的信息,包括项目名称,项目的版本,依赖包,作者,主入口,描述等等。我们安装依赖的时候,也是根据package.json的依赖版本去安装对应的依赖。所以说当接手一个项目的时候,我们首先先去看看它的,通过这个先对这个项目有一个基本的了解。

2023-02-26 18:59:31 239

中午吃什么呢?吃饭随机抽取小工具

中午吃什么呢,随机选择一下吧,对于选择恐惧症来说,将你想要吃的物品名称写道文件中,并且已空格的形式将其分开,那么你就得到了一个可以进行替代你进行选择的一个小工具,简单轻便好用,欢迎大家来使用我这个随机点击器

2023-03-07

空空如也

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

TA关注的人

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