- 博客(938)
- 资源 (6)
- 收藏
- 关注
原创 图片加水印,前端的方式
图片实现水印的方式,面试其实也是会被问到的,实现的原理就是通过canvas把图片绘制出来,同时在上面绘制出文字就可以了。// 替换为你的图片路径。关注我 持续更新前端知识。// 设置水印文本样式。还是比较简单的吧 嘿嘿。
2024-08-07 16:14:06
228
原创 css3实现水纹进度条
其实有一个mask-image属性 挺有意思,在元素上面实现遮罩层的效果,不过这玩意有些兼容性问题 需要处理,所以单纯可以通过渐变色的方式来实现 同时加上动画效果。距离1024 还差一百多篇吧 加油。pdf制作有点麻烦 搞了个截图。
2024-06-26 18:40:25
360
原创 js中[] + {}等于什么,以及为什么是这个结果(面试题)
那是因为 数组中的 Array.prototype.toString() 方法覆盖了 Object.prototype.toString。很多同学可能知道 Object.prototype.toString({}) 会返回 [object Object]不然 Object.prototype.toString([]) 返回的是 [object Array]要我说其实这个问题 并没有什么技术含量,工作中可能整个职业生涯也不会写出这样的业务代码来 说是考察基础知识。有的同学可能碰见这样的面试问题。
2024-02-01 20:07:16
411
原创 js获取dom元素的宽度数值
有的时候我们需要依赖元素的具体的宽高数值,那这个时候就需要你来进行调用了相关的api进行获取了。更新到 1024篇博客 退休。关注我 持续更新前端知识。
2024-02-01 11:01:26
557
原创 dom监听元素 从display: none到页面中
很多童鞋可能对原生js的不够熟悉,现在大多数同学 只要会写简单的vue操作 就可以 做一些基础的前端工作了,然后就是查文档,其实更多的时间可以花在对自己js基础建设的。除了这个还有一个 面试会经常问的是 IntersectionObserver 监听dom元素进入可视化区域,用这个api完成图片的懒加载,但今天主角又不是它嘿嘿,其实业务中还是会碰见这样的需求的,特别是一些框架内不,这个并不是很复杂,我们可以考虑如何去监听到 dom元素样式属性的变化就可以。今天要说的这个就是一个js api。
2024-01-31 11:23:45
675
原创 postcss-pxtorem实现页面自适应的原理
经过这个插件转化之后变成假设变成下面这样哈其他没啥子太大作用下面请允许我跑题讲讲其他的知识比如 750的设计稿上 有宽度 375px宽度的元素 那么它就会占用设备宽度的一半如果这个设计到了 375px的设备上 我们再设置 375px的话 那就会占满整个设备了。那么问题来了 有没有什么单位 可以让我在这两上面实现同样的效果呢当然有了。我们直接设置 百分之50不就行了嘛聪明的boy,但是今天不说这个百分比宽度 也不说那个视口宽度单位今天讲rem这个单位。
2023-12-07 11:43:01
2061
原创 requestAnimationFrame 实现倒计时功能
这个时间需要讲解下哈,这个精确的时间 是DOMHighResTimeStamp类型, DOMHighResTimeStamp 是一个 double 类型,用于存储毫秒级的时间值。这种类型可以用来描述离散的时间点或者一段时间(两个离散时间点之间的时间差)。倒计时除了setInterval和递归的setTimeout实现外 还可以通过requestAnimationFrame这个经常用来做动画的api来实现。其次就是这个api接受一个参数 这个参数是一个回调函数,并在这个回调函数中传入一个精确的时间。
2023-12-06 11:24:12
1373
原创 前端监听页面中的某些异常情况
最近也是越来越感觉到。随着工作时间的增长但是吧 瓶颈其实也越来越明显。这样的话 其实也挺危险的。如果要补获undefined其实也简单 就可以用到 document.body然后获取之前的dom元素的字符串 然后判断字符串中是否包含undefined。面试中也会问 你如何监听页面中出现undefined或者null的情况 并对服务器端上报。其实工作一定时间之后,对页面中某些异常情况的处理也要考虑到位了!最近公司招人,看到那么多优秀的人 依然在找工作,哎 一言难尽。这个也是进阶高级前端的一个步骤之一吧。
2023-12-05 15:29:50
1289
原创 CSS如何画出平行四边形
看起来样子怪怪的 哈哈 但是确实可以完成一些需求哈哈哈。这个就要用到一个css3转换的一个 属性了 skew。其实如果项目中有这样的画图 还是会用到的比如。注意这个再画一些梯形的问题中还是很有效果的哦。关注我 持续更新前端知识 前端学无止境。让一个元素再平面上进行倾斜。
2023-10-17 21:55:09
646
原创 css 如何让元素内部文本和外部文本 一块显示省略号
核心的玩意就是这个。要使行内块元素文本 和后面的文本内容底部对齐。实际上还是有这样的需求的。关注我持续更新前端知识。还是有这样的需求的哦。
2023-10-13 17:37:04
637
原创 vue中计算属性是否可以 异步获取?
众所周知一般来说,这个计算属性是同步计算获取得到,这个也是计算属性的初衷,但是你要是非要在里面 关联一些异步的东西也不是不可以哈。面试的时候,会问到这个问题,计算属性能不能涉及一些异步的东西,也不能一致头铁的说,必须不能,只能是同步。我们异步更改 name的数值。也并不是直接异步,可以通过其他的方式实现一种异步的计算方式。计算确实是同步的写法,但返回的数据可以走异步的情况。这个可能也是一种成长吧, 加油吧和我一样的前端菜鸟。闲来无事继续 耕我的一亩三分地。可能面试官想要的是这种回答吧。
2023-10-08 18:38:54
860
原创 前端面试题: js中对比两个对象的值是否相等? for..in 和 for...of的区别?
你敢说我下面的对象 值不是想等的吗。但是你用JSON.stringify之后发现确实是不想等的。因为对象的key是无序的。of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。我去面试的时候会问这个问题, 而且发现不管是初级还是工作一段时间的小伙伴 都会说的不是很清晰。in循环之间的区别。而且也不用考虑那些 null 或者 函数,正则这些 只要考虑深层普通对象的比较即可。in 语句以任意顺序迭代对象的可枚举属性。of 语句遍历可迭代对象定义要迭代的数据。比如, 判断下面的对象值是否相等。
2023-09-28 17:33:54
339
原创 常见的的数据结构
哈希表(Hash Table):根据键(Key)直接访问值(Value)的数据结构,通过哈希函数将键映射到对应的存储位置。链表(Linked List):由一系列节点组成的数据结构,每个节点包含数据和指向下一个节点的指针。队列(Queue):一种先进先出(FIFO)的数据结构,只能在队尾插入元素,在队头删除元素。这些数据结构在不同的场景和问题中有不同的应用,选择合适的数据结构可以提高算法和程序的效率。树(Tree):一种非线性的数据结构,由节点和边组成,每个节点可以有多个子节点。
2023-08-18 16:08:45
452
原创 vue2 如何监听数组的变化
需要注意的是,Vue 2只能监听到通过变异方法对数组进行的变化,而无法监听到直接修改数组某个元素或使用非变异方法(如filter、concat等)对数组进行的变化。具体来说,Vue 2使用了一个名为Observer的类来劫持数组的原型方法,使其在调用这些方法时能够触发相应的变化通知。在通知的过程中,Vue会遍历数组的所有观察者(Observer)并调用它们的更新方法,以更新相关的依赖。通过这种方式,Vue能够实时地捕获数组的变化,并及时更新相关的依赖,从而实现对数组的监听和响应。
2023-08-18 16:07:29
3577
原创 前端网络相关知识(TCP和UDP的区别, TCP的三次握手)
TCP(传输控制协议)和UDP(用户数据报协议)是两种常用的互联网传输协议。它们在以下几个方面有所不同:连接性:TCP是面向连接的协议,而UDP是无连接的协议。TCP在通信之前需要建立连接,而UDP则直接发送数据包。可靠性:TCP提供可靠的数据传输,它使用确认和重传机制来确保数据的完整性和可靠性。UDP则不提供可靠性保证,它不会确认数据包的接收情况,也不会重传丢失的数据包。速度:由于TCP提供了可靠性保证,它的传输速度相对较慢。UDP则没有额外的确认和重传机制,因此传输速度较快。
2023-08-18 16:06:25
676
原创 调整图片中的人物头像的位置(裁剪图片的时候)
其实调整图片的适应边框的属性我们首先会想到 object-fitobject-fit CSS 属性指定可替换元素(例如:或 )的内容应该如何适应到其使用高度和宽度确定的框。
2023-08-03 16:23:58
511
原创 预加载图片
懒加载虽好 但是吧他有一个问题就是当图片稍微有些大的时候, 还是会出现加载过慢的原因。预加载代码倒是不复杂 主要是在合适的时候调用这个比较有考究。这个时候我们就需要对某一些图片进行预加载了。关注我持续更新 前端知识。
2023-07-26 16:26:13
79
原创 html2canvas h5生成海报 有白边 (ios有效)
可以尝试这 看看 我的是用vw进行移动端适配的 关注我 持续更新 前端知识。pc上没有这个问题 大概率就是移动端设备 高分辨的原因导致的吧。需要渲染上做处理 同时也可以通过减少。
2023-07-26 15:25:19
302
原创 vue项目中 每次让gif元素显示的时候从第一帧播放
我们只要保证每次加载这个gif的时候让浏览器重新加载就可以,让他认为这是一个新的。其实这玩意和文件的新鲜度有关,浏览器会默认缓存起来,然后采用上次的加载状态。其实我在思考 这玩意要是在css中支持就好了。其实需要我们给gif后面加一个时间戳即可了。问题是css不支持 js的语法。关注我 持续更新 前端知识。
2023-07-20 16:02:24
525
原创 使用alova上传文件 (content-type missing boundary )
我在未来还是很看好这个请求库的 , 毕竟要说实用性 我感觉还可以 很爽的 前端童鞋还是要勇于接受新的事物. 即使它现在不用。这个请求库其实已经发布一年多了, 但是吧 好像还是 axios 和 fetch原生 称王称霸的时代,其实这里就不需要加那个东西 因为你使用 formData 它浏览器就会自动帮你吧请求头类型 加好。看到这个文章的童鞋 我希望你们看看这个库,最好在新项目中使用下 体验杠杠的。主要是 我们使用 axios的时候 习惯将。但是我用alova的时候 习惯性也来这样做。
2023-07-18 16:29:36
1071
原创 ios h5底部安全区适配
相信在ios 移动端开发h5前端童鞋 肯定会知道 就是 很多ios款型的手机 底部有一条黑色的杠杠。然后在你的悬浮元素上面加一个 .safe-area 即可完成了 是不是很简单呢。或者白色哎 就是会遮挡一部分我们的元素 特别是底部需要悬浮一些按钮的时候。viewport-fit=cover 这玩意加到你的html头部。这个就是ios的底部安全区域 对应的还有顶部的哈。要用到ios上面专用一些css 函数和变量。关注我 持续更新 前端知识。
2023-07-14 17:13:02
1911
原创 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
1071
原创 Module not found: Error: Can‘t resolve ‘child_process‘ in ‘/Users/***/node_modules/launch-editor‘
其实把我们碰见问题不要慌张,首先我的项目昨天肯定是好好运行的,今天突然不行了,说明代码肯定是那里有所变动。其实苦就苦在他不会告诉我们那个文件出了问题,就是webpack内部编译报错告诉我们 出错了 这个就很难受了。早上过来 莫名其妙项目出了问题 一直编译不通过,刚开始搞了一回也没分析道具体原因 其实昨天还是好好的。这个时候我突然想起来 昨天走的时候 写了的一串代码 没有本地跑 直接盲写 就走人了。我删掉之后就恢复正常了 一开始我还想着实在不行代码回滚呢 但那个是万不得已的方式。
2023-07-05 09:51:25
668
原创 @vueuse/core中的useClipboard 失效问题
如果也想本地使用的话 推荐另外一款或者你自己封装了,其实你封装的大概率没有别人已经造好的并且测试很完善的轮子好。也并不算失效吧 只是人家安全策略的问题,非https网页下面不让你拷贝。这个就导致了 我们本地测试的时候也不能用了,上线就正常了。关注我 持续更新 前端知识 这里是填坑之旅。
2023-06-21 11:41:17
1121
原创 js随机生成一串 可定长度的字符串 (插件)
这样的业务场景还是比较常见的, 比如随机密令,我们在渲染react或者vue列表的时候 不想使用数组下标为key也没有合适的字段作为key。其实很多时候 你可以自己去书写,但是只限于自己学习阶段可以这样搞,工作中还是最好使用别用已经封装和多次测试好的轮子使用。生成几位的字符串 我们就传入数字就行了。关注我 持续更新 前端知识。介绍一款比较方便的插件。就要用到这样的场景了。
2023-06-21 10:31:52
215
原创 vueuse + element-plus 快速实现暗黑模式切换
然后在main.js中的 引入element-plus的暗黑模式的样式文件 即可。现在很多网站都支持两种模式的切换 ,实现起来依赖第三方插件很快就实现了。关注我 持续更新 前端。
2023-06-15 18:20:37
356
原创 vue3 h5开发, vue3移动端手势库
包括之前的那种的点击穿透的问题, 对常人来说click事件300ms的延迟可能没啥子问题,但是前端优化方面 考虑做h5的童鞋还是要考虑下。
2023-06-15 17:59:43
1722
原创 element-plus 修改主题色的一种方式(vite)
但是 如果你要是想通过动态配置 比如我点击按钮切换背景色 这种 那你就需要继续去研究了 但根本上应该是 通过更改这些颜色变量来实现的。然后就好了 不用再main.js中引入你的样式文件, 官网上说要引入 好像是在vite中按需处理的话 就已经算是引入了。随便一个地方创建一个覆盖element-plus自带的主题色的变量。主题色 就变更成功了 好像也没有那么复杂。element-plus 是用sass开发的。如果你的项目基于vite,先安装哈。好了 关注我 持续更新前端知识。
2023-06-15 11:39:13
956
原创 element-plus 中 el-upload 通过其他位置的点击触发选择文件功能
其实刚好还是有这样的需求的 但是我看官网中的那个 handleStart很像 解释的也很像 但就是用不了 难受死了。其实你要是看过vue源码的童鞋 可能知道 在组件实例中有一个 el属性 是用来和实际dom的映射。大概率下面 el-upload下面会有封装的input元素。没办法只能自己通过click 点击的方式触发了。好了这下就可以了 难受香菇。关注我 持续更新前端知识。
2023-06-08 18:17:07
4105
3
原创 taro2.* h5项目 tabbar页面跳转到普通页面, 如何通过浏览器返回
首先很离谱 我不知道为啥 跳转到普通页面非得要用 replace的方式 进行替换。导致很多用户 从tabbar首页跳转到登录的时候 回不去了。我在想怎么能监听到路由的变化。找了半天还真给我找到了。关注我 持续更新前端。
2023-06-07 19:35:27
487
原创 浏览器客户端生成唯一标识码 用来识别访问用户 (偏门方法)
那个visitorId 就是唯一了 就算刷新页面 还是同一个 不会变。其实吧唯一标识用户的方法 获取mac地址或者ip地址比较唯一吧。但是好像很可惜 js好像获取不到。关注我 持续更新 前端知识。这里通过一个js库来实现哈。
2023-06-03 17:09:22
1321
原创 js中让函数只执行一次
在做项目的时候 经常会碰见一些 只允许我们请求一次的情况,当我们来回切页面 或者 切换tab的时候 第一次切换 可能需要我们请求数据。今天要讲的就是另一种思路了 让函数在当前情况下 只能执行一次,这个其实还比较简单 我们可以利用闭包的知识来处理。但是当切换过之后 就不需要再次请求数据了 以往我们的做法 可能判断这个页面有无数据 或者是看是否是第一次点击。这里还要注意的是 如果你的组件被卸载的话 还是最好 注意清理掉引用。查看打印的效果 会发现 只是打印了一次 hello world。
2023-06-02 21:17:23
1792
原创 css3中实现从子元素出发 找到父元素
可能有的童鞋会有这种想法 其实还确实有这种选择器 就是伪类选择器。其实有很多伪元素选择器还是很强大 css往深处去 也是很复杂的。通过span元素选中 p元素 并加上一个边框。关注我 持续更新前端知识。
2023-06-02 21:07:11
3882
1
原创 router-view多级嵌套,导致经常路由更新了 但是页面并没有跳转
问题我下面的路由还是懒加载的,我都严重怀疑 当我访问的时候 我的路由并没有加载出来,终究还是我太菜了, 因为随着项目的变大, 路由的地址也是越来越长。我也不知道为什么原因 所以我把路由的懒加载去掉之后 恢复正常了。关注我 持续更新前端知识。
2023-06-01 20:48:34
1181
原创 js中使用requestAnimationFrame 实现倒计时功能(简单秒数倒计时例子), 这个好像比想象中的更好用
对前端同学来说,可能经常要做到倒计时的功能,特别是一些电商的网站。或者做一些搞活动的页面,倒计时开始。就拿一个简单的例子吧 就是获取验证码的倒计时 一般来说就是60秒首先可能想到就是。
2023-05-30 22:43:17
1062
原创 keep-alive 在vue-router@4.*中使用, 缓存当前路由页面 vue3中使用
这东西还是挺有用的,毕竟有些页面的数据 我们只用请求一次,而且请求方法一般都在Mounted中请求,在我们来回切换页面的时候,有的时候并不需要不停的刷新页面的数据, 这个时候 keep-alive 就起到了 很好的作用。这里也有一个tips 就是前端同学尽量还是做到,能减少请求就减少请求,比如一些数据的刷新能在本地操作就本地操作,不和服务端发生交互。前端日新月异的变化更新数据,不像隔壁的java jdk都更新到十几了 jdk8 还在用 哎。关注我 持续更新前端知识。缓存当前路由的所有页面。
2023-05-30 21:34:18
376
原创 vite中批量导入文件, 以pinia状态管理为例
这里再啰嗦几句话,我觉得吧前端同学特别是工作一年以上还没怎么接触或者使用ts的童鞋,还是最好玩玩,可能刚上手比较痛苦,各种比较莫名其妙的报错,但当你真正慢慢熟悉就会发现它的方便和魅力所在。一般来说每个公司有自己架子习惯哈,这个会有所不同,所以一会看我的例子的时候首先看是否适合你的项目哈。vite中有一个批量导出的工具函数 import.meta.glob。每个项目不太一样哈,仅仅做参考例子,没有更好的只有适合的。回归正题,随着项目变大之后,状态管理文件也越来越多。拿单独的a文件举例 a.ts。
2023-05-19 11:26:35
997
原创 vite ts版本打包报错 Paths must either both be absolute or both be relative
我首先吧vue-tsc 这个插件更新到最新的版本,然后把打包生成的配置缓存文件 删除下 就是那个。很遗憾我也找不到路径那里错了,现在项目大起来 根本没办法一个一个去翻找 查看。从报错上看 说路径要不 相对要不绝对 明显是路径那里引错了。tsconfig.tsbuildinfo 这个文件哈。真的是奇怪哈 ,希望大家都不要碰见稀奇古怪的问题。很莫名其妙,之前打包都好好的 突然就报错了。翻了国内外的文档也没找到合适的答案。我直接说我这个最后处理的方法吧。关注我 持续更新前端知识。然后重新打包 就可以。
2023-05-15 10:38:30
576
原创 umi4中 修改网站icon 图标
其实在开发umi项目中很重要的一项 就是看文档,特别是umi的配置文档,但是吧 有些时候 一些配置看起来一言难尽。但是这个图标的位置 就很有学问了 他是针对根目录的 所以如果你按照文档上的来的话。关注我 持续更新 前端 相关 知识。
2023-05-14 15:25:13
1064
原创 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
610
基于PHP+MYSQL的电子商务系统有前后台和数据库(没有tp框架知识的慎重下载).rar
2019-10-22
轮播图资源,有需要的同学可以下载参考下.rar
2019-09-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人