UserScript护眼模式在Safari浏览器下的兼容性问题解析

在XIU2开发的UserScript项目中，护眼模式的自动切换功能在Safari浏览器中出现了一个有趣的兼容性问题。这个问题涉及到JavaScript日期处理的浏览器差异，值得开发者们深入了解。

问题现象

护眼模式的核心功能是根据当前时间自动切换日间/夜间模式。在Chrome浏览器中运行正常的代码，在Safari下却出现了时间判断失效的情况。具体表现为：在早上时间段（小时数为个位数时），时间比较功能无法正常工作。

技术分析

问题的根源在于不同浏览器对日期字符串解析的差异。原始代码使用了以下格式构造日期对象：

new Date('2022-03-07 ' + hours + ':' + minutes + ':00')

这种格式在Chrome中可以正确解析，但在Safari中却存在问题。经过研究发现，Safari对日期字符串的解析更为严格，主要表现在两个方面：

1. 对于YYYY-MM-DD格式的日期字符串，Safari要求必须包含时区信息
2. 当小时数为个位数时（如早上7点显示为"7"而非"07"），Safari的解析可能会出现问题

解决方案

针对这个问题，开发者提出了两种可行的解决方案：

方案一：补零格式化

let hours = new Date().getHours().toString().padStart(2, '0');
let minutes = new Date().getMinutes().toString().padStart(2, '0');

这种方法通过确保小时和分钟都是两位数来避免解析问题，虽然能解决问题，但不是最优方案。

方案二：修改日期格式

new Date('2022/03/07 ' + hours + ':' + minutes + ':00')

将日期分隔符从连字符-改为斜杠/，这种格式被所有主流浏览器广泛支持，包括Safari。这是更优雅的解决方案，因为它：

1. 不需要额外的格式化代码
2. 遵循更通用的日期格式标准
3. 代码更简洁易读

最佳实践建议

在处理跨浏览器日期解析时，开发者应当注意：

1. 优先使用YYYY/MM/DD格式而非YYYY-MM-DD格式
2. 考虑使用Date对象的构造函数参数而非字符串解析（如new Date(year, month, day, hours, minutes)）
3. 对于复杂的日期操作，推荐使用成熟的日期库如moment.js或date-fns
4. 在关键功能中增加日期解析的异常处理

这个案例再次提醒我们，在Web开发中，特别是在开发跨浏览器用户脚本时，必须充分考虑不同浏览器对JavaScript实现的细微差异。通过采用更通用的日期格式，我们可以确保代码在各种环境下都能稳定运行。