前端开发中 href 使用 javascript:void(0) 的原因解析

引言

一、引言

下半年心态较为浮躁，需要静心学习，告别初级阶段。为此购买了几本相关书籍：

其中最先阅读的是《javascript模式》——尽管该书评价褒贬不一。……（此处省略500字观后感）……在阅读第二章接近尾声时，再次看到“JS中避免使用void”的观点，这勾起了一个困扰已久的疑问：“既然JS中void不推荐，那为何新浪微博、淘宝等主流网站的首页JS操作中，href却普遍设置为javascript:void(0);呢？”

截图为证！

为什么？为什么？都系睇？都系睇？

初学者的疑惑

二、初学者的疑惑

百思不得其解！

每当看到void，都会想起多年前接触C语言时的噩梦。大学期间唯一挂科的科目便是C语言，每次回想都让人想起那位干巴巴的女讲师。像我这种纯良的好学生，大学前甚至没去过网吧，也不清楚程序有何用途，课程开头便噼里啪啦讲变量、语句等抽象概念，每天对着黑色背景敲a、b、c，那种感觉就像小时候被大孩子摁在河底呛水喝，云里雾里，水里土里。想起小时候看过的一个故事：一位在农村上学的小伙子作为交换生去英国交流学习，住在普通热情人家，但没几天就被赶走了——原因是：他尿尿都不掀马桶盖，家里可是有lady的，太不尊重了！而实际上，这位小伙子第一次见到马桶就是在这户人家，他根本不知道马桶盖是干嘛用的，尿尿的时候要掀起来！

这是习惯还是规范？我深感疑惑！所谓javascript:void(0)之流的风气，估计源自那些有C、C++背景的程序员，可以追溯到10年之前……

我正好打开着QQ邮箱，于是查看了其href值，结果为javascript:;：

由此可以证明，void(0)确实是多余的、没用的，那为何这么多网站都使用这个呢？每次都要多敲7个多余的字符，这是要闹哪样，莫非绩效是根据HTML的代码量来算的！

百思不得其解！

然后，我还有更进一步的疑问：JavaScript中语句最后的分号是可以缺省的，那为何要使用javascript:;而不是javascript:呢？

这是习惯还是规范？我深感疑惑！

具有代码洁癖的coder们，没事多写一个分号，圣洁的精神世界杯玷污了，怎么能忍受得了呢？这又不是多多语句，不写分号可能会出现意想不到的情况！

像我这种懒到手抽筋，多写一个字符都会难受到满地打滚的人，实在是想不过来啊想不过来！

或许只因我是个小白，巴神的世界我不懂。

深入探讨

三、深入探讨

我使用href="javascript:"很多年了，一直都是惴惴不安地使用，因为别人都是href="javascript:void(0);"，是不是因为href="javascript:"有什么潜在的问题？比方说影响性能？或者让人不能识别马桶盖？

求指点，求吐槽！

做个简单的总结吧：

请参考下面链接中对于void的说明：

https://www.jb51.net/w3school/js/pro_js_operators_unary.htm

针对上面的问题，借用链接中的代码：

<a onclick="fn()">Does not appear as a link, because there's no href</a> 
<a href="javascript:void(0)" onclick="fn()">fn is called</a> 
<a href="javascript:undefined" onclick="fn()">fn is called</a> 
<a href="javascript:" onclick="fn()">fn is called too!</a> 

上面三个都是等价的。

网友解释与总结

另外给大家附上一则网友对javascript:;和javascript:void(0);的解释

大家看JavaScript脚本经常可以看到这样的代码： 〈a href="javascript:doTest2();void(0);"〉here〈/a〉 但这儿的void(0)究竟是何含义呢？ JavaScript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。

void 操作符用法格式如下： 1. javascript:void (expression) 2. javascript:void expression

expression 是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的，但是写上去是一个好习惯。

你可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。

下面的代码创建了一个超级链接，当用户点击以后不会发生任何事。当用户点击链接时，void(0) 计算为 0，但在 JavaScript 上没有任何效果。

void和#的区别

＃包含了一个位置信息默认的锚点是＃top 也就是网页的上端,而javascript:void(0) 仅仅表示一个死链接。

这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首,而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0)。