为什么使用“javascript: <code>”是不好的？

Question

可能是重复问题：
在onclick中是否需要指定javascript：？

要在DOM事件上执行JavaScript，您可以使用类似于以下内容的代码：

<div onclick="alert('Alert');">Alert</div>​

这样似乎也可以工作：

<div onclick="javascript: alert('Alert');">Alert</div>​

然而，我听说第二个示例是“不好的”，应该使用第一个示例。

这是不好的吗？如果是，为什么不好？alert('Alert')和javascript: alert('Alert')之间有什么区别？

在<a>标签中使用它会有什么不同吗？

<a href="javascript: alert('Alert');">Alert</a>

编辑：澄清一下，我特别是在问javascript:部分，而不是我把JavaScript内联与我的标记混合的方式。对于造成的困惑，很抱歉。

- Zhihao

---

许多人认为在一般情况下，将JavaScript与HTML混合使用是不好的。（我倾向于同意这种看法。） - FishBasketGordo

正如@FishBasketGordo所说，这些都被认为是不好的实践方法，而且它们已经过时了。从维护的角度来看，它们会带来很多麻烦。HTML用于结构，CSS用于样式，JavaScript用于功能和交互性。将它们分开可以简化您的代码，提高可读性，并有助于维护。 - Jeff B

有时候会用到内联JavaScript，但我个人认为应该限制在单个函数调用上以便于维护。此时，onclick="func()" 和常见的添加专用类来挂钩的方法 class="a_class func_class" 之间几乎没有什么区别。 - user1106925

Answer 1

_{哦，神奇的混乱JavaScript世界。你发布的代码可能不会做大多数程序员认为的那样。}

以下每行之间有所不同：

<a onclick="alert('Hello World!')"...>example</a> //V1
<a href="javascript: alert('Hello World!')"...>example</a> //V2
<a onclick="javascript: alert('Hello World')"...>example</a> //V3

尽管它们都会提示Hello World！

第一种（V1）通过[onclick]属性绑定了一个内联的click事件。它还可能包含一个[href]属性，在[onclick]属性执行后导航到另一个位置，或者在代码中绑定任意数量的其他click事件，假设默认行为没有被阻止。

第二个例子（V2）将可执行的javascript: URL设置为[href]属性。它可能还包含[onclick]属性或在外部脚本中绑定的其他click事件。

第一和第二个例子（V1和V2）都执行相同的代码，即：

alert('Hello World!')

第三个例子（V3）通过[onclick]属性绑定了一个内联的click事件，就像V1一样，然而执行的代码不同。执行的代码是：

javascript: alert('Hello World')

虽然它看起来像是一个javascript: URL，但实际上只是在JavaScript中使用标签。

JavaScript中的标签对于跳出嵌套循环非常有用，如下例代码所示：

label: for (i = 0; i < 5; i++) { //labeled line
    for (j = 0; j < 5; j++) {
        console.log(i, j);
        if (i === 2 && j === 3) {
            break label; //this jumps out of both for loops
        }
    }
}

在大多数内联JavaScript中，常常被滥用，因为作者不了解这三种格式之间的区别。

---

为什么使用 javascript: <code> 是不好的？

这是一个先入为主的问题。它假定使用 javascript:<code> 是不好的。

javascript:<code> 并不是不好的。它只是一种工具。工具本身并没有好坏之分，只有使用工具的人才有。即使有人把锤子当成武器，你也不会称它为"坏"。

javascript:<code> 有一些好用的地方。但是在大多数情况下，你不应该使用它，因为它是错误的工具。然而，如果你正在编写一个书签脚本，你就需要使用 javascript:<code> 格式。

此外，有一些小众情境可能会合理地保留javascript内联。例如，在页面上添加一个简单的打印按钮：

<a href="#" onclick="window.print(); return false">Print</a>

尽管即使这个例子也可以很容易地通过使用类和将JavaScript外部化来替换：

<a href="#" class="print">Print</a>
<script>
     //jQuery used for brevity
     $(document).on('click', '.print', function () {
         window.print();
         return false;
     });
</script>

- zzzzBov

---

感谢您出色的解释。我想一个更好的问题应该是“这是什么，它具有什么功能？” - Zhihao

Answer 2

使用javascript:标签并没有真正的问题。但大多数情况下，这被认为是不好的风格。

• onclick处理程序已经是JavaScript，重复使用它是毫无意义的冗余信息（事实上，它通过添加一个名为javascript的标签来改变执行的代码 - 但在大多数情况下，这不会产生任何影响）。
• 在href属性中的JavaScript代码应该更适当地放置在onclick处理程序中，这样您可以使用href为禁用JavaScript的用户提供链接。这被称为渐进增强。

有关更详细的信息，您可能需要查看这篇关于“无用的javascript：伪协议”的优秀博客文章。

- oezi