34岁老前端的一周学习总结（2025/8/15）

DDD设计模式和落地

学习了DDD设计模式，并以该模式对项目中的复杂逻辑块进行了重构。

对于一个通用项目，DDD模式下的项目结构可能如下：

DDD模式的核心是模块隔离和事件驱动，有较多的编程规范，比如：

跨模块不直接依赖，通过事件交互
service处理业务逻辑，model处理对象数据逻辑
service层调用repo处理数据存储，model层提供存储entity或value object
禁止跨对象的属性使用，对象属性都保持为private
以事件启动各模块的实例化

实现的其中一个难点是IOC容器和DI注解，所有实例化出来的单例对象，都需要放入 application context。

采样算法研究

研究了一些采样算法，包括实时的系统采样（固定步长保留相对极值）和MinMax-LTTB算法。顺便借鉴了下echarts的lttb采样源码。

流式传输

研究了sse和streamable http，将echarts的曲线改为流式传输和增量渲染。

浏览器原生EventSource不支持post请求，最终方案是用fetch请求，用streamReader解析，用AbortController中断。

另外webpack devserver有个小坑，会缓冲数据干扰流式传输，需要配置compress为false。

RxJS

引入了RxJS来处理多种消息订阅，复习了下 merge, of, switchMap, takeUntil, mergeMap的用法。

虽然RxJS很强大，但是多渠道订阅情况下，想通过单subject完成某个数据流所有环节的处理并不是好的做法。

最终方案为自行维护细分订阅，由不同subject完成不同阶段的数据处理，总subject的订阅中根据渠道手动分发，这样能降低subject销毁创建的复杂度，也容易分渠道/分阶段取消订阅和终止消息。

css 列组合选择符

css 复制代码

The following example makes cells C, E, and G gray.


col.selected || td {
  background: gray;
  color: white;
  font-weight: bold;
}

<table>
  <col span="2">
  <col class="selected">
  <tr><td>A <td>B <td>C
  <tr><td colspan="2">D <td>E
  <tr><td>F <td colspan="2">G
</table>