记录几个和Safari有关的坑
前段时间用vue开发移动端应用遇到了几个问题，现在记录一下
- 第一个是和a标签有关的
- 第二个和date format有关
1.a标签的坑
这是一个很简单错误，但是愣是让我找了半天才找到；
1 | <a href="#" @click="$router.go(-1)">返回</a> |
a标签的click返回上级的动作，代码如上所示；
项目中使用了vue-router中router.go(-1)来跳转，一开始在PC和安卓模拟器上试了各种跳转完全没有问题，后来用iPhone来测试之后愣是怎么点都没用反应，期间我试了原生的history.back()/history.go(-1)都没用作用。然后去google找啊找，找到的内容有说Safari不支持History的操作，我信了，然后看的云里雾里，还是没搞懂为什么不支持，如果不支持那其他应用是怎么跳转的，而且以前的项目也都是用history来操作返回的呀，没见过反应说Safari不能使用呀。然后继续在google上找啊找，找到很多都是如下所说的：
1 | 解决方法很简单！加上return false; 就可以了 |
于是我就按他说的做了，嗯，确实可以跳转了，但是这么写也太不优雅了，而且我把javascript: window.history.go(-1);return false;写到function里面通过@click触发之后还是失败，甚是奇怪，这是为什么呢 到底为啥，这时我已经自暴自弃了。本着钻牛角尖的精神我还是不想用上述这么丑的操作，在每个标签里面都写js代码不仅累，而且维护起来也麻烦。在不知道各种试了多久之后，我才恍然醒悟，我以前写a标签里面href都是写成href="javascript:void(0);"的，而这个项目直接复制的美工提供的静态代码，没有注意到他里面写的是href="#"，而且google找到的这个解决办法里面也是写成href="#"的。于是我将href="#"改成了href="javascript:void(0);"，然后重新用手机试了一下发现果然是这里的问题。那么为什么在其他平台的浏览器能行，但是在Safari上就不行，实在是想不通，私以为Safari认为点击之后就是跳到#，也就是向上滚动到锚点#top了，后续的History跳转都不会去执行。那么同时，为什么改成href="javascript:void(0);"配合function就能和直接在html代码里面嵌入js代码达到一样的效果呢？继续google发现有说法是<a href="#" onclick="javascript:return false;">和<a href="javascript:void(0);" onclick="back()">是等价的，这么一说好像确实有道理，毕竟实践的结果确实是等价的。然后他们又说不推荐后者的写法，给出的原因是IE6什么的有问题，看到这里我喷了，IE6？适配？不存在的！我还是按后者写吧，更简洁而且click事件写在function里面方便维护扩展其他功能。同时也有说法是写成javascript:;也能达到同样的效果，这就见仁见智吧我觉得五五开，都可以。
所以这个困扰我大半天的bug，就这么解决了。冷漠脸。感觉浪费了大把青春啊。果然还是因为姿势水平不够，需要更多的积累。
2.Safari里面的Date Format问题
除了上述那个困扰我那么久的问题，另一个就是我在其他平台上都正常的new Date()日期格式化，在Safari里面格式化出来的是invalid date。在后台日期都是被格式化成yyyy-MM-dd HH:mm:ss格式的，但是前台显示不需要时间只需要日期，因为显示的同时要通过时间选择控件修改这个日期，所以没有用substring字符串截取方式直接获得日期，转而在前端用new Date(dateStr)转成Date再通过通用方法格式化成yyyy-MM-dd格式的字符串。
但是在Safari里，界面上显示的都成了Nan-Nan-Nan，通过alert调试发现new Date()得到的是invalid date，但是在电脑上又是正常的。基于上一个问题的经验，我马上去google了一下Safari中日期格式化的问题，果不其然，YYYY-MM-DD格式是包含在ECMAScript标准中的，只是Safari没有实现，没有实现。。。竟然还能这样。
那既然知道为什么了，解决起来也就很简单了，只需要将-改为/再new Date format一下就行了，new Date(dateStr.replace(/-/g, ''))妥妥的解决。