
前端开发相关
文章平均质量分 80
前端开发技术
汪子熙
18年深耕企业管理软件领域,精通 ABAP, Java, Javascript, Typescript, 精通 UI5, Fiori, Fiori Element, Angular, Kubernetes, SAP HANA, SAP BTP. 具有通过阅读 Github 上各种优秀的开源框架和工具源代码的习惯,对于我来说阅读源代码,就像阅读中国白话文一样轻松自然。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
山水装修,最后方案 C 胜出
图二的极简底板在大面积留白、模块化家具与隐藏式收纳层面更能放大 14 岁少年的活动范围,也能降低夫妻俩的日常清洁负担;该图保留暖灰‑奶咖配色,使空间不至于僵冷。若在此基础上引入图一里那张电动 recliner、少量香槟金金属线条与羽叶吊灯,既能满足中年人脊柱放松与视觉浪漫,又不会破坏极简的克制秩序。这种组合方案在功能、安全、维护成本与审美情绪之间形成动态平衡,为三口之家提供从学习、游戏到社交聚会等多场景切换的弹性。原创 2025-07-21 18:54:43 · 162 阅读 · 0 评论 -
探究 HTML 中的 pre 元素:保持格式的守护者
pre元素代表“预格式化文本”,用于展示需严格保留空白字符和换行符的内容,浏览器会以等宽字体渲染其内部文本,从而确保每个空格长度一致,换行位置固定不变 (原创 2025-07-18 23:44:41 · 874 阅读 · 0 评论 -
pre 元素:从源代码到像素,一次彻底的前端渲染之旅
从 W3C 语义到 GPU 纹理,从视障研究员的盲文终端到 VS Code Web 的 10 万行终端,<pre>元素像一条隐形的丝线,把看似枯燥的固定宽度文本编织进了前端世界的每一层。理解它,不只是为了把代码贴得好看,而是为了在排版、性能、可访问性、国际化乃至安全之间找到那个最小而坚固的支点。下次当你准备写时,不妨停下来,想一想:也许一行朴素的<pre>,才是对文本、对用户、对浏览器最友好的答案。原创 2025-07-18 23:22:20 · 844 阅读 · 0 评论 -
理解 Angular CLI .angular/cache/19.0.4 目录结构与生成时机:webpack 与增量构建在本地开发体验中的角色
一些团队希望自动清掉超过一定天数未访问的缓存,避免磁盘膨胀。可以写脚本扫描.angular/cache/版本/*下文件的最后访问时间 (atime / mtime)。示例 Node 脚本// 默认保留 7 天if (!// 若目录空,可删除} else {node scripts/clean-old-cache.js 3 # 删除 3 天未更新的缓存文件。原创 2025-07-17 21:11:49 · 671 阅读 · 0 评论 -
Chrome DevTools Call Stack 中 `Zone - Promise.then` 分隔行的真实含义:从异步栈、Zone.js 到 Angular NgZone 的全链路剖析
自定义 Zone 测试原创 2025-07-17 21:10:59 · 979 阅读 · 0 评论 -
为什么 share() 没有让你的同步随机数流多播?——refCount、同步完成与订阅时机的陷阱
在内部使用,会缓存最近 N 条发射并重放给之后的订阅者,从而避免重新执行源流;常用于避免重复HTTP请求、重复昂贵计算。Bitsrc 与 DEV 两篇文章都给出了用缓存服务端数据、供多个组件共享的范例。console.log('只生产一次随机数:', value);}).pipe(// 缓存最后一个值并共享// refCount 默认为 false:源订阅建立一次并保留缓存// 三个订阅,无论时序如何,都会拿到相同的随机数意味着即便没有活动订阅者,上游订阅也保持,不会重置缓存。原创 2025-07-17 21:10:26 · 844 阅读 · 0 评论 -
RxJS Observable 基础剖析:从 new Observable 构造函数到订阅、发射、完成与清理的全流程
开始计时计时值: {{tick}}原创 2025-07-17 21:09:53 · 681 阅读 · 0 评论 -
Observable 与 Stream 的关系:在 RxJS 与 Angular 编程中的时序数据模型全景图
当我们说Observable是流,其实是在说:在订阅激活后的生命周期里,它表现得像一个按时间推送的值序列;当我们说它不是流,又是在强调:在没有订阅前,它只是一个声明了数据生产逻辑、运算符管道与清理策略的描述对象。则更贴近真实 I/O 管道,具备背压与双向能力。把两者放在一个坐标系里,我们就能根据业务需要选择合适的抽象:UI 交互、状态派生、轻量异步事件——优先Observable;海量 I/O、内建背压、字节处理——考虑原生Stream或二者混合。希望本文给你提供了一个清晰、可落地的思维地图。原创 2025-07-17 21:09:14 · 708 阅读 · 0 评论 -
用 InjectionToken 封装 localStorage —— Angular BrowserStorageService 代码深度解析
在这段短小却极具代表性的 TypeScript 代码里,作者巧妙地把浏览器原生 localStorage 包装成一个依赖注入友好的服务:既让调用方获得统一、安全的存取接口,又借助 Angular 的 tree-shakable 机制确保未被引用时能够被摇树优化。下文先按照源码的行号做逐句拆解,再归纳它在运行期承担的职责,最后奉上一份可直接粘贴进 Angular 17 项目的完整示例,并演示如何结合 rxjs 把浏览器存储事件转换成响应式数据流,让组件之间的状态同步变得丝滑自然。原创 2025-07-14 18:58:32 · 243 阅读 · 0 评论 -
接口与类型别名:TypeScript 里的 interface 为什么只是蓝图而非可直接引用的 type
接口的角色更多是“契约的蓝图”而非“可赋值的实体”。理解这一点,才能在扩展第三方声明文件、对接复杂后端返回体、或使用装饰器和混入模式时游刃有余。下列资源提供了更深入的案例与论述,建议结合本文示例在本地多做实验,加深对编译期与运行期边界的感知。TypeScriptTypeScriptEffective TypeScript 系列博客([effectivetypescript.com](https://effectivetypescript.com/2021/06/03/interface/?原创 2025-07-14 18:57:55 · 546 阅读 · 0 评论 -
禁止按钮的两难︱Angular 模板里 boolean | null 引发的类型骚动与化解之道
这场编译错误表面上是boolean与null的对峙,实则是严格类型系统与异步数据流之间的协商。理解async管道的占位策略、Ivy 对输入绑定的静态验证,以及 TypeScript 的 Nullability 规则,便能在保持类型安全的同时优雅地解决问题。??最保险、!最简洁、$any()最彻底、扩展输入类型最正统。根据业务可靠性要求与代码维护成本,选择一条最契合团队现状的路径即可。原创 2025-07-14 18:49:10 · 790 阅读 · 0 评论 -
一次性 take(1):让 Angular Cart 订阅既精准又安全
take(1)并非锦上添花,而是在 RxJS 管道里提供“一次即走”的生命线:它让流程在达到业务目标后就功成身退,免去手动退订烦恼,也避免了因空流带来的异常。只要留心空值场景,理解它与first()的差异,并在需要时再加入takeUntil,就能把数据流的生命周期掌控得游刃有余。——愿你在下一次查看购物车时,流如其名,一次到位。原创 2025-07-11 11:07:54 · 315 阅读 · 0 评论 -
掌控副作用:RxJS tap Operator 的多场景实战指南
tap属于utilityoperator:它对外保持流的数据形态不变,对内则开放三类回调——nexterrorcomplete,外加可选的钩子。换言之,你可以在每一次事件通知到来时执行副作用,而不会影响下游订阅者拿到的对象引用。tap不是数据变换器,而是“透视镜”。RxJSRxJS这一设计源于函数式编程的两条准则:一是避免在纯数据变换链里混入副作用,二是在真的需要副作用时,要把它显式地限定在可控、可搜索的区块内。tap正好扮演了隔离带的角色。Reddit。原创 2025-07-11 11:07:21 · 426 阅读 · 0 评论 -
Angular 路由事件、订阅收束与标记变更检测:三问一答的实战剖析
通过路由事件监听、订阅归并与手动变更标记的组合,这段代码让组件在导航完成或取消后及时结束校验并刷新视图。掌握背后原理后,你可以根据实际需要去调整监听粒度、收束策略与变更检测方式,让代码既健壮又高效。原创 2025-07-11 11:06:04 · 377 阅读 · 0 评论 -
深入剖析 Angular ChangeDetectorRef.markForCheck 的应用场景
并非“黑魔法”, 它只是一个显式信号, 把 OnPush 组件重新纳入下轮检测。掌握其触发契机, 结合 Zone 与变更检测树的运行机理, 便可在性能与一致性之间取得优雅平衡。原创 2025-07-11 11:05:33 · 278 阅读 · 0 评论 -
组件被重复实例化?深入解析 Angular OnInit 多次触发的根本原因
import {在AppModule现在返回Home时不会重新实例化组件,ngOnInit也就不再重复触发,控制台只留下最初那一条日志。原创 2025-07-11 11:04:57 · 366 阅读 · 0 评论 -
什么是 TypeScript 里的 parameter property
parameter property 首先是一种字段声明语法糖,其次才是依赖注入的便利途径。去掉protectedpublicprivate等修饰符时,你也就同时删掉了字段定义——在类其它位置调用当然会失踪。当需要隐藏或暴露依赖时,合理选择修饰符;当需要跨方法频繁使用服务时,保留字段或自行缓存实例。原创 2025-07-11 11:04:26 · 405 阅读 · 0 评论 -
Angular 中 overload signature 与 implementation signature 的必要性探源
位于源文件顶部,通常两条或更多;只写类型与返回值,不写函数体;编译期供调用方解析,运行期将被丢弃。LogRocket 的实战教程指出,重载列表本质是一张“调用语义列表”,构建更丰富、表达力更强的 API 文档,同时保持零运行时代码膨胀 (overload signature 与 implementation signature 的分离,看似冗余,却在类型系统、运行时代码、API 演进与 IDE 体验之间找到了黄金平衡。原创 2025-07-11 11:03:42 · 321 阅读 · 0 评论 -
EntityProcessesLoaderMeta 之多接口继承全景透视
在 Angular 与 NgRx 共构的大型前端项目里,只是短短一行,却恰如电路板上的晶体管—微小却至关重要。这行代码通过多重接口继承,为后续所有涉及entityprocessesloader三类元数据的 Action 与 Reducer 统一了“元数据签名”,让状态管理可读且可扩展。下面深入拆解其字面语法、运行时语义以及括号的真正含义,并给出可编译运行的示例代码,帮助读者把抽象概念落实到实践。原创 2025-07-11 11:03:08 · 325 阅读 · 0 评论 -
使用 JavaScript 将 markdown 文档转换为 PDF 格式输出
比如七大姑八大姨的小孩,拜托我给一些高考填志愿,研究生选专业之类的建议,此时我就习惯用一些 AI 工具来辅助我生成建议。我最开始使用了有道云笔记自带的 Markdown 导出成 pdf 格式的功能。但笔者测试发现,这个 app 自带的功能有个 bug,导出的 pdf 文档,第一页是空白。于是我不得不将 Markdown 源代码粘贴到一些在线编辑器里,然后将渲染成 html 的 网页,另存成 pdf,这样太麻烦了。我开发了一个简单的命令行工具,能够把用户指定的 Markdown 文件,渲染成 PDF 文档。原创 2025-07-11 11:02:24 · 234 阅读 · 0 评论 -
Puppeteer 在 Node.js 自动化与浏览器控制中的多维度价值剖析
Puppeteer 把浏览器转化为可编程对象之后, Web 自动化的边界被极大拓宽。无论你正在构建复杂的多浏览器回归体系, 还是想用 Node.js 在服务端输出生产级 PDF, 抑或需要一台“可靠且可水平扩展”的爬虫, 都可以在 Puppeteer 生态中找到成熟的积木和社区知识。随着 Firefox 支持与 BiDi 接口日渐完善, Puppeteer 仍在以轻量、透明、专注的姿态, 守护 Node.js 开发者对现代 Web 的全面掌控。原创 2025-07-11 11:01:49 · 301 阅读 · 0 评论 -
极速 Markdown 引擎 marked 在 Node.js 生态的内外兼修
当项目对 Markdown 解析拥有高并发调用、快速启动、极简依赖三大诉求时,marked依旧是极具性价比的首选;若需求偏向绝对规范覆盖率,可考虑;若你计划深度操控语法树、生成多格式文档,remark体系更合适。无论选择何种解析器,务必搭配成熟的 HTML 净化、服务端渲染缓存与前端懒加载策略,才能在性能与安全之间取得均衡。——愿本文能够帮助你在下一次 Node.js 项目里,让 Markdown 渲染既快又稳。原创 2025-07-11 11:01:18 · 258 阅读 · 0 评论 -
并发、放弃与排队:深度拆解 mergeMap 、switchMap 、concatMap
并发?用mergeMap。只要最新?用switchMap。顺序必须?用concatMap。并行冲锋 merge、最新覆盖 switch、排队串行 concat。这把钥匙能帮你迅速在脑海里匹配到最合适的算子。原创 2025-07-10 13:52:17 · 898 阅读 · 0 评论 -
Angular 多语言应用中翻译文件加载机制解析
是 Angular 提供的一个核心机制,用于在服务器端渲染 (Server-Side Rendering, SSR) 和客户端渲染 (Client-Side Rendering, CSR) 之间传递数据。其主要目的是优化应用性能,特别是在使用 Angular Universal 进行服务端渲染的场景下。当应用在服务器端渲染时,某些数据(例如 API 调用结果、配置信息或,如本例中的,翻译文件内容)已经被获取。原创 2025-07-09 12:39:58 · 643 阅读 · 0 评论 -
Angular 多语言幕后揭秘:为何切换到德文时 Network 面板看不到任何 JSON 请求?
开发者可以实现一个。原创 2025-07-08 19:28:41 · 534 阅读 · 0 评论 -
深入拆解 Browserslist 警告:caniuse-lite 数据库过期的底层原因与解决方案
Browserslist 采用 GitHub Actions 每日抓取 caniuse 官方站点的最新浏览器占比 CSV,转换为压缩后的 JSON 并发布到 npm,平均每周有新版本(github.com而警戒阈值设置为约 25 周,是权衡“频繁 npm install 的网络成本”和“支持矩阵过时导致体积膨胀”之间的折中(一般实际项目每月或每次合并主干前运行 update 即可。当你执行,Angular CLI 会:调用 Node API 解析项目根目录的浏览器查询;原创 2025-07-08 19:18:36 · 663 阅读 · 0 评论 -
Breakpoint service 的前世今生与实践价值:从 CSS 媒体查询到企业级可观测布局引擎
无论你在 Angular、React、Vue 还是 SAP UI5 生态中工作,只要应用需要跨设备适配,都值得纳入架构考量。它不仅让响应式从“写死在 CSS”走向“被观察、可测试、能度量”的工程形态,也成功把设计断点与业务逻辑桥接起来。下次当团队争论“该在哪条尺寸线切换布局”时,别忘了把决定写进统一的断点表,然后交给这个低调而强大的服务去守护。原创 2025-07-07 19:34:02 · 1036 阅读 · 0 评论 -
在 Chrome 浏览器内部精准禁用 JavaScript 的多维策略
—兼顾性能、安全与开发调试的系统性解读现代 Web 应用大量依赖 JavaScript,但并非所有场景都需要或欢迎它:SEO 工程师可能想观察纯 HTML 渲染效果,安全研究员要复现 XSS 缺陷,产品经理也许希望模拟极端网络环境。基于这些现实诉求,本文从全局、站点级、会话级和企业政策四条路径,对 Chrome 浏览器中的方法进行深度拆解,并辅以工具链、底层原理与真实案例,帮助读者在保证业务连续性的同时,获得对脚本执行权的精细掌控。原创 2025-07-07 19:12:55 · 773 阅读 · 0 评论 -
域名 diablo.cn 借助 CNAME 与 EdgeOne 实现 HTTPS 访问的技术全景解析
通过一条 CNAME 记录把 apex 域映射到 EdgeOne 提供的目标域,实现了四层到七层的完整代管:DNS 解析链路利用 CNAME 展平解决根域限制,Anycast 全局调度让用户就近接入,SNI 让共享 IP 能正确分发 TLS 证书,EdgeOne 作为安全网关与 CDN 提供缓存与防护,最终把加密流量稳妥回源到。这一模式把传统“自己维护证书 + 直连源站”迁移到“云边协同”时代,极大提升 Web 体验、可靠性与安全性,也是现代前端部署的黄金路径。原创 2025-06-30 19:43:43 · 979 阅读 · 0 评论 -
在腾讯 EdgeOne 上把网址 A 反向代理到网址 B 的实现路线图
EdgeOne 提供与 Cloudflare Workers 类似的,可在 25ms 级沙箱里跑JavaScript。脚本可以对请求做任意判断,再决定 fetch 到哪个源站,并对URL做细粒度重写 (edgeone.aiedgeone.ai});// 只劫持 /ui5 开头的请求// 去掉前缀并转向源站// 维持客户端 Method 与 Header});// 其它路径走默认回源逻辑在“函数管理”里创建并部署脚本,然后添加触发规则:匹配回调此函数 (edgeone.ai。原创 2025-06-30 19:42:41 · 927 阅读 · 0 评论 -
Angular 懒加载与 OnPush:让首屏渲染快 25% 的两支利刃
Angular 应用在采用路由懒加载并把大部分组件切换到之后,常见的首屏渲染指标(FCP / LCP)可缩短约 25%。原因并非单一,而是网络下载、解析执行、变更检测三条链路同时减压。本篇用严谨推理拆解这两项策略各自的贡献,以及它们叠加后的协同效应;借助真实 Lighthouse 报告与 Angular DevTools 截图说明性能差异,并给出一套可直接ng serve运行的最小示例。原创 2025-06-27 19:27:15 · 682 阅读 · 0 评论 -
旋转标签云的 JavaScript 实现逐行剖析
一段不到五十行的 JavaScript 代码,就能让网页上的一组超链接沿着椭圆轨迹不断旋转,字号、透明度、层级随空间位置而动态变化,从而营造出具有 3D 视觉错觉的Tag Cloud效果。本篇文章基于浏览器渲染原理、三角函数基础与 DOM-API 交互机制,逐行拆解JsTagCloud的实现细节,并通过真实业务场景来说明这种方案的适用边界与优化方向。原创 2025-06-26 11:32:47 · 556 阅读 · 0 评论 -
浏览器通知 API 的前世今生与实战密码
在现代 Web 应用生态里,通过与Push API等机制协同,为开发者提供了一个跨标签页、跨窗口、乃至浏览器关闭后仍可触达用户的异步通信通道。它最初由 W3C 在 2015 年定稿,随后得到主要浏览器实现,并在 2023 – 2025 年间迎来移动端 Safari 的正式加入,使 PWA 能在 iOS 主屏幕获得与原生应用接近的通知体验。API 的核心模型包含权限请求、实例化通知、交互事件以及生命周期管理四大步骤;典型场景涵盖社交提醒、实时协作、系统状态预警、营销再参与等。原创 2025-06-25 18:39:17 · 633 阅读 · 0 评论 -
借助 routesFile 精准控制 Angular Prerender:仅渲染 url.txt 中的路由
在 Angular 17 及之后的版本里,背后调用的是的 prerender builder。只要把关掉,并通过routesFile或命令行指向一份文本清单,构建系统就会生成列表里出现的 HTML。本文围绕这一核心思路,从工作机制、配置要点、到可运行示例与常见陷阱,循序展开,并补充如何用 Node 脚本在 CI 里动态生成 url.txt,以满足上万动态路由的预渲染需求。原创 2025-06-20 23:47:30 · 871 阅读 · 0 评论 -
使用 curl 下载文件另存到本地
企业级脚本里更需要把产物丢进约定文件夹,以便后续程序(解压、安装或扫描)统一读取。不含空格的路径也推荐加引号,防止脚本变量展开后出现空格。若 URL 需要身份验证,不要把敏感 token 写进批处理脚本,可改用环境变量或受保护的。受限于单线程下载,微软文档建议此时使用线程作业来加速,多线程写文件也更适合大文件镜像。将输出重定向到目标目录,是在批处理脚本里避免路径错误的利器。,无论是一次性手动操作,还是 CI 脚本批量处理,都能稳稳落地。,参数风格完全不同。把响应体写入给定文件,而不是输出到标准输出。原创 2025-06-20 23:46:26 · 771 阅读 · 0 评论 -
用 _auth 解锁 curl 请求的正确姿势 —— 从 401 到成功握手的全链路解析
当你在终端里敲下却只收获,而.npmrc里早已静静躺着这样的凭证,看似同在一个工程却形同陌路。本文把视角拉到协议层,拆开_auth的真实形态,说明curl如何拼装头,进一步讨论若目标服务使用 Bearer 方案又该怎样调整。同时穿插 Nexus 私有 npm 仓库的实际案例、从 Git 泄露令牌的惨痛教训,以及若干调试小技巧,帮助你真正把“配置文件里的 token”变成“网络请求里的认证信息”。借助.npmrc中_auth字段内的 Base64 串,你可以在curl请求里添加。原创 2025-06-20 23:45:49 · 937 阅读 · 0 评论 -
使用 InjectionToken 设计可注入的错误传播函数 —— 逐行解析与实践示例
Angular 依赖注入系统里,扮演着“唯一标识符”的角色,用来把抽象概念(接口、回调、配置对象)同具体实现解耦。本文围绕这段短小却内涵丰富的源码,展开逐行语义剖析,进一步说明它在运行时完成“将错误推送给服务器”的职责,并给出一套可直接运行的演示项目。阅读完毕,你会掌握:每一行代码对应的 TypeScript、Angular 语义依赖注入容器在构建、运行阶段如何解析该 token如何在浏览器端捕获异常并通过自定义实现发送到后端遇到时的排查手法。原创 2025-06-20 23:44:57 · 965 阅读 · 0 评论 -
从 ng build --prerender=true 到 ng-localhost —— Angular Prerender 阶段中的内部 HTTP Server 解析
不是 bug,也不是你机器 hosts 文件的残留,而是Angular 构建器在 prerender 阶段创造的一条“虚拟”本地域名。它让 server-side fetch 能解析“站内相对路径”而不必侵入业务代码。看到时,应当检查项目里是否使用了相对 API URL。若需要真正访问后端,可在中写绝对地址,或在回调里注入自定义代理。在调试日志里过滤掉首行提示,改看后续带端口的输出,可减少误判。原创 2025-06-20 23:44:00 · 647 阅读 · 0 评论 -
内联环境变量与 Angular prerender 脚本的跨平台执行机制解析
在许多或Scully项目的README里,都能看到类似这样的单行指令。它通过向后续进程注入环境变量,从而让阶段能够知道当前请求要模拟的origin。这条指令之所以常被放进文档,是因为在离线渲染每个路由时仍需构造绝对URL,而某些 SDK(例如)在生成链接或执行时会查阅来判定主机名。原创 2025-06-19 19:57:29 · 959 阅读 · 0 评论 -
极速而现代的构建利器 esbuild 全景解析
在当今前端工程化飞速演进的背景下,esbuild 凭借 Go 语言实现、极致并行化架构、开箱即用的多语言支持以及对 TypeScript、JSX 和 CSS 的原生处理,成为打破构建瓶颈的新星。官方基准给出 10-100× 的性能差距;众多实践表明,从传统 Webpack/ Rollup 迁移到 esbuild 后,完整增量构建可从数十秒缩短至个位数秒,甚至被 Vite、Snowpack 与 AWS CDK 等基础设施选为核心变换引擎。原创 2025-06-19 19:53:49 · 347 阅读 · 0 评论