Valine 评论选填 url 跳转错误

文章摘要moonshot-v1-8k

本文主要讨论了使用Valine评论插件时，填写选填项url时可能出现的跳转错误问题。作者通过分析源码发现，Valine默认不输出http://到url，但如果不填写http(s)://，链接会以当前域名做跳转导致404错误。为了解决这个问题，作者提出了一种解决方案：在鼠标移入链接时判断链接是否与源码冲突，如果是则重写链接。作者还提到了移动端第一次点击链接不会跳转的bug，并给出了解决方案。

错误的跳转链接

据热心网友 @Zsedczy 反馈（滑稽）使用评论的时候的选填项url填写时如果包含 http(s):// 会导致链接跳转出错（valine会输出重复的 http(s):// url）

刚开始看了下源码，因为修改过所以以为是改了源码的问题，但其实是valine原本就存在的问题。

其实 Valine 默认是不输出 http:// 到 url 的，但是这本身会导致一个问题就是：如果不填（http(s)://）链接会以当前域名做跳转导致404，所以需要稍微调整一下。

思路

点击跳转页面时，判断当前用户输入的url是否与自带 http(s):// 的源码冲突，是则重写url，否则不处理。

本例使用的是鼠标移入 mouseenter 行为，不用遍历是因为评论是动态插入的，需要 on 做动态元素处理。重写过程：鼠标移入链接，判断链接，修改链接。

$('.content-all').on('mouseenter','.v .vlist .vcard .vhead a.vnick',function(){
    let _this = $(this),
        _thisLink = _this.attr('href');
    if(!_this.hasClass('reUrl')){
        _this.addClass('reUrl');
        let _thisLinkLen = _thisLink.length;
        if(_thisLink.match('http://http://')){
            _thisLink = _thisLink.substr(14,_thisLinkLen);
            _this.attr('href','http://'+_thisLink);
        }else if(_thisLink.match('http://https://')){
            _thisLink = _thisLink.substr(15,_thisLinkLen);
            _this.attr('href','https://'+_thisLink);
        }
    }
});

已知存在的bug

• 移动端第一次点击链接不会跳转，第二次之后才会执行（遍历不会造成该问题）
• 0

该bug可用的解决方案

setTimeout一个定时器在定时器规定时间内查找并操作动态加载的dom直到操作完成，移除定时器。