终于修复了 Valine 评论在 Safari 不显示问题

2024-03-12 10:34:25 浏览数 (5)

Valine & Safari

不知道使用 ios 设备的博友在浏览本站页面的时候有没有发现一个问题,所有页面评论模块都是不显示的!(记得大胡子哥有评论提醒过我移动端不能评论,还问我是不是故意这样设置的,其实这就是个bug)通过 MAC 审查可以发现控制台报错了,似乎是一个正则语法问题,但这个问题一直以来都没有得到解决,直到今天为止。

不过,这个问题在今天终于得到了解决,只是问题原因非常奇葩,所以也在这里记录一下。

解决过程

先聊下问题解决过程,首先发现这个问题的时候,已经迭代了很多版本更新了,魔改了一大堆东西,包括功能样式交互和一些额外的东西,一如往常的想到了版本回滚,但由于版本实在太多,且很多版都运转不正常,往前的版本和当前版本大小相差甚至达到了30k左右的代码量, 如果单纯的找差异基本来说是不可能的,工作量太大不说,连出错的位置都不知道在哪里。所以换了个思路,

  • 使用代码对比工具进行版本对比
  • 安装 macOS 虚拟机 为笔记本安装黑苹果(Hackintosh)系统,之后再使用 macOS 进行 web 调试。

首先就安装了 macOS,之后使用 Safari 进行调试的时候发现控制台报了个正则错误,外网搜了下发现基本都是 safari 报这个错误,但它报错并没有精确到哪一行,而是直接把代码块标红了,看着一大坨压缩了的代码块,有点绝望。

之后就一直拖着没管

问题根源

买了那个被背刺的 iPad 后,使用 Safari 的时候更多了,这时候在博客上查看评论就不行了,甚至有些写在 valine.js 内的调用功能都被阻塞不显示了,非常的恼火,于是经过一番思索,还是决定用代码对比的笨办法继续搞…

罪魁祸首

终于,在辛苦的对比一下午后,问题的根源被我找到了,只是这个 bug 实在是奇葩,实在让人意想不到。

因为我在初期魔改 valine 的时候会把 valine.js 格式化后再进行修改,最后再压缩上传,而这个解压缩的过程就是造成这个 bug 的翘班!由于每次压缩代码的时候,会自动把空格给压了!这个细节我一直都没注意到,这直接导致了 valine.js 内的一个正则表达式中的空格被删掉了,大家都知道正则中的空格有时候是有大作用的, 恰恰就是因为这玩意活活把我折腾了小半年…

看这个问题代码:

代码语言:javascript复制
    c<s.align.length;c  )/^*- :*$/.test(s.align[c])

有发现问题出在哪里吗?没错,问题就在 /^*- :*$/ 之间的空格没了,正常运行的应该像这样

代码语言:javascript复制
    c<s.align.length;c  )/^ *- : *$/.test(s.align[c])

上面代码修改了之后在 Safari 上就不会再报错了!(因为 VSCode 的这个代码对比对空格高亮很小,tm反复看了好几遍都没看出来,让人无语)

结语

没想到这么一个小问题,能困扰我这么久,一个教训就是每次修改完后,必须在多个平台上运行测试一遍!!

谨记!!!

以上,有问题评论区留言。

0 人点赞