- 博客(71)
- 收藏
- 关注
原创 WebActiveX浅析
WebActiveX是特定历史时期(Web 标准功能薄弱、IE 浏览器占主导地位)的产物,它通过牺牲安全性和跨平台性换取了强大的本地系统访问能力。在今天,它已被视为一种过时、危险且应被淘汰的技术。现代 Web 开发的首选是遵循W3C 标准,使用各种新的Web API来实现所需功能。只有在维护非常古老的、仅面向内部且限定使用 IE 的企业级系统时,才可能遇到它。对于任何新项目,都不应再考虑此方案。
2025-11-06 09:46:18
1039
原创 Web3.js 全面解析
/ Web3.js 模块架构core: {web3: "主入口类",providers: "提供者模块 - 连接区块链",eth: "以太坊区块链交互",net: "网络信息",utils: "工具函数库"},contracts: "智能合约交互",accounts: "账户管理",personal: "账户操作(已弃用)",bzz: "Swarm去中心化存储",shh: "Whisper协议"完整的区块链交互- 账户、交易、合约、事件丰富的工具函数。
2025-11-05 15:54:05
684
原创 前端前沿技术
领域需要关注和学习的技能AI融合学习如何与AI协作编程,了解WebGPU和浏览器内ML的基础知识。全栈与架构精通和全栈框架(Next.js, Nuxt),掌握tRPC和Monorepo管理。性能优化从关注加载指标转向关注运行时性能(QSQP),深入理解流式渲染。类型安全TypeScript成为必备技能,并了解端到端类型安全的全栈实践。平台能力持续关注新的Web API,如WebGPU,思考如何用它创造更好的用户体验。核心心态:前端工程师正在向“用户体验工程师”或“应用开发者”演变。
2025-11-05 14:34:13
1183
原创 web前端 DSL转换技术
Web前端的DSL转换技术,本质上是将声明式的UI/逻辑描述,通过编译时或运行时的手段,自动化地、高保真地转换为可执行的Web代码。它是前端工程化、低代码、跨端解决方案的基石。掌握这项技术,意味着你能够创造工具而不仅仅是使用工具,从而极大地提升前端团队的开发效率和一致性。
2025-11-05 14:08:47
471
原创 手把手封装一个webassemble
C/C++ 代码编写:使用导出函数编译配置:各种 Emscripten 编译选项JavaScript 封装:创建易用的 API 接口内存管理:处理数组和字符串的内存分配错误处理:完善的初始化检查和错误处理性能对比:与 JavaScript 实现的性能比较确保 Emscripten 环境配置正确运行./build.sh编译在支持 ES6 模块的服务器中打开这样的封装使得 WebAssembly 模块易于使用,同时保持了高性能的优势。
2025-11-04 15:32:28
697
原创 Webpack loader 的执行机制
执行方向:normal loader 从右到左,pitch loader 从左到右优先级链式处理:每个 loader 处理前一个 loader 的输出可中断:pitch 阶段可以中断 loader 链单一职责:每个 loader 只完成一个特定任务理解 loader 的执行顺序对于优化构建流程和调试构建问题非常重要。
2025-10-31 11:11:51
511
原创 ESLint 配置文件 (.eslintrc.js) 完整指南
ESLint 是 JavaScript 和 TypeScript 的静态代码分析工具,用于识别和报告代码中的问题。以下是配置文件的完整指南。
2025-10-23 16:55:10
449
原创 React 官方推荐使用 Vite
React 官方推荐 Vite 是一个顺理成章的决定,因为它代表了前端工具链的未来方向:更快的速度、更好的开发体验和更现代的架构。对于新项目,除非有特殊原因必须使用 CRA,否则强烈建议从 Vite 开始。对于现有的 CRA 项目,如果开发速度让你感到痛苦,可以考虑迁移到 Vite。Vite 官方提供了迁移指南,过程通常比较顺利。总而言之,拥抱 Vite 就是拥抱一个更快、更愉快的 React 开发体验。
2025-10-17 09:19:13
714
原创 interface和type
特性interfacetype声明合并✅ 支持❌ 不支持扩展extends实现类✅ 支持✅ 支持联合类型❌ 不适合✅ 适合元组类型❌ 不适合✅ 适合映射类型❌ 不适合✅ 适合一般建议:优先使用interface定义对象结构,使用type处理复杂类型操作。
2025-10-16 14:19:49
194
原创 TensorFlow.js 中最前沿和强大的功能之一——Agents
TensorFlow.js Agents 是一个库,用于在浏览器中实现强化学习。它允许你创建能够通过与环境交互来学习最优行为的智能体(Agents)。
2025-09-25 10:53:04
317
原创 视频剪辑入门
视频剪辑是一项非常有创意和实用价值的技能。无论你是想记录生活、制作Vlog、创作短视频,还是想向专业领域发展,这份从入门到精通的指南都将为你提供清晰的路径。:形成个人风格 -> 掌握专业工作流 -> 精通特定领域 -> 持续创作与创新。视频剪辑是一场有趣的马拉松,享受从无到有创造出一个世界的乐趣吧!:学习剪辑思维 -> 提升音频质量 -> 学会基础调色 -> 运用关键帧。:熟悉软件 -> 完成第一个视频 -> 掌握粗剪、加音效、加字幕。当你熟悉基本流程后,需要学习以下技巧来提升视频质量。
2025-09-24 16:34:39
1413
原创 webpack-dev-server使用
使用方式描述适用场景配置文件 (devServer最常用,在中声明式配置。绝大多数项目,配置可版本化管理。编程式创建和启动服务器,灵活性最高。需要与其他 Node.js 服务集成或进行复杂逻辑控制时。命令行 (CLI)快速覆盖配置项,临时调整参数。在脚本中或临时手动执行时。要获取最完整和最新的 API 列表,建议始终查阅官方文档。官方文档。
2025-09-22 17:31:28
934
原创 ahooks中的api分析
ahooks丰富能力:提供 React 原生所没有的、但在业务开发中极其常见的 Hooks。提升效率:封装复杂逻辑,让开发者通过一个简单的 Hook 调用就能实现复杂功能。优化性能:内置了多种性能优化策略,如自动请求防抖、节流、依赖管理、自动清理副作用等。其 API 设计遵循一致性、易用性和高性能的原则。开发者友好:API 命名清晰,参数设计直观,与 React 原生 Hooks 风格保持一致,学习成本低。开箱即用。
2025-09-22 15:08:12
813
原创 JavaScript 中使用锁的场景
在 JavaScript 中,由于单线程特性,通常不需要传统多线程环境中的锁机制。但在异步编程、Web Workers 和某些并发场景下,仍然需要类似的同步机制。
2025-09-18 10:22:56
259
原创 贪心算法与动态规划
贪心算法是一种在每一步选择中都采取在当前状态下最好或最优(即最有利)的选择,从而希望导致结果是全局最好或最优的算法。核心思想:“每步都贪心地选择眼前最好的,不去考虑整个未来的长远情况”。它就像我们生活中“只顾眼前利益”的决策方式。例如,在找零钱时,为了凑出某个金额,我们总是先给出最大面额的钞票,然后再给更小的,这就是一种贪心思想。贪心算法是一种强大而直观的“短视”算法。它通过一系列局部最优决策来构建解,期望最终得到全局最优解。核心:制定正确的贪心策略。关键:问题必须具有贪心选择性质和最优子结构。陷阱。
2025-09-16 17:16:10
538
原创 提升前端性能的 9 个高级 API 的实战攻略
API解决的核心性能问题使用场景滚动监听引起的重排懒加载、无限滚动、曝光统计主线程阻塞复杂计算、数据处理低优先级任务抢占资源日志上报、非关键预加载低效的尺寸监听响应式组件、图表重绘低效的 DOM 变更监听动态内容初始化、第三方 SDK同源页面状态同步多标签页状态同步后台资源浪费暂停视频、动画、轮询资源加载时机晚优化关键资源加载顺序海量 DOM 节点性能压力大型列表、表格渲染注意事项兼容性。
2025-09-16 17:15:00
343
原创 Spring Cloud微服务
微服务架构是一种将单一应用程序作为一套小型服务集合来开发的方法。运行在自己的进程中:服务之间相互隔离。围绕业务能力构建:例如,用户服务、订单服务、商品服务。通过轻量级的通信机制进行交互:通常是 HTTP RESTful API 或消息队列。可以独立部署、扩展和更新:修改一个服务无需重新部署整个应用。拥有独立的数据库:实现数据自治,避免紧耦合。痛点服务发现:服务这么多,如何找到它们?配置管理:成百上千个服务的配置如何集中管理?服务容错:一个服务挂了,如何避免雪崩效应?API 网关。
2025-09-08 16:44:29
891
原创 Web Vitals指标
Web Vitals是 Google 推出的一项计划,旨在提供统一的指标指南,用于衡量网页的用户体验质量。它定义了一系列最重要的、最能反映真实用户体验的性能指标。你可以把它看作是衡量网站“健康度”的核心体检指标。最初,Google 定义了三个核心 Web 指标,作为所有网站都应该努力达好的最基本要求。后来,又扩展了更多指标来提供更全面的视角。指标英文全称衡量维度良好标准优化方向LCP加载性能≤ 2.5s优化服务器、资源加载FID/INP交互响应度≤ 100ms拆分长任务,优化JSCLS。
2025-09-08 16:20:06
716
原创 tensorflow.js 使用场景
一切需要在浏览器或 JavaScript 环境中实现智能交互的地方。它降低了机器学习的使用门槛,让 Web 开发者也能轻松地为产品注入 AI 能力,同时带来了隐私、实时、离线的巨大优势。它并非要取代 Python 的 TensorFlow/PyTorch 在复杂模型研究和训练中的地位,而是作为其强大的补充,将AI能力民主化和普及化到Web这个最大的平台之上。
2025-09-08 15:50:07
873
原创 低代码核心原理总结
/ 应用元数据模型// 页面配置// 组件配置// 数据模型// 业务逻辑// 工作流程// 权限配置// 组件元数据// 组件类型:form、table、chart等// 组件属性// 事件配置// 样式配置// 数据绑定配置元数据驱动:一切配置都存储为结构化数据可视化编程:通过拖拽和配置代替手写代码组件化架构:可复用的功能模块数据绑定:自动同步UI和数据状态代码生成:将配置转换为可执行代码解释执行:运行时动态解析和执行配置扩展机制:通过插件系统增强功能。
2025-09-05 11:24:56
293
原创 React Fiber 风格任务调度库
id: string;frameTime?: number;: number;: boolean;timeout?: number;options?frameTime?: number;: number;: boolean;timeout?: number;
2025-09-05 11:15:19
526
原创 PNPM库离线安装方案
方案适用场景推荐度方案一:离线镜像需要长期、稳定地在无网络环境工作;项目依赖复杂。⭐⭐⭐⭐⭐最佳方案二:pnpm pack只有极少数私有包需要处理;临时、一次性的需求。⭐⭐⭐简单场景可用方案三:复制目录临时应急,并且你清楚自己在做什么。⭐不推荐,易出错强烈建议你采用方案一(离线镜像),这是最彻底、最可靠且一劳永逸的方法,特别适合企业级项目的离线部署和开发。
2025-09-05 11:13:38
3080
原创 cicd工作流浅析
CI/CD 工作流不仅仅是一套工具,更是一种文化和实践。它通过自动化“从代码提交到生产部署”的整个流程,建立了一个高效、可靠且可重复的软件交付管道,是现代 DevOps 文化的基石。成功实施 CI/CD 需要开发、测试和运维团队的紧密协作,以及对自动化、质量和监控的持续投入。
2025-09-05 11:08:59
1046
原创 react 逻辑抽取&视图分离
/ useUserData.js (逻辑层)try {// UserProfile.js (视图层)return (<div></div>更好的可测试性:逻辑和视图可以独立测试代码复用:业务逻辑可以在多个组件间共享关注点分离:开发者可以专注于单一职责维护性:修改逻辑不影响视图,反之亦然团队协作:前端和设计可以并行工作。
2025-09-05 11:06:19
312
原创 vite与webpack对比
特性赢家说明开发启动速度Vite🚀碾压性优势,无需打包。开发热更新 (HMR)Vite🚀基于 ESM,更新粒度更细,速度更快。生产构建优化平手🤝Webpack 更可配置,Vite (Rollup) 开箱即用,结果通常都很优秀。生态成熟度Webpack🏛️经过多年沉淀,生态无敌,解决方案覆盖所有场景。配置复杂度Vite✅开箱即用,默认配置已优化,学习成本低。结论:Vite 代表了前端工具链发展的新方向,它利用现代浏览器的原生能力,极大地提升了开发体验。对于大多数新项目来说,
2025-09-04 17:22:36
1146
原创 webpack scope hositing 和tree shaking
优化解决了什么问题?带来的好处引入了整个库但只使用一小部分减小打包体积模块包装函数带来的体积和性能开销减小打包体积并提升运行时性能它们是现代前端构建流程的基石,通过协同工作,共同打造出体积更小、性能更优的应用程序 bundle。要最大化利用它们,关键在于编写“可摇树”的代码(使用 ESM 语法)和正确配置库的属性。
2025-09-04 17:20:25
1127
原创 npm/pnpm软链接的优点和使用场景
软链接的核心优势在于它创建了一个指向原始位置的轻量级指针,而不是复制一份完整数据。节省磁盘空间:无需复制文件,多个项目可以共享同一份物理文件。提升效率:创建链接的速度远快于复制大量小文件(更快)。代码修改也能立即在所有链接的地方生效,无需重新安装或构建。保持一致性:所有链接都指向同一个源,确保了使用的都是同一份代码,避免了版本不一致的问题。下面我们分别看 npm 和 pnpm 是如何利用这些优点的。特性npm 的软链接 (npm linkpnpm 的软链接 (核心架构)主要优点。
2025-09-04 17:17:11
774
原创 webpack-obfuscator混淆源代码
identifierNamesGenerator :‘mangled-shuffled’, // 将变量/函数名替换为短随机字符。numbersToExpressions: false, // 将数字转换为表达式。controlFlowFlattening: false, // 控制流程扁平化。deadCodeInjection: false, // 注入死代码。stringArray: false, // 启用字符串数组化。simplify: false, // 简化。
2025-08-26 10:59:21
507
原创 Node.js 精选:50 款文件处理与开发环境工具库
以下是专门针对文件处理和开发环境优化的 50 个 Node.js 工具库精选,涵盖文件操作、开发工具、调试辅助等多个方面。
2025-08-12 16:26:28
876
原创 Redux 扩展与标准化模板方案
通过以上扩展方案,可以构建出结构清晰、易于维护且功能强大的Redux架构,适用于各种规模的前端应用开发。根据项目需求,可以选择性地采用这些方案进行组合使用。
2025-07-06 00:00:00
361
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅