选择JavaScript链接的"href"值："#"还是"javascript:void(0)"？

在开发Web应用时，许多人会在<a>元素上使用JavaScript函数作为链接。默认情况下，这些<a>元素的href属性是一个实际的URL，但为了调用JavaScript函数，许多人会设定href值为#或javascript:void(0)。本文将探讨这两种方法的优缺点，以及一些更好的替代方案。

为什么选择`javascript:void(0)`？

在团队开发中，使用javascript:void(0)有明显的优势。以下是选择javascript:void(0)的三个主要原因：

1. 避免常见错误

当使用#时，开发者常常会忘记在onclick事件后加上return false;。例如：

function doSomething() {
    // 一些代码
    return false;
}

// 正确用法
<a href="#" onclick="return doSomething()">Link</a>

// 错误用法
<a href="#" onclick="doSomething()">Link</a>

使用javascript:void(0)可以避免这种疏忽。

2. 错误处理

当被调用的函数抛出错误时，最终的return false;不会执行。而使用javascript:void(0)则免除了这一隐患，因为不会涉及到返回值的问题。

3. 动态绑定函数

有时候我们需要动态地为元素绑定事件。在这种情况下，我更倾向于使用类似于以下的方法：

onclick="someFunc.call(this)" 或 onclick="someFunc.apply(this, arguments)"

使用javascript:void(0)避免了在这种情况下可能遇到的问题。

为什么应该避免使用`#`？

1. 影响浏览体验

当用户点击链接时，如果href值为#，页面会重新定位到顶部，这会造成不好的用户体验。

2. 搜索引擎优化

使用#可能会影响搜索引擎的爬取行为和索引，javascript:void(0)则不会。

更好的替代方案

虽然javascript:void(0)比#更好，但仍有更优雅的方法来处理这种场景。

1. 不使用`<a>`标签

如果链接只是用于触发JavaScript操作，可以使用其他标签（如<button>或<span>）代替<a>标签，并使用CSS来模拟链接的外观：

<span class="link-like" onclick="myJsFunc()">Link</span>

CSS:

.link-like {
  color: #00f;
  text-decoration: underline;
  cursor: pointer;
}
.link-like:hover {
  text-decoration: none;
}

2. 优雅降级和渐进增强

在考虑到部分用户可能禁用JavaScript时，可以提供一个备选URL，并使用JavaScript来阻止默认行为：

<a href="alternative.html" onclick="myJsFunc(); return false;">Link</a>

或者使用JavaScript注入事件处理程序，这样一来，即便用户禁用了JavaScript，链接仍能正常工作：

<a href="/graceful-degradation-url" class="js-action">Link</a>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('.js-action').addEventListener('click', function (e) {
      e.preventDefault()
      myJsFunc()
    })
  })
</script>

3. 使用`<button>`标签

对于需要通过JavaScript触发的操作，<button>标签可能是更好的选择。<button>标签更语义化，且其行为更接近传统的按钮：

<button type="button" onclick="myJsFunc()">Button Link</button>

通过CSS你可以把<button>标签样式化成链接的样子：

button.link {
  background: none;
  border: none;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

总结

在选择JavaScript链接的href值时，javascript:void(0)比#更合适，但最佳实践是分析具体需求，采取更优雅和语义化的解决方案，例如使用<button>标签或使用优雅降级和渐进增强的方法。通过这些方法不仅能够提升用户体验，还可以提高代码的可维护性和可访问性。

为什么选择javascript:void(0)？