于一的博客
搜索文章
首页
分类
文章
前端开发
情绪
关于我
心路
首页
分类
文章
前端开发
情绪
关于我
心路
于一
无限进步！
全部
默认分类 (182)
前端开发 (184)
HTML+CSS (23)
JavaScript (15)
ES6 (19)
TypeScript (28)
Canvas 2D (21)
图表+ECharts (7)
WebSocket+MQTT (7)
阶段1收官 (7)
Vue3 (14)
Canvas × Vue (7)
阶段2收官 (7)
Three.js (28)
情绪 (0)
【阶段1收官】day66-visual-layout-theme
Day 66 · 大屏视觉工程（上）— 布局系统与工业风主题 Token：从"能跑"到"能看" 同样的数据、同样的图表，好看的大屏和难看的大屏之间隔着一层系统性的视觉工程。今天建两层地基：布局系统（栅格、间距节奏、卡片容器）和主题 Token（把颜色
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
阶段1收官
标签：
#
前端开发
【阶段1收官】day65-store
Day 65 · 数据层整合 — ScreenStore：唯一的数据警察 昨天定下铁律"数据只有 Store 一条路"，今天把这位警察请出来。它要管的事比昨天图纸上画的多：快照的存（最新值 + 滚动窗口）、连接状态的广播、告警的累积列表、按屏幕需求的分频分发。另外还有两个整合期特有的问题：轮播切屏时
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
阶段1收官
标签：
#
前端开发
【阶段1收官】day64-architecture
Day 64 · 项目架构设计 — 大屏不是页面，是一个有边界的小系统 三个作品整合成一个系统，第一件事不是写代码，是画边界：目录怎么摆、屏幕怎么路由、数据怎么流、模块之间谁认识谁。今天全程"图纸作业"——上午产出架构文档（依赖图 + 数据流图），下午把项目骨架搭出来（目录、路由框架、空屏占位）。地
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
阶段1收官
标签：
#
前端开发
【WebSocket+MQTT】day63-boss-realtime-panel
Day 63 · BOSS 战：实时监控面板 — 把六天的零件拧成一条生产级数据链路 上周的面板跑在定时器模拟数据上，你留了一个 DataSource 接口和一句承诺：“第 9 周换真实数据源，接口不变、零改动”。今天兑现承诺的时刻：本地搭起 WebSocket 服务器模拟设备推送，客户端用本周六天
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
WebSocket+MQTT
标签：
#
前端开发
【WebSocket+MQTT】day62-message-scheduler
Day 62 · 高频消息性能 — 批处理、节流与 rAF 对齐：消息风暴的调度艺术 假设链路已经完美：连接稳定、数据不丢。现在服务器把推送频率提到 20Hz（甚至 100Hz 的振动通道）——每秒 100 次 onmessage，每次都去 setOption 更新图表：渲染队列爆炸、主线程被切成碎
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
WebSocket+MQTT
标签：
#
前端开发
【WebSocket+MQTT】day61-backfill
Day 61 · 断线重连与数据补传 — 让丢掉的时间自己长回来 本周到目前为止的链路有个致命缺陷：断线 30 秒重连成功后，这 30 秒的数据永久消失了——曲线上一段刺眼的空白，值班员无从判断空白里有没有发生过超温。今天解决实时系统最难也最能体现工程功力的问题：数据补传（backfill）。涉及三
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
WebSocket+MQTT
标签：
#
前端开发
【WebSocket+MQTT】day60-mqtt
Day 60 · MQTT 与工业物联网协议 — 发布/订阅的世界观，QoS 的保证书 这周你的服务器一直在"点对点"推数据——它必须知道每个客户端要什么、连没连、断了怎么补。而工业现场的世界观完全不同：设备只管往 Topic 上发布，谁在订阅、有多少人订阅，设备根本不知道也不关心。这就是 MQTT
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
WebSocket+MQTT
标签：
#
前端开发
【WebSocket+MQTT】day59-binary-protocol
Day 59 · 二进制协议 — TypedArray 视角下的传感器数据编码 传感器一秒推一次 JSON 没什么问题；但振动传感器是 1kHz 起步、一个网关下有几百个通道——JSON 的体积和解析成本立刻爆表。今天用第 2 月 Week 6 打下的 ImageData/TypedArray 地基
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
WebSocket+MQTT
标签：
#
前端开发
【WebSocket+MQTT】day58-heartbeat-reconnect
Day 58 · 心跳与重连 — 半开连接的死刑判决书与指数退避的艺术 昨天埋下的最大隐患今天爆雷：拔掉网线，你的页面 10 分钟内都显示"连接正常"。这不是 bug，是 TCP 的天性（半开连接）——物理链路断了，但没有人在上面说话，谁都不知道对方已经没了。今天的两个主题环环相扣：心跳负责判决连接
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
WebSocket+MQTT
标签：
#
前端开发
【WebSocket+MQTT】day57-websocket-basics
Day 57 · WebSocket 协议与 API — 借 HTTP 的壳，干全双工的活 打开一个 WebSocket 连接，浏览器发出去的第一个请求长得完全像 HTTP 请求——这是协议设计史上最优雅的兼容方案之一：借 HTTP 的 101 状态码完成"协议升级"，之后这条 TCP 连接就不再是
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
WebSocket+MQTT
标签：
#
前端开发
【图表+ECharts】day56-boss-dashboard
Day 56 · BOSS 战：工厂设备监控面板 — 图表模块的毕业考核 六天攒下的全部零件今天上生产线：Day 52/53 的 option 骨架与联动、Day 54 的性能武器、Day 55 的四类图表与主题、第 7 周的多层画布与交互内核（大屏壳）。产出是一个工厂设备监控面板——它不是练习，是
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
图表+ECharts
标签：
#
前端开发
【图表+ECharts】day55-industrial-charts
Day 55 · 工业大屏常用图表 — 仪表盘、雷达、拓扑与主题定制 工业大屏的图表选型和互联网 BI 完全不同：BI 追求信息密度，大屏追求三米外一眼可读。今天的四类图表是工业大屏的高频主角：gauge 仪表盘（设备温度/压力/液位）、radar 雷达图（设备健康度多维评估）、graph 拓扑图（
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
图表+ECharts
标签：
#
前端开发
【图表+ECharts】day54-echarts-performance
Day 54 · ECharts 性能优化 — 10 万点的 60fps 之路 昨天的面板几十个数据点，怎么画都流畅。但工业场景的真实数据量是：10 万点传感器历史曲线、上千台设备的实时状态、百万级事件散点。数据量每上一个台阶，都有一个对应的优化武器。今天的产出是一份压测报告：亲手把 10 万点折线
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
图表+ECharts
标签：
#
前端开发
【图表+ECharts】day53-dataset-components
Day 53 · ECharts dataset 与组件进阶 — 数据与视图分离，多图联动的正确姿势 昨天你把 series 的 data 写死在 option 里——只有一个图表时没问题，但工业面板是一个数据源喂多个图表 + 数据频繁更新 + 图表间联动。今天解决三件事：dataset 让数据独立
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
图表+ECharts
标签：
#
前端开发
【图表+ECharts】day52-echarts-core
Day 52 · ECharts 入门 — option 不是配置文件，是你手写过的东西的声明式包装 两天手写攒下的心智模型今天开始变现。学 ECharts 的正确姿势不是"背 option"，而是每学一个配置项都问：这对应我手写的哪个函数？ 今天先搭好骨架：init、option 结构、组件模型、
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
图表+ECharts
标签：
#
前端开发
【图表+ECharts】day51-handwritten-linechart
Day 51 · 手写折线图 — 平滑曲线、面积渐变、最近点命中与十字准线 昨天的柱状图是"类目 vs 数值"，今天的折线图是"趋势"——时间序列数据（温度曲线、产量走势、告警频率）是工业可视化的一半江山。折线图比柱状图多三个难点：平滑曲线怎么画不"过冲"、鼠标在空白处怎么找到最近的数据点（十字准线
作者：mario
发布时间：2026-09-03
分类：
默认分类
,
图表+ECharts
标签：
#
前端开发
【图表+ECharts】day50-handwritten-barchart
Day 50 · 手写柱状图 — 比例尺、刻度算法、动画，把"图表"拆成数学 ECharts 一个 type: 'bar' 背后发生的事：计算坐标轴范围 → 生成"好看"的刻度 → 把数据映射到像素 → 绘制矩形 → 播放入场动画。今天全部自己写一遍。写完你会发现：图表不是"画图"，是"数学 + 绘
作者：mario
发布时间：2026-09-02
分类：
默认分类
,
图表+ECharts
标签：
#
前端开发
【Canvas 2D】day49-boss-flowchart
Day 49 · BOSS 战：流程图编辑器 — Canvas 进阶的毕业考核 六天积攒的武器，今天全部上战场：文本排版引擎（Day 43）画节点标签、clip 蒙版（Day 44）做选中高亮、碰撞检测（Day 45）防节点重叠、脏矩形（Day 46）保住 60fps、多层画布（Day 47）分离静
作者：mario
发布时间：2026-09-02
分类：
默认分类
,
Canvas 2D
标签：
#
前端开发
【Canvas 2D】day48-interaction-manager
Canvas 图元交互内核 — 命中优先级、拖拽、框选，编辑器的交互引擎 前面积累的所有零件今天组装成一个模块：InteractionManager（交互管理器）。它统一处理编辑器类产品的全部交互：点击选中（谁在上面选中谁——命中优先级）、hover 悬停（光标反馈 + 高亮）、拖拽移动
作者：mario
发布时间：2026-09-02
分类：
默认分类
,
Canvas 2D
标签：
#
前端开发
【Canvas 2D】day47-multi-layer
Canvas 多层画布架构 — 静态层、动态层、交互层，各司其职 脏矩形解决了"重绘多少"，但它要求所有内容共享一块画布——网格背景、设备图元、选中框搅在一起，每次都要小心维护 z 序和脏区。多层画布从架构层面根治问题：几块同尺寸的 canvas 像千层饼一样叠在 DOM 里，按"变化频率"分层——
作者：mario
发布时间：2026-09-02
分类：
默认分类
,
Canvas 2D
标签：
#
前端开发
共 183 篇文章
1
2
3
4
5
6
7
8
9
10
页
# 情绪
(0)
# 前端开发
(183)
友情链接
github
Gitee
