Bilibili-Old项目翻页评论区功能失效分析与架构适配方案

Bilibili-Old项目翻页评论区功能失效分析与架构适配方案

【免费下载链接】Bilibili-Old恢复旧版Bilibili页面，为了那些念旧的人。项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Old

Bilibili-Old是一个开源项目，旨在恢复Bilibili视频平台的旧版页面体验，为偏好传统交互方式的用户提供替代方案。该项目通过Tampermonkey用户脚本和Chrome扩展两种方式实现，主要功能包括恢复旧版播放器、页面布局以及增强的视频下载、弹幕管理等特性。近期，由于B站前端架构的重大调整，项目的翻页评论区功能出现兼容性问题，本文将从技术角度深入分析问题根源并提供完整的解决方案。

快速参考

• 项目类型：浏览器扩展/用户脚本
• 技术栈：TypeScript、ESBuild、Protobuf.js
• 核心功能：旧版页面恢复、视频下载、弹幕管理、翻页评论
• 问题焦点：翻页评论区与新版B站前端架构的兼容性冲突
• 修复策略：DOM选择器适配 + API接口重定向
• 环境要求：Chrome 108+、Tampermonkey 4.18+

问题场景：灰度更新引发的功能中断

近期B站对评论区系统进行了渐进式前端架构升级，这一灰度更新策略直接影响了Bilibili-Old项目的核心功能模块。用户在使用Windows 11系统和Microsoft Edge浏览器(版本128.0.2739.67)环境下，运行v2.2.7版本的翻页评论区脚本时，发现评论区被强制回退到B站原生样式，无法正常使用翻页功能。

Bilibili-Old项目的黑白像素风格图标，象征着对传统界面设计的坚持

这一现象并非偶然性故障，而是平台方技术路线变更的必然结果。B站从2021年4月开始逐步弃用翻页评论接口，转向瀑布流加载模式，这一过程通过灰度发布逐步推进，导致不同用户在不同时间点体验到不同的前端架构。

技术挑战：前端架构变更的深度分析

DOM结构解析与选择器失效

新版B站前端采用了完全不同的HTML结构组织方式，原有的CSS类名和元素ID被重新设计。Bilibili-Old项目中的翻页评论区功能严重依赖于特定的DOM选择器，这些选择器在新架构中已无法匹配对应元素：

• 评论容器选择器变更：从传统的.comment-list变更为基于Web Components的复合结构
• 翻页控件重构：原有的页码导航栏被无限滚动加载机制取代
• 事件监听机制失效：基于jQuery的事件绑定与新版React/Vue的事件系统不兼容

API接口适配困境

B站不仅改变了前端界面，还调整了后端数据接口的规范：

• 请求参数格式变化：新增了签名验证、时间戳校验等安全机制
• 响应数据结构重组：评论数据的嵌套层级和字段命名发生改变
• 分页机制替换：从传统的page/pagesize参数变为cursor/size的游标模式

核心代码模块分析

通过分析项目源码，我们发现翻页评论区功能主要依赖以下关键模块：

1. src/core/comment.ts- 评论组件核心逻辑
2. src/io/api-reply.ts- 评论API接口封装
3. src/utils/hook/node.ts- 网络请求拦截与重写
4. src/utils/element.ts- DOM操作工具函数

项目中的动态加载图标，反映了前端交互中的异步加载状态

解决方案：双向适配策略

短期应对：选择器与API适配

针对当前紧急情况，我们建议采用以下技术方案快速恢复功能：

DOM选择器更新策略

// 旧版选择器 const oldSelector = '.comment-list .page-box'; // 新版适配选择器 const newSelector = '[data-component="comment-list"] .pagination-container';

API接口重定向方案

• 通过jsonpHook拦截原始评论请求
• 将新API格式转换为旧版兼容格式
• 保持前端组件的接口调用方式不变

事件监听兼容层

• 创建中间件层统一事件处理
• 支持新旧两种事件系统的桥接
• 提供降级回退机制

长期策略：架构现代化改造

考虑到B站前端技术的持续演进，建议进行以下架构升级：

1. 模块化重构：将评论功能拆分为独立插件，降低耦合度
2. 配置驱动设计：通过外部配置文件管理选择器和API映射
3. 版本检测机制：自动识别B站前端版本并加载对应适配器
4. 测试自动化：建立完整的回归测试套件

实施指南：分步修复流程

环境准备与项目构建

首先需要搭建开发环境并理解项目构建流程：

# 克隆项目仓库 git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Old # 安装依赖 npm install # 构建Chrome扩展版本 npm run chrome # 构建Tampermonkey脚本版本 npm run tampermonkey

核心修复步骤

1. 分析新版DOM结构

   • 使用浏览器开发者工具审查元素
   • 记录关键CSS类名和属性
   • 建立新旧选择器映射表

2. 更新评论组件选择器

   • 修改src/core/comment.ts中的DOM查询逻辑
   • 添加版本检测和选择器回退机制
   • 保持向后兼容性

3. 适配API接口变更

   • 分析新版评论接口的请求/响应格式
   • 修改src/io/api-reply.ts中的数据处理逻辑
   • 添加参数转换和结果映射

4. 事件系统兼容处理

   • 创建事件适配器模块
   • 统一新旧事件处理接口
   • 确保事件冒泡和委托机制正常工作

测试验证流程

• 在不同B站页面类型（AV/BV、番剧、专栏）进行功能测试
• 验证翻页、排序、回复等核心功能
• 检查与项目其他模块的集成兼容性
• 进行性能基准测试，确保无显著性能下降

技术要点总结

关键实现机制

• 动态选择器适配：基于特征检测自动选择合适的DOM选择器
• API中间件层：透明处理新旧接口差异，保持上层逻辑不变
• 渐进增强策略：优先使用新版特性，降级到旧版方案

环境适配矩阵

注意事项

1. 版本同步问题：B站前端更新频率较高，需要建立持续监控机制
2. 性能影响评估：适配层可能增加少量运行时开销，需优化性能
3. 用户配置迁移：确保用户的自定义设置在新版本中得以保留
4. 错误处理完善：增强异常捕获和用户友好的错误提示

未来展望与持续维护

架构演进方向

Bilibili-Old项目作为第三方兼容层，面临着平台方技术路线变更的持续挑战。未来发展方向包括：

1. 插件化架构：将各个功能模块设计为可插拔组件
2. 配置中心：建立云端配置管理系统，动态下发适配规则
3. 社区协作机制：建立用户反馈渠道，快速响应前端变更
4. 自动化测试框架：实现B站界面变更的自动检测和适配

技术债务管理

• 定期审查和更新依赖库版本
• 重构历史遗留代码，提高可维护性
• 建立完整的文档体系，降低贡献者门槛
• 实施代码质量检查工具，确保代码一致性

扩展阅读建议

对于希望深入了解项目技术细节的开发者，建议阅读以下核心文件：

• src/core/bilibili-old.ts - 项目主入口和全局状态管理
• src/core/comment.ts - 评论功能完整实现
• src/io/api-reply.ts - 评论API接口封装
• src/utils/hook/ - 网络请求拦截和重写工具

通过持续的技术迭代和社区协作，Bilibili-Old项目能够为用户提供稳定可靠的旧版B站体验，同时保持对新技术的适应性。这种平衡传统与创新的技术实践，为类似的前端兼容性项目提供了宝贵经验。

【免费下载链接】Bilibili-Old恢复旧版Bilibili页面，为了那些念旧的人。项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Old