随笔分类 - FE前端学习知识点
FE前端学习知识点txt(硕哥)
摘要：第一章 面试题基础篇 1.1 HTML面试题 面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？ 行内元素：span、img、input... 块级元素：div、footer、header、section、p、h1...h6... 空元素：br、hr... 元素之间的转换问
阅读全文
摘要：一、HTML考题（8题） 1. 前端页面有哪三层构成，分别是什么？作用是什么？ 前端页面主要由三层构成，分别是结构层、表示层和行为层。这三层各自的作用如下： 1. HTML（HyperText Markup Language）：结构层，它是网页的基础，用于定义网页的内容结构，如标题、段落、列表、图像
阅读全文
摘要：
阅读全文
摘要：前端数据的返回本来就是流式返回的，不过通常情况下我们需要的是完整的响应体。如果需要类似于ChatGPT那种流式的返回，只需要将请求的响应体等待去掉就可以 点击查看代码 async function getRes(content) { const res = await fetch(url, {...
阅读全文
摘要：tabbar-swiper+long-page组件封装 组件类型定义ComponentPublicInstance类型 组件封装了长列表遍历了swiper-item此时类型附带[]，如果调用子组件的方法可以(this.$refs['组件ref属性值'] as 驼峰ComponentPublicIns
阅读全文
摘要：用户协议和隐私政策 自定义通用的navbar组件 自定义登录/注册/验证码/忘记或重置密码(防抖60s) 个人中心页面顶部区域 头像昵称粉丝关注点赞+帖子评论帖子回复帖子收藏 banner+浏览历史记录 设置区域 编辑资料(顶部也有侧边固定) 账户与安全(手机号绑定附带脱敏+用户id+密码修改+黑名
阅读全文
摘要：点击查看代码 #!/bin/bash # 设置你要cherry-pick的commit hash commit_hash="a5bdefa5d8cccc7cb73b85a84355c6d977a918fb" # 获取所有本地分支的名字，排除远程跟踪分支 branches=$(git branch -
阅读全文
摘要：如果你在try块中定义了一个变量，但在catch块中访问时得到undefined，这可能是因为以下几个原因： 变量作用域问题：如果在try块中使用let或const声明了变量，这些变量只在try块内部可见（即具有块级作用域）。当控制权转移到catch块时，这些变量就不可见了，因此尝试访问它们会得到u
阅读全文
摘要：即便绝对定位的子盒子视觉上覆盖在父盒子上，导致父盒子的内容或背景不可见，backdrop-filter 依然作用于父盒子自己的背景及背后的内容上。简而言之，backdrop-filter 是针对元素自身及其背后内容的一个效果，它不受该元素内子元素定位方式的影响。因此，即便子盒子“脱标”，父盒子的 b
阅读全文
摘要：let observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.
阅读全文
摘要：HEIC 是一种高效的容器图像文件格式，使用高效视频编码（HEVC）标准进行压缩，相比 JPEG、PNG 格式体积更小。 随机抽取 100 张小程序在使用的 JPEG、PNG 图片，转为 HEIC 图片，图片体积减小 74.75%。 小程序从抖音 28.0.0 版本开始增加对 HEIC 格式图片的支
阅读全文
摘要：watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式： watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调
阅读全文
摘要：width: fit-content;
阅读全文
摘要：点击查看代码 export function useLockFn(fn: (...args: any[]) => Promise<any>) { const isLock = ref(false) const lockFn = async (...args: any[]) => { if (isLo
阅读全文
摘要：要实现在页面切换时保存数据状态且记忆滚动条位置，同时避免闪烁现象，可以采用以下几种策略来优化用户体验，这些策略尤其适用于单页面应用（SPA）如Vue或React应用中： 1. 使用Keep-Alive（Vue中） 在Vue中，可以利用<keep-alive>组件来缓存组件实例，这样在切换页面时，组件
阅读全文
摘要：国际化（i18n）涉及多个方面，包括文本翻译、日期和数字格式、货币单位等，以及如何确保不同语言版本在界面布局上的一致性和美观性。针对您提到的中文字符较短而阿拉伯语等语言字符较长，导致样式难以统一的问题，可以采取以下策略： 1. 弹性布局（Flexbox 或 Grid） Flexbox：使用Flexb
阅读全文
摘要：在JavaScript中，Promise链中的.catch()方法用于捕获前面Promise中的错误，并且无论这个错误是在.then()链中的哪一个环节产生的，.catch()都会捕获到。当错误被.catch()处理之后，如果希望后续的Promise链继续执行，可以这样做。 所以对于代码 promi
阅读全文
摘要：scroll-snap-type https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type
阅读全文
