- 博客(495)
- 收藏
- 关注
RSS订阅原创 一篇文章彻底搞懂css中的层叠上下文、层叠次序，不要再被 z-index 搞的头疼，包含源代码，建议收藏
css属性中 z-index 应该如何使用，什么情况下会失效，什么是层叠上下文，不同层叠上下文之间如何比较成叠顺序，同一个层叠上下文之间的层叠顺序如何比较。在项目中如何高效管理z-index，避免出现问题。
2025-04-02 17:32:29
527
原创 新手必看，代码开发规范，持续更新中
最近在一个大佬的带领下开发了一个 react 项目，大佬给我们代码 review 的时候提出了几点规范，在此总结一下，以后开发尽量按照规范来。
2025-03-28 18:52:46
101
原创 跟着《JavaScript设计模式与开发实践》彻底搞懂设计模式在vue项目中的应用（第二篇/完结篇），包含源代码，建议收藏
需要一个 useListTemplate.ts 文件，用来定义模版方法注意在 vue3 中，抽离出来的可供多个组件调用的 hooks 函数，命名要以 use 开头，类似 react 中// 在 vue3 中建议组合式 API 的命名以 use 开始// 使用 reactive(仅支持数组和对象) 使用的时候不用加 .value// 解构时必须用 toRefs 保持响应性// 重新赋值：不可直接替换整个对象。
2025-03-28 14:00:22
980
原创 overflow-x: auto 使用鼠标实现横向滚动，区分触摸板和鼠标滚动事件的方法
假设一个 div 的滚动只设置了 overflow-x: auto 我们发现使用鼠标的滚轮是无法左右滚动的，但是使用笔记本电脑的触摸板，或者在移动设备上是可以滚动的。所以我们需要兼容一下鼠标的横向滚动功能。我们可以监控 wheel 事件，然后根据位置来计算滚动的距离，不能使用 mousewheel 因为 mousewheel 事件在火狐浏览器并不支持，mousewheel 已经逐渐被 wheel 事件代替。
2025-02-21 20:27:11
569
原创 跟着《JavaScript设计模式与开发实践》彻底搞懂设计模式在vue项目中的应用（第一篇）包含源代码，建议收藏
跟着《JavaScript设计模式与开发实践》彻底搞懂设计模在vue项目中的应用（第一篇）包含源代码，建议收藏
2025-02-21 20:14:58
750
原创 输入框相关，一篇文章总结所有前端文本输入的应用场景和实现方法，（包含源码，建议收藏）
输入框相关，一篇文章总结所有前端文本输入的应用场景和实现方法，（包含源码，建议收藏）textarea、contenteditable、富文本编辑器的应用
2025-02-11 17:57:58
1385
2
原创 好用的富文本编辑器排名
社区活跃，文档完善，支持多种功能如图片上传、表格编辑、代码块等。：基于ProseMirror，现代化，支持多人在线实时编辑。：灵活性高，支持高度定制化需求，适合现代前端框架。：功能全面，支持复杂文本编辑需求，社区支持庞大。：功能丰富，插件众多，类似于在线版的Word。：支持自定义配置，文档全面，开发者上手友好。：开源免费，支持商业用途，现代UI设计。：需要现代化且支持中文的富文本编辑需求。：轻量级、模块化设计，支持自定义扩展。：轻量级，易于上手，支持快捷键操作。：需要轻量级、易用的富文本编辑需求。
2025-02-11 14:27:57
380
1
原创 css中字体的加载，仅在使用的时候加载，会阻塞，用font-display:swap
但是如果系统中有该字体的使用，字体的加载会阻塞页面的渲染，所以使用 font-display: swap;的作用是在自定义字体加载之前，浏览器先使用一个备选字体来渲染文本，等到自定义字体加载完成后，再切换到自定义字体。也就是说，如果你没有在页面上使用该字体（即没有设置。为指定的字体），浏览器不会加载那个字体文件。URL时，字体文件仅会在实际使用该。
2025-02-05 16:01:46
418
原创 开发技巧，vue 中的动态组件的引用 component + is
在项目中很多时候有切换 tab 的场景，一般来说都是用 v-if 或者 v-show 然后根据各种条件来控制显示隐藏。使用动态组件至少在 dom 的地方避免我们写很多条件语句。其实我们可以使用 vue 中的动态组件，也能实现这个效果。
2025-01-26 11:29:38
271
原创 前端拖拽相关功能详解，一篇文章总结前端关于拖拽的应用场景和实现方式（含源码）
前端的多拽功能详解，拖拽上传图片、文件；拖拽调整分屏宽度；拖拽移动按钮；拖拽排序；拖拽将文件移动到文件夹；处理各种拖砖场景；鼠标事件和drag事件的实际应用
2025-01-24 17:14:50
1611
1
原创 开发技巧，一个函数项目中多次调用，使用 console.error 查看调用栈
以前我调试的方式是 在 fn 内部使用 console.log 打印一个日志，然后在所有调用这个函数的地方 在打印一个日志，这样会很麻烦，需要写很多日志。有一个简单的方法，就是在 fn 函数内部使用 conosle.error 打印一个日志，就可以看到这个函数的调用栈了，这样可以更方便的调试代码。假设我们有一个公共函数 fn ，在一个庞大的项目中很多地方多次调用，但是现在出现了一个问题，我们不知道是那次调用出了问题。
2025-01-23 13:06:24
145
原创 利用 html 中 script 标签执行顺序的开发技巧
所以假设我们有一段 js代码，需要获取 body 元素，那么我们可以把这段js代码放在 body 标签内，保证在执行 js 的时候始终能获取到 body 元素。已知，在没有配置 async 或者 defer属性的时候， 在 html 中 script 标签是由上至下顺序执行的。同理，我们如果有其他的获取某个标签 dom 的操作的 js 脚本，都可以把脚本写在对应的标签内部。
2025-01-22 16:20:35
139
原创 style标签没有写lang=“scss“引发的 bug 和反思
遇到了一个问题，有一个css样式问题，在 chrome 浏览器上和 16.0 版本以上的 safari 浏览器完全没有问题，但是在 15.3 版本的safari浏览器上就完全乱套了。这说明有些高版本的浏览器比如 chrome 和16.0 以上版本的safari，已经开始兼容 css 的嵌套写法了，即便你没有手动生命 lang="scss"一查发现是我的某个 vue 文件中的style标签忘记写 lang="scss" 了，这就导致所有嵌套的 css 样式都乱套了，都没有生效。
2025-01-21 12:33:18
514
原创 元素滚动和内容居中同时存在时，flex 布局的 safe 关键字，保证dom元素滚动的时候不溢出
假设你有一个元素 div，同时设置了 flex 布局居中和overflow: auto/scroll。为了防止内容溢出，我们可以使用safe 这个属性，比如。但是注意，这个 safe 的属性，兼容性不太好。这样就可能保证元素在滚动的时候内容能够显示全。
2025-01-03 16:04:24
267
原创 TypeScript 完整篇，考前必看，一网打尽所有的面试题
内容不是很多，可能也不全面，但是还是记不住，特别是区别那块，可能会记住一部分，但是表达不清楚，这就需要多下功夫了。内容仅供参考，如果有问题欢迎指出，因为我也还没有找到工作。
2024-04-23 20:20:13
1695
原创 javascript（第三篇）原型、原型链、继承问题，使用 es5、es6实现继承，一网打尽所有面试题
总之关于原型这块记住三句话对象有一个内置属性 [[Prototype]]，使用 Object.getPrototypeOf(obj) 获取函数有一个公开可访问不可枚举属性 prototype函数的 prototype 属性有一个公开可访问的不可枚举属性 constructor，指向函数本身使用原型继承，是 es5 中实现继承的必须要学会的，同时还要记住原型继承存在的问题！这个时候就有一个新的问题了，就是如何使用 es5 中的知识解决这些问题。答案是将四种继承方式组合起来，取各自的优点。
2024-04-23 16:37:21
2107
2
原创 v-deep 打破作用域隔离的原理
vue 使用了一种叫做 scoped css 的技术来隔离组件的样式，确保他们不会泄漏到其他组件中，每个 Vue 组件的样式只在该组件的作用域内生效，不会影响到其他组件，而 v-deep 可以打破这样的样式隔离。v-deep 的原理是，vue 渲染是移除这些选择器，从而使得被选中的样式能够影响到子组件内部的元素，这样以来，父组件就可以通过 v-deep 选择器修改子组件的样式，即时他们被包裹到作用域样式中。选择器，父组件可以选择子组件中的元素，并修改它们的样式，即使子组件的样式已经被作用域样式所隔离。
2024-04-17 20:38:37
702
原创 函数式编程和面向对象编程的区别
函数式编程（Functional Programming）和面向对象编程（Object-Oriented Programming，OOP）是两种不同的编程范式，它们有着不同的思想、理念和方式来组织和实现代码。总的来说，函数式编程和面向对象编程是两种不同的编程范式，每种范式都有自己的优缺点和适用场景。选择使用哪种范式取决于项目的需求、团队的偏好以及语言和工具的支持程度。
2024-04-17 17:59:21
852
原创 浏览器不同标签页通信方法
localStorage sessionStorage【页面跳转】 cookie IndexedDB BroadcastChannel sharedWorker postMessage
2024-04-17 17:38:22
197
原创 有且仅有的10个常见的排序算法，东西不多，怎么就背不下来呢
就这么跟你说吧，面试中肯定会出排序算法的算法题，你只需要背下来代码+背下来他们的时间复杂度和空间复杂度就能蒙混过关。不管你是前端还是后端，关于排序的算法有且仅有这 10个，如果你用心了，怎么会记不住呢。看完这篇文章你还没记住，就说明你是笨蛋。好吧，最最坏的情况下，也需要记住这个8【冒泡、选择、插入、希尔、归并、快速、桶、堆】
2024-04-17 03:37:12
1071
原创 前端错误监控的方法有哪些
使用 process.on('uncaughtException')事件，在主进程发生未捕获的异常时触发。strong-agent: 监视和重启 node.js 应用程序的工具，提供了监控主进程错误的功能。PM2: 用于管理 node.js 应用程序的进程管理器，提供了监控主进程错误的功能。前端错误监控是指通过各种手段收集、分析和处理前端应用运行中发生的错误。常用的前端错误监控的方法有。node 的主进程发生错误。使用 http 请求。
2024-04-16 21:39:31
902
原创 使用 js 代码生成随机化，选取一个范围内的随机数
说到随机数，肯定会想到使用Math.random 但是有几点需要注意。常用的是两个数之间 的整数随机数，要求包含两个边界值。具体请参考官方文档，关于。
2024-04-14 18:14:58
262
原创 vue 面试题目总结篇，考前必看
一、原理1.1 双向绑定原理1.2 vue2 和 vue3 的区别1.3 data 为什么是函数而不是对象1.4 watch 和 computed 的区别1.5 虚拟 dom 的原理1.6 看过vue源码吗1.7 mixin 的原理和合并规则1.8 diff 算法1.9 react 和 vue 的区别
2024-04-12 00:03:43
369
原创 vue 中 mixin 的应用场景，原理和合并规则
Mixin 的工作原理是将 Mixin 中的选项合并到组件的选项中。多个组件的相同逻辑可以提出去来一个公共的 mixin。
2024-04-12 00:01:00
468
原创 vue 中的data属性为什么是一个函数而不是对象
根组件的data 可以是个对象，因为只有一个根实例 组件的实例需要是个函数，因为 组件可能有多个实例 vue 会使用 vue.extend() 构成组件实例 如果组件的 data 是个对像，编译会得到警告 the data option should be a fucntion that retures a pre-instance value in component definitions 同个组件的不同实例之间的数据会相互影响，因为公用了一个内存地址 如果 data 是个
2024-04-11 23:51:18
208
原创 AI大模型 、生成式AI、AI工具，必须知道的知识点
AI 大模型，即LLM 是 "Large Language Model" 的缩写，意为大型语言模型。它是一种基于 Transformer 架构并使用大量文本数据进行预训练的深度学习模型。Transformer 是一种采用注意力机制的深度学习模型，这一机制可以按输入数据各部分重要性的不同而分配不同的权重。该模型主要用于自然语言处理（NLP）与计算机视觉（CV）领域。
2024-04-11 23:07:42
951
原创 跟着《深入浅出nodejs》系统学习 node 以及相关面试题一网打尽
内容持续更新中，内容较多难免疏漏，有不对的欢迎指正，有遗漏的部分会陆续补充。欢迎关注我的专栏《一网打尽所有面试题。
2024-04-10 23:23:15
789
原创 前端自动化测试的方法和工具
综上所述，前端自动化测试是确保前端应用质量的重要手段之一，通过各种测试方法可以有效地发现和解决问题，提高应用的稳定性、可维护性和用户体验。前端自动化测试是通过自动化工具来模拟用户操作，验证前端应用的功能、性能和用户体验是否符合预期的过程。
2024-04-10 23:20:50
699
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人