跳到主要内容

桥接模式:跨平台的事件机制设计

· 阅读需 3 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)
最后更新于 2022-06-12 22:22:00

对于 Web 的图表组件库来说,一些功能比较强大的开源库,渲染层可以支持 DOM、SVG、Canvas、WebGL 等多个平台的环境,而图表库的很多功能的实现都和渲染层紧密相关。

最近,在参考学习一些开源的图表组件库时,发现在跨平台设计中,事件机制的实现很有意思,所以在这里以最简化的代码来解释和记录一下这个方案。如果要用经典的软件设计模式来解释,大概就是桥接模式了。

桥接模式(Bridge Pattern) 将一个功能的实现拆分为抽象(Abstraction)和实现(Implementor),让其相互独立的扩展和定义,借助该模式可以设计一种平台无关的软件架构。

从贝塞尔曲线的计算感受数学建模的魅力

· 阅读需 6 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)
最后更新于 2022-05-03 20:38:00

最近在做前端可视化相关的东西,在完成动画效果时,遇到一个不是很好处理的问题,需要让一个元素在画布上以曲线的轨迹进行运动。因为动画这块之前基本也没有怎么接触过,做的也都是简单的线性动画效果,所以碰到这个需求点的时候觉得是有点难度的。

其实,要真的实现按照一定曲线轨迹运动的效果倒也不难,毕竟圆、椭圆方程在平时做布局计算的时候用的也挺多的。但是,用圆或者椭圆计算曲线相当于是找了个特殊场景,不具备通用性;另一方面,说到曲线的绘制,贝塞尔曲线是绕不开的,这也是非常值得考虑的方案。

如何更好的维护开源项目

· 阅读需 12 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)
最后更新于 2022-05-03 16:43:00

一直以来,开源精神被开发者所推崇,开源项目为开发者提供了不用付出除时间以外任何成本就可以学习前沿技术的最佳途径,另一方面,我们应该思考开源为何会成功,在全球开发者参与协作的情况下代码仓库为何能保持整洁、不出现大规模冲突而奔溃,上下游依赖如何管理,这背后有既定的规范进行强约束,也有一系列社区工具来完成复杂而有价值的工作。所以,从参与或者维护开源项目的角度来看,这些社区公认的最佳实践值得我们了解,学习这些东西也能在一定程度上提高我们管理项目的能力。

细数博客的这几年

· 阅读需 8 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)
最后更新于 2022-04-07 22:53:00

最近翻看自己的博客,尤其是对博客代码做了一些改动,不禁有些许感慨。于是,想就博客建立以来历经的这几年种种做个回顾并记录下来。

了解一些互联网名词

· 阅读需 7 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)
最后更新于 2022-03-27 01:04:00

互联网时代是个新概念频出的时代,每年有相当多的新名词诞生,而诸多与商业活动紧密相关的词汇了解一下有助于我们熟悉日常工作中接触的东西。

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

· 阅读需 3 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)
最后更新于 2022-01-09 17:36:00

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

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

解析基于 core-js 与 ESLint 的 Web 兼容方案

· 阅读需 7 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)
最后更新于 2021-12-08 21:12:00

Web 网页为了保证在多个平台和低中高端设备上的体验稳定性和一致性,通常会做 Polyfill 以保证兼容性。

然而,兼容性问题本身是个难题,Polyfill 也并非很好处理,所以在技术演变的过程中,社区达成了一致,有一个主流的方案,大家共同来使用和维护。当下社区的主流方案则是基于 core-js,另一方面, 利用 ESLint 插件则可以做到自动检测代码中需要添加 Polyfill 的 API。

core-js 只是解决了 JavaScript 的兼容性问题,Web 网页还有 CSS / HTML / Web API 的兼容性问题,处理这些问题的过程中,必然会存在大量相似的逻辑,比如目标设备的检测、目标设备的 API 支持情况统计。当然,社区也给出了非常好的方案,下面就来了解一下。

UNIX传奇:历史与回忆

· 阅读需 13 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)
最后更新于 2021-12-05 16:47:00

对于经常看纯技术书籍的人来说,难免会感觉到烦闷,阅读纯技术书籍的过程通常是非常消耗人的,不像看小说,是一个享受和放松的过程。所以,借此机会,找到一本与技术相关但并非纯粹的技术教程类书,讲解了 UNIX 诞生的历史和之后发展壮大的过程,虽然相比于小说还是略有枯燥,但其中也不乏精彩之处,对于一个技术研发成果,从多个角度阐述和讨论,也会让作为从事技术开发工作的人来说有一定的启发。

Web 前端调试工具:SourceMap 文件

· 阅读需 6 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)
最后更新于 2022-05-07 21:57:00

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