yunchong_zhao-CSDN博客

原创 js中[] + {}等于什么，以及为什么是这个结果(面试题)

那是因为数组中的 Array.prototype.toString() 方法覆盖了 Object.prototype.toString。很多同学可能知道 Object.prototype.toString({}) 会返回 [object Object]不然 Object.prototype.toString([]) 返回的是 [object Array]要我说其实这个问题并没有什么技术含量，工作中可能整个职业生涯也不会写出这样的业务代码来说是考察基础知识。有的同学可能碰见这样的面试问题。

2024-02-01 20:07:16 368

原创 js获取dom元素的宽度数值

有的时候我们需要依赖元素的具体的宽高数值，那这个时候就需要你来进行调用了相关的api进行获取了。更新到 1024篇博客退休。关注我持续更新前端知识。

2024-02-01 11:01:26 436

原创 dom监听元素从display: none到页面中

很多童鞋可能对原生js的不够熟悉，现在大多数同学只要会写简单的vue操作就可以做一些基础的前端工作了，然后就是查文档，其实更多的时间可以花在对自己js基础建设的。除了这个还有一个面试会经常问的是 IntersectionObserver 监听dom元素进入可视化区域，用这个api完成图片的懒加载，但今天主角又不是它嘿嘿，其实业务中还是会碰见这样的需求的，特别是一些框架内不，这个并不是很复杂，我们可以考虑如何去监听到 dom元素样式属性的变化就可以。今天要说的这个就是一个js api。

2024-01-31 11:23:45 492

原创 postcss-pxtorem实现页面自适应的原理

经过这个插件转化之后变成假设变成下面这样哈其他没啥子太大作用下面请允许我跑题讲讲其他的知识比如 750的设计稿上有宽度 375px宽度的元素那么它就会占用设备宽度的一半如果这个设计到了 375px的设备上我们再设置 375px的话那就会占满整个设备了。那么问题来了有没有什么单位可以让我在这两上面实现同样的效果呢当然有了。我们直接设置百分之50不就行了嘛聪明的boy，但是今天不说这个百分比宽度也不说那个视口宽度单位今天讲rem这个单位。

2023-12-07 11:43:01 1810

原创 requestAnimationFrame 实现倒计时功能

这个时间需要讲解下哈，这个精确的时间是DOMHighResTimeStamp类型， DOMHighResTimeStamp 是一个 double 类型，用于存储毫秒级的时间值。这种类型可以用来描述离散的时间点或者一段时间（两个离散时间点之间的时间差）。倒计时除了setInterval和递归的setTimeout实现外还可以通过requestAnimationFrame这个经常用来做动画的api来实现。其次就是这个api接受一个参数这个参数是一个回调函数，并在这个回调函数中传入一个精确的时间。

2023-12-06 11:24:12 1191

原创前端监听页面中的某些异常情况

最近也是越来越感觉到。随着工作时间的增长但是吧瓶颈其实也越来越明显。这样的话其实也挺危险的。如果要补获undefined其实也简单就可以用到 document.body然后获取之前的dom元素的字符串然后判断字符串中是否包含undefined。面试中也会问你如何监听页面中出现undefined或者null的情况并对服务器端上报。其实工作一定时间之后，对页面中某些异常情况的处理也要考虑到位了！最近公司招人，看到那么多优秀的人依然在找工作，哎一言难尽。这个也是进阶高级前端的一个步骤之一吧。

2023-12-05 15:29:50 1266

原创 CSS如何画出平行四边形

看起来样子怪怪的哈哈但是确实可以完成一些需求哈哈哈。这个就要用到一个css3转换的一个属性了 skew。其实如果项目中有这样的画图还是会用到的比如。注意这个再画一些梯形的问题中还是很有效果的哦。关注我持续更新前端知识前端学无止境。让一个元素再平面上进行倾斜。

2023-10-17 21:55:09 580

原创 css 如何让元素内部文本和外部文本一块显示省略号

核心的玩意就是这个。要使行内块元素文本和后面的文本内容底部对齐。实际上还是有这样的需求的。关注我持续更新前端知识。还是有这样的需求的哦。

2023-10-13 17:37:04 615

原创 vue中计算属性是否可以异步获取？

众所周知一般来说，这个计算属性是同步计算获取得到，这个也是计算属性的初衷，但是你要是非要在里面关联一些异步的东西也不是不可以哈。面试的时候，会问到这个问题，计算属性能不能涉及一些异步的东西，也不能一致头铁的说，必须不能，只能是同步。我们异步更改 name的数值。也并不是直接异步，可以通过其他的方式实现一种异步的计算方式。计算确实是同步的写法，但返回的数据可以走异步的情况。这个可能也是一种成长吧，加油吧和我一样的前端菜鸟。闲来无事继续耕我的一亩三分地。可能面试官想要的是这种回答吧。

2023-10-08 18:38:54 687

原创前端面试题： js中对比两个对象的值是否相等？ for..in 和 for...of的区别？

你敢说我下面的对象值不是想等的吗。但是你用JSON.stringify之后发现确实是不想等的。因为对象的key是无序的。of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。我去面试的时候会问这个问题，而且发现不管是初级还是工作一段时间的小伙伴都会说的不是很清晰。in循环之间的区别。而且也不用考虑那些 null 或者函数，正则这些只要考虑深层普通对象的比较即可。in 语句以任意顺序迭代对象的可枚举属性。of 语句遍历可迭代对象定义要迭代的数据。比如, 判断下面的对象值是否相等。

2023-09-28 17:33:54 306

原创常见的的数据结构

哈希表（Hash Table）：根据键（Key）直接访问值（Value）的数据结构，通过哈希函数将键映射到对应的存储位置。链表（Linked List）：由一系列节点组成的数据结构，每个节点包含数据和指向下一个节点的指针。队列（Queue）：一种先进先出（FIFO）的数据结构，只能在队尾插入元素，在队头删除元素。这些数据结构在不同的场景和问题中有不同的应用，选择合适的数据结构可以提高算法和程序的效率。树（Tree）：一种非线性的数据结构，由节点和边组成，每个节点可以有多个子节点。

2023-08-18 16:08:45 431

原创 vue2 如何监听数组的变化

需要注意的是，Vue 2只能监听到通过变异方法对数组进行的变化，而无法监听到直接修改数组某个元素或使用非变异方法（如filter、concat等）对数组进行的变化。具体来说，Vue 2使用了一个名为Observer的类来劫持数组的原型方法，使其在调用这些方法时能够触发相应的变化通知。在通知的过程中，Vue会遍历数组的所有观察者（Observer）并调用它们的更新方法，以更新相关的依赖。通过这种方式，Vue能够实时地捕获数组的变化，并及时更新相关的依赖，从而实现对数组的监听和响应。

2023-08-18 16:07:29 2926

原创前端网络相关知识(TCP和UDP的区别, TCP的三次握手)

TCP（传输控制协议）和UDP（用户数据报协议）是两种常用的互联网传输协议。它们在以下几个方面有所不同：连接性：TCP是面向连接的协议，而UDP是无连接的协议。TCP在通信之前需要建立连接，而UDP则直接发送数据包。可靠性：TCP提供可靠的数据传输，它使用确认和重传机制来确保数据的完整性和可靠性。UDP则不提供可靠性保证，它不会确认数据包的接收情况，也不会重传丢失的数据包。速度：由于TCP提供了可靠性保证，它的传输速度相对较慢。UDP则没有额外的确认和重传机制，因此传输速度较快。

2023-08-18 16:06:25 654

原创调整图片中的人物头像的位置(裁剪图片的时候)

其实调整图片的适应边框的属性我们首先会想到 object-fitobject-fit CSS 属性指定可替换元素（例如：或）的内容应该如何适应到其使用高度和宽度确定的框。

2023-08-03 16:23:58 458

原创预加载图片

懒加载虽好但是吧他有一个问题就是当图片稍微有些大的时候, 还是会出现加载过慢的原因。预加载代码倒是不复杂主要是在合适的时候调用这个比较有考究。这个时候我们就需要对某一些图片进行预加载了。关注我持续更新前端知识。

2023-07-26 16:26:13 69

原创 html2canvas h5生成海报有白边 (ios有效)

可以尝试这看看我的是用vw进行移动端适配的关注我持续更新前端知识。pc上没有这个问题大概率就是移动端设备高分辨的原因导致的吧。需要渲染上做处理同时也可以通过减少。

2023-07-26 15:25:19 223

原创 vue项目中每次让gif元素显示的时候从第一帧播放

我们只要保证每次加载这个gif的时候让浏览器重新加载就可以,让他认为这是一个新的。其实这玩意和文件的新鲜度有关,浏览器会默认缓存起来,然后采用上次的加载状态。其实我在思考这玩意要是在css中支持就好了。其实需要我们给gif后面加一个时间戳即可了。问题是css不支持 js的语法。关注我持续更新前端知识。

2023-07-20 16:02:24 379

原创使用alova上传文件 (content-type missing boundary )

我在未来还是很看好这个请求库的 , 毕竟要说实用性我感觉还可以很爽的前端童鞋还是要勇于接受新的事物. 即使它现在不用。这个请求库其实已经发布一年多了, 但是吧好像还是 axios 和 fetch原生称王称霸的时代,其实这里就不需要加那个东西因为你使用 formData 它浏览器就会自动帮你吧请求头类型加好。看到这个文章的童鞋我希望你们看看这个库,最好在新项目中使用下体验杠杠的。主要是我们使用 axios的时候习惯将。但是我用alova的时候习惯性也来这样做。

2023-07-18 16:29:36 952

原创 ios h5底部安全区适配

相信在ios 移动端开发h5前端童鞋肯定会知道就是很多ios款型的手机底部有一条黑色的杠杠。然后在你的悬浮元素上面加一个 .safe-area 即可完成了是不是很简单呢。或者白色哎就是会遮挡一部分我们的元素特别是底部需要悬浮一些按钮的时候。viewport-fit=cover 这玩意加到你的html头部。这个就是ios的底部安全区域对应的还有顶部的哈。要用到ios上面专用一些css 函数和变量。关注我持续更新前端知识。

2023-07-14 17:13:02 1698

原创 create-react-app中配置支持less

有的博客可能让你直接运行 npm run eject让后暴露出来webpack的配置文件然后在里面更改。// 在package.json文件中 react-scripts -> craco 需要更改下。你覆盖人家create-react-app中的默认webpack配置那么你也得需要一个配置文件了。webpack 和 @craco/craco 那你就换一种写法去官网看下最新的配置方法。其实吧上面的配置方法可能都不会生肖如果你的版本比较低的话。比如你要做的是 ant的主题定制等。

2023-07-12 10:17:17 974

原创 Module not found: Error: Can‘t resolve ‘child_process‘ in ‘/Users/***/node_modules/launch-editor‘

其实把我们碰见问题不要慌张，首先我的项目昨天肯定是好好运行的，今天突然不行了，说明代码肯定是那里有所变动。其实苦就苦在他不会告诉我们那个文件出了问题，就是webpack内部编译报错告诉我们出错了这个就很难受了。早上过来莫名其妙项目出了问题一直编译不通过，刚开始搞了一回也没分析道具体原因其实昨天还是好好的。这个时候我突然想起来昨天走的时候写了的一串代码没有本地跑直接盲写就走人了。我删掉之后就恢复正常了一开始我还想着实在不行代码回滚呢但那个是万不得已的方式。

2023-07-05 09:51:25 552

原创 @vueuse/core中的useClipboard 失效问题

如果也想本地使用的话推荐另外一款或者你自己封装了，其实你封装的大概率没有别人已经造好的并且测试很完善的轮子好。也并不算失效吧只是人家安全策略的问题，非https网页下面不让你拷贝。这个就导致了我们本地测试的时候也不能用了，上线就正常了。关注我持续更新前端知识这里是填坑之旅。

2023-06-21 11:41:17 888

原创 js随机生成一串可定长度的字符串（插件）

这样的业务场景还是比较常见的，比如随机密令，我们在渲染react或者vue列表的时候不想使用数组下标为key也没有合适的字段作为key。其实很多时候你可以自己去书写，但是只限于自己学习阶段可以这样搞，工作中还是最好使用别用已经封装和多次测试好的轮子使用。生成几位的字符串我们就传入数字就行了。关注我持续更新前端知识。介绍一款比较方便的插件。就要用到这样的场景了。

2023-06-21 10:31:52 191

原创 vueuse + element-plus 快速实现暗黑模式切换

然后在main.js中的引入element-plus的暗黑模式的样式文件即可。现在很多网站都支持两种模式的切换，实现起来依赖第三方插件很快就实现了。关注我持续更新前端。

2023-06-15 18:20:37 293

原创 vue3 h5开发， vue3移动端手势库

包括之前的那种的点击穿透的问题，对常人来说click事件300ms的延迟可能没啥子问题，但是前端优化方面考虑做h5的童鞋还是要考虑下。

2023-06-15 17:59:43 1456

原创 element-plus 修改主题色的一种方式(vite)

但是如果你要是想通过动态配置比如我点击按钮切换背景色这种那你就需要继续去研究了但根本上应该是通过更改这些颜色变量来实现的。然后就好了不用再main.js中引入你的样式文件，官网上说要引入好像是在vite中按需处理的话就已经算是引入了。随便一个地方创建一个覆盖element-plus自带的主题色的变量。主题色就变更成功了好像也没有那么复杂。element-plus 是用sass开发的。如果你的项目基于vite，先安装哈。好了关注我持续更新前端知识。

2023-06-15 11:39:13 806

原创 element-plus 中 el-upload 通过其他位置的点击触发选择文件功能

其实刚好还是有这样的需求的但是我看官网中的那个 handleStart很像解释的也很像但就是用不了难受死了。其实你要是看过vue源码的童鞋可能知道在组件实例中有一个 el属性是用来和实际dom的映射。大概率下面 el-upload下面会有封装的input元素。没办法只能自己通过click 点击的方式触发了。好了这下就可以了难受香菇。关注我持续更新前端知识。

2023-06-08 18:17:07 3075 3

原创 taro2.* h5项目 tabbar页面跳转到普通页面，如何通过浏览器返回

首先很离谱我不知道为啥跳转到普通页面非得要用 replace的方式进行替换。导致很多用户从tabbar首页跳转到登录的时候回不去了。我在想怎么能监听到路由的变化。找了半天还真给我找到了。关注我持续更新前端。

2023-06-07 19:35:27 422

原创浏览器客户端生成唯一标识码用来识别访问用户（偏门方法）

那个visitorId 就是唯一了就算刷新页面还是同一个不会变。其实吧唯一标识用户的方法获取mac地址或者ip地址比较唯一吧。但是好像很可惜 js好像获取不到。关注我持续更新前端知识。这里通过一个js库来实现哈。

2023-06-03 17:09:22 1070

原创 js中让函数只执行一次

在做项目的时候经常会碰见一些只允许我们请求一次的情况，当我们来回切页面或者切换tab的时候第一次切换可能需要我们请求数据。今天要讲的就是另一种思路了让函数在当前情况下只能执行一次，这个其实还比较简单我们可以利用闭包的知识来处理。但是当切换过之后就不需要再次请求数据了以往我们的做法可能判断这个页面有无数据或者是看是否是第一次点击。这里还要注意的是如果你的组件被卸载的话还是最好注意清理掉引用。查看打印的效果会发现只是打印了一次 hello world。

2023-06-02 21:17:23 1558

原创 css3中实现从子元素出发找到父元素

可能有的童鞋会有这种想法其实还确实有这种选择器就是伪类选择器。其实有很多伪元素选择器还是很强大 css往深处去也是很复杂的。通过span元素选中 p元素并加上一个边框。关注我持续更新前端知识。

2023-06-02 21:07:11 3005 1

原创 router-view多级嵌套，导致经常路由更新了但是页面并没有跳转

问题我下面的路由还是懒加载的，我都严重怀疑当我访问的时候我的路由并没有加载出来，终究还是我太菜了，因为随着项目的变大，路由的地址也是越来越长。我也不知道为什么原因所以我把路由的懒加载去掉之后恢复正常了。关注我持续更新前端知识。

2023-06-01 20:48:34 1071

原创 js中使用requestAnimationFrame 实现倒计时功能(简单秒数倒计时例子)，这个好像比想象中的更好用

对前端同学来说，可能经常要做到倒计时的功能，特别是一些电商的网站。或者做一些搞活动的页面，倒计时开始。就拿一个简单的例子吧就是获取验证码的倒计时一般来说就是60秒首先可能想到就是。

2023-05-30 22:43:17 898

原创 keep-alive 在vue-router@4.*中使用，缓存当前路由页面 vue3中使用

这东西还是挺有用的，毕竟有些页面的数据我们只用请求一次，而且请求方法一般都在Mounted中请求，在我们来回切换页面的时候，有的时候并不需要不停的刷新页面的数据，这个时候 keep-alive 就起到了很好的作用。这里也有一个tips 就是前端同学尽量还是做到，能减少请求就减少请求，比如一些数据的刷新能在本地操作就本地操作，不和服务端发生交互。前端日新月异的变化更新数据，不像隔壁的java jdk都更新到十几了 jdk8 还在用哎。关注我持续更新前端知识。缓存当前路由的所有页面。

2023-05-30 21:34:18 296

原创 vite中批量导入文件，以pinia状态管理为例

这里再啰嗦几句话，我觉得吧前端同学特别是工作一年以上还没怎么接触或者使用ts的童鞋，还是最好玩玩，可能刚上手比较痛苦，各种比较莫名其妙的报错，但当你真正慢慢熟悉就会发现它的方便和魅力所在。一般来说每个公司有自己架子习惯哈，这个会有所不同，所以一会看我的例子的时候首先看是否适合你的项目哈。vite中有一个批量导出的工具函数 import.meta.glob。每个项目不太一样哈，仅仅做参考例子，没有更好的只有适合的。回归正题，随着项目变大之后，状态管理文件也越来越多。拿单独的a文件举例 a.ts。

2023-05-19 11:26:35 887

原创 vite ts版本打包报错 Paths must either both be absolute or both be relative

我首先吧vue-tsc 这个插件更新到最新的版本，然后把打包生成的配置缓存文件删除下就是那个。很遗憾我也找不到路径那里错了，现在项目大起来根本没办法一个一个去翻找查看。从报错上看说路径要不相对要不绝对明显是路径那里引错了。tsconfig.tsbuildinfo 这个文件哈。真的是奇怪哈，希望大家都不要碰见稀奇古怪的问题。很莫名其妙，之前打包都好好的突然就报错了。翻了国内外的文档也没找到合适的答案。我直接说我这个最后处理的方法吧。关注我持续更新前端知识。然后重新打包就可以。

2023-05-15 10:38:30 525

原创 umi4中修改网站icon 图标

其实在开发umi项目中很重要的一项就是看文档,特别是umi的配置文档,但是吧有些时候一些配置看起来一言难尽。但是这个图标的位置就很有学问了他是针对根目录的所以如果你按照文档上的来的话。关注我持续更新前端相关知识。

2023-05-14 15:25:13 673

原创 umi4中设置环境变量

对于vue或者umi3同学可能熟悉哈我这一年多没有搞过react项目的了,一上来环境变量就把我搞的有点懵了还好之前才过很多坑了。umi3中可能是在config中进行配置的 umi4 来通过.umirc配置文件。注意如果是ts文件的话要声明下类型哦否则在组件中使用就会抱提示错误。你在umirc文件统计目录下长江一个 .umirc.test.ts。文件最方便的方式就是 copy下 umirc文件改下名字即可。在src文件下创建一个 types.d.ts 生命文件。支持跨平台配置环境变量。

2023-05-14 15:19:52 520

原创使用gsap实现长文本文字,一个一个文字逐个弹出来效果

代码很简单,主要是各种配置需要你自己找去理解,和echarts 有点类似的用法。先看效果吧,其实要做动画可以了解了解这个动画库。关注我持续更新前端知识。

2023-05-05 11:43:47 228

原创在vite中使用mockjs， vite中使用vite-plugin-mock

然后还有一个小建议就是最新版本的插件也就是 3.0.0 有可能报 esbuild 就是大概你用到commonJS中的reuqired方法报错。这里插一句哈，如果你使用的是pnpm的话，正常来说因为这个插件肯定是依赖mockjs 的但是，他可能不会自动安装。推荐一个更强大的功能齐全的还是使用 apifox吧上面更方便，根据后端文档所定的mock。相信前端同学都会碰见类似的问题，就是页面可能很快写完了，但是接口同学还在缓慢设计表中！这个时候咳咳，你就可以去摸鱼了或者看小说了。关注我持续更新前端知识。

2023-04-24 16:14:10 677