- 博客(102)
- 问答 (3)
- 收藏
- 关注
RSS订阅
原创 一场优雅“面试“的感悟
今天经历了一个不同寻常的面试，那位面试官并没有问我一些所谓的输入一个‘url’地址会发生什么事情这个八股文问题。我虽然知道这个面试题很考察作为一个前端开发者的水平，但是在具体的项目场景中，我们并不会需要用到这个问题的答案，或者这样说，对于一个目前接触不深的前端初学者来说，这个问题对与当前水平的提升是很有限的。 和那些水平远高于自己的大佬聊天时，你会发现他们关注的点往往都不是你现在敲代码的能力，他们不会去扣一些你目前学习程度还暂时不了解的地方以凸显自己技术水平的高超，相反和他们交流时，他们更像一位领导
2022-05-28 00:05:37
322
6
原创 前端实现一个绕圆心转动的功能
今天遇到了一个有意思的需求，如何实现一个元素绕某一个点来进行圆周运动，用到了一些初高中的数学知识，实现起来还是挺有趣的，特来分享🎁。
2024-03-06 16:31:43
492
原创 前端调取摄像头并实现拍照功能
实现拍照的整体思路其实很简单，仅仅需要了解到视频其实也是一帧一帧画面构成的，而canvas恰好有捕捉当前帧的能力。预告：在下一篇会讲解如何实现扫一扫的功能，需要用到插件，感兴趣的同学可以先预习一下功课。🎁二维码扫码插件趁热打铁前端实现微信扫一扫的思路。
2023-10-18 18:42:35
943
原创 前端实现微信扫一扫的思路
本篇文章的关键点就是讲解了我在实现处理多张二维码的场景时的思路，利用canvas遮挡识别过的二维码这个思路是pbk-bin大佬最先想到的，在实现这个需求以后还是很感叹这个思路的巧妙。👏pbk-bin🎁～如果文章对你有帮助，不妨赠人玫瑰，手有余香，预计将会在下篇更新较为完整的微信扫一扫界面和功能。
2023-10-18 18:41:57
790
原创 如何实现多 Tab 同步登陆和退出
在真正的项目上，其实我还实现了从最后一张到第一张，或者从第一张到最后一张的无缝切换，但是讲解起来稍微有点复杂，会让文章变得冗长。所以计划本文只是讲解基础框架，如果有读者希望学习思路的话，我会在之后更新相关知识点🎁。
2023-06-30 09:17:04
432
原创 JavaScript进阶----《getter 和 setter 是什么》
在真正的项目上，其实我还实现了从最后一张到第一张，或者从第一张到最后一张的无缝切换，但是讲解起来稍微有点复杂，会让文章变得冗长。所以计划本文只是讲解基础框架，如果有读者希望学习思路的话，我会在之后更新相关知识点🎁。
2023-06-29 10:55:42
236
原创 巧用 overflow-scroll 实现丝滑轮播图
在真正的项目上，其实我还实现了从最后一张到第一张，或者从第一张到最后一张的无缝切换，但是讲解起来稍微有点复杂，会让文章变得冗长。所以计划本文只是讲解基础框架，如果有读者希望学习思路的话，我会在之后更新相关知识点🎁。
2023-06-26 15:49:43
391
原创 仿造 elementUI 实现一个下拉选择器
其实在日常开发中，组件库的功能虽然全，但是有些情况下我们仅仅只是用到了里面很少一部分的功能，这时候全部引进的话又显得很没有必要，这时候通过模仿组件库的功能来实现一个轻量级的组件还是非常有必要的。通过这着组件的设计和实现，又掌握了很多之前没接触过的知识。比如tabIndex失焦和聚集事件的优先级🎁。
2023-06-25 11:27:03
704
原创 30行代码实现通用无限列表函数
如果你之前不了解什么是无限列表，但是我敢保证你一定在不知情的情况下体验过这个。我们还拿B站举例子。如下图：你会发现，只有当你往下滚动后，这个页面的数据才会不断被填充，如果你留心的话，你会注意到右侧的滚动条会在快接近尾部的时候，又一次滑动到上面一点距离，那是因为后面那一部分数据是之后才加进来的。接下来让我们模拟一下这个场景，来告诉你这样设计的好处。后端直接返回100条数据后端只把最前面最新的数据返回。
2023-06-15 13:43:51
355
原创 面试官想看我写一篇关于“原型链”和“构造函数”深入理解的文章
写完本篇文章，其实自己也对原型链豁然开朗，自己之前的知识碎片今天都瞬间融合到了一起。希望大家可以真正理解new之后发生了什么，这是原型链的关键所在。
2023-03-18 18:55:01
586
1
原创 图解鼠标事件的 ScreenX ，LayerX，clientX，PageX，offsetX，X
这篇文章是由我随手做的笔记改编而来，笔记内容比较粗糙，转化为文章后个人感觉又重新复习了一遍，加深了很大的印象。如果该文章能帮助到一些人，也是一件幸事。可能我以后也会经常来翻阅自己的这篇文章～这几个属性确实容易搞混🤔。
2023-02-27 22:43:58
1439
原创 Vue3 如何实现一个带遮罩的 dialog 对话框
目前的代码只是一个很粗糙的实现，更加具体实用的功能还需读者根据自己项目的需求自行完成。下面是文件的代码。读者可根据需要自行查阅。import {} //dialog 消失的方法 }
2023-02-14 09:42:07
2300
1
原创 TS 函数重载你还不会？来！我教你
在引出函数重载之前我们需要了解一个前提知识，在 JS 里同一个函数是可以被声明多次的，结果是会优先采用最后一次的函数体。什么意思呢？如下图，这是一个.js文件，JS 不仅不会报错，并且还可以正常执行。然而在 TS 里这种方式是会引发类型报错的。虽然 TS 只是会提醒类型错误，不影响这个文件的最终运行。但是明眼人都可以看出哪种开发模式更加适合团队合作。很明显TS更加符合我们的直觉，不允许变量在同一作用域下多次赋值。所以 JS 是没有重载签名这个概念的，这是TS所给你带来的优势。
2023-02-13 09:30:43
3269
1
原创 你必须知道的 clientWidth, offsetWidth, scrollWidth.
这三个属性所对应的和都是同样的道理，在这里就不重复赘述了，希望读者可以自己举一反三自行推导这三个属性代表什么意思。从学习这几个属性的过程中才真正体会到：“看一千遍文档，不如自己动手实践一遍”的道理。还希望大家也可以跟着自己敲一敲，真的不难。与君共勉才是我写这篇文章的初衷～
2023-02-12 13:32:17
3806
原创 Vue3 如何实现一个函数式右键菜单(ContextMenus)
最近在实现一个window的全套UI，代码开源到了github。我会在之后一直更新类似的内容，包括拖拽的实现。赠人玫瑰，手有余香🌹。
2023-02-11 18:43:56
5759
3
原创 javaScript 进阶之路 --- 《手写“回调地狱”》
我相信有很多学习前端的小伙伴百分百遇到过这样的面试题： ---“为什么我们要用 Promise 去代替传统的回调函数？” 我相信有很多人都可以随口回答出：“为了避免回调地狱，因为回调地狱会带来xxx的后果....”ok，那么现在我问你，假设现在面试官让你实现一个 “回调地狱”。你脑子里的代码会是怎样的呢？我建议你停下来思考三分钟🤔...不要问为什么有这么令人无语的问题，因为这就是我实实在在的面试题之一。往下阅读之前，请自觉领取并完成阅读本文的前置任务（0/2）JS 代码运行机制加深理解回调函数。
2022-12-11 20:16:25
581
原创 javaScript 进阶之路 --- 《加深理解回调函数》
前言： 回想当初第一次看到“回调函数”这个名词的时候，真的快把我难哭了。所有视频教程在讲到某个知识点的时候，大概都会说一句：“啊，这里怎么办呢？这里我们就需要用到一个回调函数...”。等等，喂，关键是你还没讲什么是回调函数啊!，你让我怎么往下继续听啊...于是留下我一个人看着后面几十分钟的视频，但是脑子里还在纠结这个“回调函数”到底是什么玩意。注意： 本文的前提知识是你需要了解 href="https://juejin.cn/post/7172948984145641479">JS 的执行机制。我强烈建议你
2022-12-04 22:33:08
311
2
原创 js 代码的运行机制
前言： 自己从一开始学习 javaScript 的时候，踩过很多很多坑，初学之路上也问过很多大佬许多为什么...现在回过头感叹，当时问的某些问题确实是有一丢丢幼稚。但是作为一个过来者，我深知这些问题的对于很多“后来者”来说，同样是非常宝贵的经验。所以全文会以“假如我是一个初学者，如果当初有人这样告诉我，那么我大概也能明白”。的角度去解释每一个细小的知识点，让你一步一步进阶。作为一个淋过雨的人，想为后来者撑一把伞。一. 什么是即时编译型语言我相信每一个学习前端的都知道 JavaScript 是一门单线程解释型
2022-12-03 23:53:39
1075
原创 手把手教你实现一个防抖函数(debounce)
闭包不另开一篇文章讲解是讲不完的，并且阮一峰阮大的闭包讲解的已经很好了，我就不献丑了） 对于现在的场景简单来说，你可以这样理解。那么我们的 防抖 函数在这里的作用其实就是帮你把这个函数包装一下的意思，它并不会直接影响这个函数的内部逻辑，就像你的礼物包装一层包装纸🎁后，它本身是没有发生任何变化的。我仅仅只是想最后搜索 hanzhenfang 这几个关键词，但是我在输入每一个字符的时候，都会去后端请求一次，数据量小还好，如果数据量过大的话，由于前几次的请求都是毫无意义的，势必会造成性能和资源上的浪费。
2022-11-30 22:03:58
5275
1
原创 Vue3 如何实现一个全局搜索框
之所以不喜欢使用真代码去写文章而大量使用截图的原因是：我自己在搜索到自己想要的文章后，也会喜欢直接看有没有最后的成品代码，然后直接复制就拿过去用了，而往往忽略了自己动手去实现一遍才是真正理解了的过程。所以我写代码的时候，尽量不写特别复杂的逻辑，而写一些很简单的几行代码去实现某一个功能。是因为我希望你们真正带入自己的思考，和一步步体会这个实现过程，从而举一反三。如果你认真看了该文章，你也许会明白现在很多组件库的底层实现原理其实就是这样的，比如全局弹出的dialog，modal框等等。
2022-11-26 23:49:05
3524
1
原创 使用 Vue3 开发了四个月，回顾 emit 的用法
emit学习知识不要总觉得自己会了，或许你从一开始理解的就是错的，一定要保持一颗虚心的态度。真正的大师永远怀着一颗学徒的心。
2022-11-08 21:54:37
9733
2
原创 Vue3 你可能忽略的 v-model 的巧用
v-model双向绑定其实就是一个看作传递props和设定自定义事件的语法糖。没有什么很特别的地方。但是如果熟练使用起来的话，在开发通用组件的时候会更近得心应手。
2022-11-05 19:41:47
1975
原创 在实际工作开发中非常实用的几个 git 命令
前言：git 在实际开发过程中的重要性对在座的各位来说想必不用我过多赘述，但是对于 git 中千千万万复杂的命令来讲，在实际开发过程中只有小部分是最经常使用的，今天国庆节第一天，由于疫情原因没回家。但是 git reset --hard 命令不会将你修改的代码返回到你的暂存区，而是真正的删除了你撤销掉的 commit 记录。再执行一下 git log 看看，发现 gitlog 的内容，刚刚我们提交的那个 commit 确实已经消失了，HEAD 指向的 commit 也是上一条。你会发现光标聚焦到了底部。
2022-10-02 19:14:43
638
原创 Chrome浏览器是如何工作的？（二）
其根本原因就是： Transform 属性完成的动画不会重新 Layout 和 Layer，而是直接运行在合成器线程和栅格线程中的的那也就意味着它不会抢夺主线程的使用，也不会影响JS代码的执行。当整个页面都栅格化完成后，主线程此时将收集栅格线程生成的 Draw Quads 信息，这些信息记录了每个图块在内存中的位置和每个图块需要在页面的哪个位置渲染的信息。那么当主线程 JS 的代码过于耗时的时候，无法及时归还主线程在以便在16ms内进行 Layout和 Layer，那么就造成“卡了一下”的现象。
2022-09-26 23:18:01
227
原创 Chrome浏览器是如何工作的？（一）
观看视频有感，随手记录一下。并且对于自己身为一个前端工程师，连一个浏览器的页面渲染的大致过程都无法正确表达出来，深深感到羞愧。
2022-09-25 23:03:02
269
原创 Vue3 实现一个自定义toast（小弹窗）
前两天在项目中很多场景下都需要用到一个toast弹窗，项目使用的是ionic+tialwind_Css，ionic也有自带的toast弹窗，虽然大部分场景下直接调用它提供的api已经能满足需求了，但是它弹窗的高度，（也就是弹窗出现的位置）并不是高度自定义的，并且弹窗的z-index在我们项目中会和一些组件冲突，但是这个之前一直没有办法解决，所以干脆自己手写了一个使用方法高度类似ionic_Toast的组件。但是处于复用性考虑，我们的toast的宽度是不能设置固定宽度的，具体的宽度是由当时文字的大小决定的。
2022-09-10 18:45:46
4928
2
原创 Vue3实现一个标题点击变粗且底部有提示的效果
这周在项目中需要实现一个类似于github顶部标题的效果，如下图 主要效果为：当用户点击的时候，底部出现黑色的细线，并且当前项目的字体变粗。感觉这种场景很多，特来记录一下实现过程。接下来我会一步步讲解去实现它。一.基础样式和设计思路我们稍微调整一下布局(这里我使用的是tailwind.css)，本篇主要内容不是介绍css的，所以一些样式的知识点需要读者自己去查阅。这里我的设计思路是这样的，假设当前我的页面有两个选项卡，当用户点击某一选项卡的时候，下面的字会移动到相应的位置，且当前元素的字体会变大
2022-07-10 19:02:55
693
原创 Vue3中实现路由跳转的过渡动画(一)
由于官方文档写的太过抽象，真的特别不好理解，所以我来总结一下如何去更简单地理解路由跳转时的动画。首先看一下官方对于这个概念的解释。在刚开始学习的时候，看到黄色框框里内容直接傻眼，从未见过这个指令。不知道这个地方到底是固定写法还是让我们写自己的组件？1.在这里准备两个文件来演示这个指令的作用。2.结构也很简单就是一个按钮组件里并没有自己的组件，而是使用了这个标签来显示出这个组件。3.也是可以正常传递的4.这样这个组件自身就相当于这个组件，你可能会好奇，这有什么用呢？5.如果我们像下面这样写，我再引入一个组件，
2022-07-02 22:03:57
7415
4
原创 使用tailwind在谷歌浏览器上，button会出现蓝色背景的问题
今天遇到一个很奇怪的问题，在组件上明明设置了 和。但还是在点击的时候会出现这个情况，查阅了很多很多文章都没有搞定这个问题后来在开发者工具上，把样式一个一个排除掉，才发现了罪魁祸首：于是在项目中设置全局的css样式的button成功解决问题！...
2022-06-30 20:23:20
343
空空如也
react-router-dom V6在路由表中如何重定向呢？
2022-05-01
为什么不能直接调用Date.getMonth等相关方法呢？
2022-04-21
React中下面这种情况如何完成子组件向父组件传值？
2022-03-28
TA创建的收藏夹 TA关注的收藏夹
TA关注的人