- 博客(29)
- 收藏
- 关注
RSS订阅原创 Node.js 助力前端开发：自动化操作实战
前端开发中，重复性任务如新建文件、配置路由、生成组件等，往往耗时且容易出错。借助 Node.js 的强大能力，我们可以实现开发过程中的自动化操作，提高效率。
2024-12-26 20:50:40
867
原创 前端实现图片压缩
借助 compressorjs、browser-image-compression 等开源库，快速实现高质量的图片压缩功能。利用 canvas 将图片绘制到画布上，然后通过 toDataURL 方法获取压缩后的图片数据。使用 HTML5 的 API。
2024-12-22 21:35:34
352
原创 浏览器事件循环机制
异步任务：由浏览器或Node.js的线程处理，待完成后加入到任务队列，等待主线程执行。异步任务：由浏览器或Node.js的线程处理，待完成后加入到任务队列，等待主线程执行。执行一个宏任务（例如 setTimeout 回调），然后再检查微任务队列。微任务的优先级高于宏任务，即主线程会先清空所有微任务队列，再处理宏任务。当异步任务完成时，其回调函数会被加入任务队列中，等待主线程空闲时执行。根据优先级选择适合的任务类型（宏任务或微任务）。如果某个任务执行时间过长，后续任务会被阻塞。
2024-12-18 21:52:13
382
原创 Element Plus Table 组件树形渲染实现方法
Element Plus的Table组件通过指定列表数据的children属性，实现树形数据的渲染；同时使用row-key标识唯一的行，依赖排序和子节点数据结构，以实现连动操作。
2024-12-12 20:44:13
530
原创 Safari 和 Chrome 浏览器 CSS 兼容性问题与解决方案
在 Chrome 中，calc() 函数的计算结果默认遵循 content-box 盒模型，而在 Safari 中，calc() 的计算结果却会受到 box-sizing 设置的影响。如果没有显式设置 box-sizing: border-box，Safari 会按照 content-box 模式来计算。三、position: sticky 支持差异。一、Flexbox 布局兼容性问题。四、vh 和 vw 单位的兼容性。二、Grid 布局的兼容性问题。
2024-12-11 21:48:12
2183
原创 跨域 Cookie 共享
跨域请求经常遇到需要携带 cookie 的场景，了确保跨域请求能够携带用户的认证信息或其他状态，浏览器提供了 withCredentials 这个属性。为了在跨域请求中携带 cookie，需要在 Axios 配置中设置 withCredentials 为 true。前端配置好 withCredentials 后，后端需要确保响应头正确配置，以允许跨域请求携带 cookie。SameSite=None：确保 cookie 在跨站请求时也会被发送。
2024-12-11 21:36:23
591
原创 前端实现复制功能，Uncaught TypeError: Cannot read property ‘writeText‘ of undefined
安全域指的是 HTTPS 或 localhost 环境。回退到传统方法 在非安全域或旧版浏览器中，可以使用 document.execCommand(‘copy’) 实现文本复制。优先使用现代 API 如果环境支持 navigator.clipboard，优先使用它以确保性能和安全性。该 API 必须在用户触发的事件（如点击按钮）中调用，否则会被浏览器拦截。
2024-12-09 21:42:53
458
原创 动态判断文本溢出 展开/收起
通过对比 scrollWidth 和 clientWidth 判断溢出状态。提供一个“展开/隐藏”按钮，动态切换文本显示状态。文本默认显示为单行，超出部分显示省略号。
2024-12-01 18:43:35
212
原创 H5实现“适老模式”
进入/退出老年模式：点击按钮切换大号字体和高对比样式。语音播报：点击语音播报按钮，朗读指定文本。用户偏好记忆：切换老年模式后刷新页面仍能保持设置。核心实现就是通过给 HTML 或 body 元素加一个特殊的类名（比如 .old-mode），动态调整已有样式来实现“老年模式”
2024-11-28 21:12:05
537
原创 前端发布新版本，提醒用户更新
使用构建工具（如 Webpack/Vite）的插件，在每次打包时生成一个 version.json 文件。使用 Vite 的 define 配置，将版本号作为全局常量注入到项目中。前端定期请求 version.json 文件，判断是否有新版本。
2024-11-26 21:02:57
809
原创 前端面试总结-2024(持续更新)
babel-runtime 是 Babel 在转译代码时，所需要的一些辅助函数的集合。它包括了许多 Babel 编译后所需的内置方法、帮助函数、生成器等。这些方法和函数的作用是将高级的 JavaScript 语法转换为低版本的兼容代码，从而确保这些语法能够在老旧环境中运行。babel-polyfill：babel-polyfill 是用于模拟 JavaScript 环境中不存在的原生 API（如 Promise、Map、Set 等）的 polyfill。
2024-11-25 22:13:02
691
原创 uniapp打包h5去掉navbar返回按钮
uniapp打包成h5嵌套在app中，此时会有两个头部，想保留头部的title统一去掉navBar的返回箭头。
2024-11-25 21:26:19
327
原创 安卓H5预览PDF白屏解决方案
在安卓设备上，尤其是 APP 内嵌的 H5 页面 中预览 PDF 时出现问题，通常是因为 安卓系统和浏览器的兼容性 不如 iOS 设备上的 Safari 浏览器那样好。Safari 在 iOS 上自带对 PDF 的良好支持，而安卓系统的不同浏览器和 WebView 实现可能没有对 PDF 的原生支持，因此在内嵌 H5 页面时经常会遇到 白屏 或 无法渲染 PDF 的问题。解决方案：使用 PDF.js封装个预览PDF组件。
2024-11-24 20:14:35
338
原创 Vite 为什么快
优化点Vite 的做法对比传统工具的改进冷启动基于 ES Modules，按需编译无需全量打包，启动速度极快依赖预打包使用 esbuild 高速预处理依赖提前优化依赖，减少后续解析开销模块按需加载浏览器请求时才加载和编译模块避免不必要的全量构建热模块替换（HMR）仅更新修改的模块，利用模块化架构HMR 更高效，无需重启服务CSS 热更新独立处理 CSS 文件，直接注入更新更快响应样式改动构建优化使用 Rollup 构建，针对现代浏览器生成高效代码。
2024-11-21 20:56:02
1244
原创 编程世界里的挣扎与智慧
每一天，面对复杂的需求、混乱的代码、无法预估的工期、无法解释的工作，我们依然坚持在自己的一片代码世界里默默奋斗。而正是这些挑战，让我们的职业生涯充满了不一样的意义——不论是实现那些自己不认可的功能，还是在别人的代码中寻找线索，每一步都让我们变得更加成熟。“实现自己并不认可的功能，预估毫无把握的项目工期，或者看着别人写的代码，心想：这人到底是怎么想的？下次当你面对一个乱七八糟的代码模块时，记住：它或许带给你无数个灰头土脸的夜晚，但解决它之后，那个名字简单明了、功能实现到位的模块，就是你对自己的最佳诠释。
2024-11-18 21:46:43
268
原创 CSS伪类选择器：:nth-child(an+b)的用法
浏览器遍历父元素，找到父元素下所有位置符合 an+b 公式的 span 元素；n 为自然数，从 0 开始；比如 1n+1 可简写为 n+1，意味着：匹配到位置为 (0 + 1), (1 + 1), (2 + 1), (3 + 1) … 的元素；比如 2n+0 可简写为 2n，意味着：匹配到位置为 (2 * 0), (2 * 1), (2 * 2), (2 * 3) … 的元素；
2024-11-18 13:11:35
217
1原创 JS深拷贝和浅拷贝
什么是浅拷贝?定义：只复制对象的第一层引用，深层次对象仍指向原对象的引用。实现方法：举例说明（如Object.assign()、…展开运算符）。优缺点：效率高，但容易引发引用共享问题。什么是深拷贝？定义：递归复制对象的所有层级，不共享引用。实现方法：JSON解析法：JSON.stringify() 和 JSON.parse()。手动递归法：自定义递归拷贝逻辑。第三方库：如lodash的cloneDeep。优缺点：解决引用共享问题，但可能性能较低，或对循环引用处理复杂。
2024-11-17 13:26:22
622
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人