全部文章
共 1306 篇文章
前端实现埋点&监控
实现埋点功能的意义主要体现在以下几个方面： 0. 数据采集：埋点是数据采集领域（尤其是用户行为数据采集领域）的术语，它针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。通过埋点，可以收集到用户在应用中的所有行为数据，例如页面浏览、按钮点击、表单提交等。 1. 数据分析：采集的数据可以帮助业务人员分析网站或者App的使用情况、用户行为习惯等，是后续建立用户画像、用户行为路径等数据产品的基础。通过数据分析，企业可以更好地了解...
macOS查看并修改终端显示名称以及主机名和计算机名
之前通过“系统设置 通用 关于本机”修改了“名称”，本以为会全盘修改所有名称，但是在终端却显示成“192”，这难免看起来会有些奇怪。 可以通过ps(Prompt Sign)命令查看终端用的是Bash Shell还是Zsh SHell，具体看终端头部显示的是“bash”还是“zsh”，然后修改“/etc/zshrc”或“/etc/bashrc”文件，但是这个语法看得一头雾水，什么“n表示用户名，m表示主机名”，还有“h代表主机名，u代表用...
Vue3+Ts+Vite+Pinia项目从0-1搭建
XXX甄选 今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范，需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复，需要使用husky来做commit拦截，需要使用commitlint来统一提交规范，需要使用preinstall来统一包管理工具。 面我们就用这一套规范来初始化我们的项目，集成一个规范的模版。 一、环境准备 node环境 16.16.0 pnpm 8.9.2...
你可能不知道的React-Router
前言 一不小心想起来了账号密码， 就写点什么吧。 这一年多也是经历了裁员 \ gap year 找工作 找到工作 还没找到工作，从最开始的玩的不亦乐乎，到后面的找工作怀疑人生，只能说一手烂牌，打的更是稀烂。正好最近面试有被问到React Router的实现，其实好久没看过源码了，所以面试回来又去简单看了下。 前端路由 前端路由一般分为 hash 路由和 history 路由两种模式，hash 模式下监听 ，history 模式监听 ，从...
前端性能优化_白屏-首屏加载
1 路由懒加载 SPA单页面应用项目，一个路由对应一个页面，如果不做处理，项目打包后，会把所有页面打包成一个文件，当用户打开首页时，会一次性加载所有资源，造成首页加载很慢，降低用户体验。（前后大概降低30%） 2 组件懒加载 除了路由的懒加载外，组件的懒加载在很多场景下也有重要的作用 例如：当用户打开某个页面，会一次性加载该页面所有的资源，我们期望的是有些组件使用户触发按钮后，再加载该弹窗组件的资源，例如弹窗组件，这时候，就可以考虑用懒...
用VSCode调试React代码
作为前端开发，基本每天都要调试 Vue/React 代码，不知道大家都是怎么调试的，但我猜大概有这么几种： 不调试，直接看代码找问题 console.log 打印日志 用 Chrome Devtools 的 debugger 来调试 用 VSCode 的 debugger 来调试 .不同的调试方式效率和体验是不一样的，我现在基本都是用 VSCode debugger 来调试，效率又高、体验又爽。 可能很多同学还不知道怎么用 VSCode...
阻止用户离开页面，beforeunload和unload事件说明
定义 onbeforeunload事件在onunload事件之前触发。 调用方式 MDN官方示例： 或者在body标签上绑定onbeforeunload，但更推荐使用 的方式调用。 如果需要添加beforeunload点击确认后的处理代码，可以直接添加unload事件监听。 注意事项 使用方式 HTML规范建议作者使用 Event.preventDefault() 而非 Event.returnValue 的方式来提示用户。但是，该种方...
44 个 React 前端面试问题
1.你知道哪些React hooks？ ：用于管理功能组件中的状态。 ：用于在功能组件中执行副作用，例如获取数据或订阅事件。 ：用于访问功能组件内的 React 上下文的值。 ：用于创建对跨渲染持续存在的元素或值的可变引用。 ：用于记忆函数以防止不必要的重新渲染。 ：用于记忆值，通过缓存昂贵的计算来提高性能。 ：用于通过reducer函数管理状态，类似于Redux的工作原理。 ：与useEffect类似，但效果在所有DOM突变后同步运行...
带圆角的虚线边框？CSS 不在话下
今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样： 这个我们使用 CSS 还是可以轻松解决的，代码也很简单，核心代码： 但是，原生的 dashed 有一个问题，就是我们 无法控制虚线的单段长度与间隙 。 假设，我们要这么一个效果呢虚线效果呢： 此时，由于无法控制 产生的虚线的单段长度与线段之间的间隙，border 方案就不再适用了。 那么，在 CSS 中，我们还有其它方式能够实现带圆角，且虚线的单段长度与...