跳到主要内容

12 篇博文 含有标签「实践案例」

查看所有标签

结合 AI 技术构建可视化知识库的尝试

· 阅读需 13 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2024-01-27 20:37:00

在 OpenAI 引领 AI 技术潮流的当下,LLM 成为很多企业跃跃欲试并尝试进行商业化的一个重要技术领域,其中结合 AI 技术进行知识库构建成为了开源社区在该领域最成功的经典案例,恰好团队也有机会基于此进行探索尝试。

交互状态设计:探索 ECharts 与 ZRender 的设计模式

· 阅读需 22 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2023-01-09 23:37:00

通常,对于 Web 页面的交互处理中,尤其是 DOM 元素样式的变化用 CSS 处理是非常简单的,但如果是普通对象呢?问题似乎变得复杂起来了,这篇文章通过探索 ECharts 与 ZRender 在交互状态设计相关方面的源码实现,讨论一下在复杂场景中处理交互状态的设计方案,如何将命令式编码的复杂性通过声明式编码来降低,该怎样应对复杂场景下的状态叠加问题。

Web 3D 开发实践:计算物体在 2D 平面上的像素尺寸

· 阅读需 13 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-12-20 00:09:00

这次是基于中秋节活动时开发 3D 月球组件的经验来开发 3D 地球组件,相比于上一次,这一次很多技术难点都有了现成的解决方案,可以说开发成本降低了三分之二之多,而这些额外的开发成本则花费在隐藏在需求细节中的技术难点。这篇文章主要用来记录开发过程中遇到的一个比较有意义的技术难点,即 3D 空间中的物体投影到 2D 平面中时如何换算像素尺寸,在探索解决该难点的过程中,对 3D 与 2D 空间之间的关系有了一个更深刻的认识。

Web 3D 开发实践:3D 月球组件

· 阅读需 43 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-09-17 17:23:01

恰逢中秋节,有机会参与到一项中秋运营活动的项目中,负责为业务方提供一个移动端场景投放的 3D 月球组件。由于一直接触的是 2D 可视化开发,对于 3D 开发(WebGL)的技术未有深入了解和实践经验,基于对现有社区主流技术的简单了解和团队成员的技术背景,遂选定基于 Three.js 进行开发以降低风险。

这篇文章是基于 3D 月球组件的开发实践,记录 3D 开发实践中了解的一些 Web 3D 技术知识和一些典型问题场景的解决方案。

利用脚本执行 `tsc` 忽略类型检查错误

· 阅读需 4 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-08-13 02:46:00

在发布 npm 包时添加对 TypeScript 类型定义文件的支持会让用户的使用体验增色不少,TypeScript 官方提供了 tsc --emitDeclarationOnly 命令用来生成类型定义文件(.d.ts)。但是,该命令会同时执行类型检查,遇到错误时会报错中断命令行进程,这就使其无法直接集成在 CI 环节在发布 npm 包时自动执行生成类型定义文件的操作。当然,一个解决办法就是解决掉代码中所有的类型检查错误即可,既然讨论到这个问题,必然不会花费额外精力去解决一些历史遗留问题。

TypeScript:扩展第三方库的类型定义

· 阅读需 4 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-01-09 17:36:00

TypeScript 作为 JavaScript 的超集,为 Web 开发带来了强类型语言和类似代码智能提示这种良好的开发体验,而代码提示依赖于类型定义文件。类型定义文件的发展也经历了一个逐步演变的过程,从最初基于 JavaScript 编写的 npm 包,通过社区方案来引入类型定义包,再到目前多数模块基于 TypeScript 编写并在发布时带上类型定义文件这种最佳方案,开发者体验得到进一步的提升。

不过,在使用类型定义文件的过程中我们通常需要和类型定义进行交互,大多数场景可以通过泛型来解决;而有一个典型场景就是需要我们扩展第三方库的类型定义,避免在多个文件中编码时都要引入类型定义的麻烦。可能不是很好理解,在这里通过一个实际的例子就可以解释清楚。

Web 前端调试工具:SourceMap 文件

· 阅读需 8 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-05-07 21:57:00

Web 前端项目出于加载性能优化和安全考虑,在生产环境部署的代码是经过混淆和压缩的,对于利用生产环境收集到的错误堆栈信息要进行调试是非常具有挑战性的。理想情况下,应该在生产环境收集错误堆栈信息,然后映射到源码进行调试。恰好,SourceMap 文件提供了这个机制,可以将编译(压缩)后的代码映射到源代码中。

Web 前端性能优化:案例分析 1

· 阅读需 25 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-03-06 23:28:00

能在真实业务场景中落地 Web 性能优化方案的机会鲜有,大多数时候业务是较为简单而且要求不高的,前段时间恰好有一个比较核心的业务,对稳定性和性能有一定的要求,在这个过程中也算是做了很多尝试和实践,在此作为案例记录一下分析的过程和最终解决的方案。

使用 Jest 和 Puppeteer 构建 Web 自动化测试平台

· 阅读需 13 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2021-08-15 14:54:00

测试为软件的稳定和完善提供了必要的支持,Web 前端开发领域相比于做单元测试,端到端测试更有意义和价值。谷歌发布的 Puppeteer 工具和脸书发布的 Jest 测试工具为 Web 端到端测试提供了极大的便利,这里记录了如何使用它们构建一个 Web 自动化测试平台。