5

关于使用链接/<a> 标记与站点中其他页面的显式hrefs（即href="/blah/blah/blah.html）与具有hrefs/divs/等的最佳实践是什么？没有明确的 href 并且在 main.js 文件中使用 JavaScript 将其 onclick 设置在文档就绪处理程序中。

在 Web 开发方面，我不是专家，但我很喜欢学习 jQuery 等，并且发现自己订阅了 Unobtrusive JavaScript 的概念。虽然上面的两个选项都没有打破这种心态的“HTML 中没有 JavaScript”部分，但我想我已经挂断了“结构和表示与行为的分离”。虽然我承认将 <a> 标记放在那里并明确设置 href 更自然，但我发现自己认为这确实是一种行为，因此应该在 JS 中设置。

这会很远，还是我只是不习惯？我的另一面看到了将它放在 JS 中的好处，b/c 现在我有能力完全控制该链接的行为，而无需更改 HTML 中的任何内容。我猜你会说我在众所周知的围栏上。请帮我下来。=)

（请注意：该站点大量使用 JavaScript，因此关闭 JS 提供功能的想法并不是一个真正的问题，因为没有它，大多数站点将无法运行。）

4

5 回答 5

10

由于多种原因，这确实走得太远了。

  1. 它主要是棘手的代码，应该避免。
  2. 它不会为您的网站带来切实的好处。
  3. no-js 没有雄辩的后备方案。
  4. 它对SEO有负面影响。具体来说，机器人不会运行您的脚本，因此不会看到链接，最终不会正确索引您的网站。
  5. 可能最重要的是，这种影响会严重影响屏幕阅读器或禁用 JS 的用户的 UX（例如，许多手机浏览器禁用 JS）

最后，除非您明确需要打破常规（例如遗留支持），否则您应该尽最大努力遵循不引人注目的设计，这在您使用 JavaScript 创建静态结构的意义上是非常突兀的，即最好用 HTML 来完成。

于 2010-10-28T04:11:43.963 回答
6

普通用户不会真正知道其中的区别。但是，如果您希望蜘蛛跟踪它们，搜索引擎和 SEO 实践将要求您使用 href="" 链接到您的其他页面。如果访问者正在使用某些屏幕阅读器或有一些特殊的可访问性需求，情况也是如此。其中许多人阅读源代码而不是 DOM。

通常，如果您要链接到页面和操作，请使用 href。

如果您需要附加额外的功能或不真正转到另一个页面或操作，则使用 javascript onclick 样式，或使用 jQuery 附加事件。

于 2010-10-28T04:07:36.650 回答
4

链接不是行为——它们代表一个文档和另一个文档之间的链接。当您单击链接时，Web 浏览器提供导航到链接页面的行为，但这是浏览器的行为，并且每个浏览器都有自己的约定来最好地做到这一点 - 例如，主要点击可能会在当前打开页面选项卡，中键可能会在新选项卡中打开，M4 可能会在新页面中打开链接。用行为替换这些原始信息会破坏浏览器提供这种选择的能力。

And there are other clients that would be affected as well. Spiders and other bots will read your page for the information in your anchor tags to determine what the page is linked to. If you instead use "behavior," you're stripping this meaningful information from the page.

于 2010-10-28T18:53:06.073 回答
1

同意其他海报。我要补充一点，如果 href 是静态的——即该页面上的交互不会改变它的值——那么您可以将其视为页面“结构和呈现”的一部分。在不寻常的情况下，它是动态的并且页面上的某些操作改变了它的值——这就是它变成“行为”的时候——只有这样才适合让 JS 处理它。

另一方面，如果现有代码已经有 9 个动态设置的 href，而您只是添加了一个静态 href，我可能会遵循前一个开发人员的指导以提高可读性。

于 2010-10-28T04:28:27.663 回答
1

jquery 历史插件非常好，它允许你设置 href='#/url" 这样你就可以拥有真正的 url，真正的后退按钮，但是你的处理程序只是监听绑定到 history.url 的事件。

http://tkyk.github.com/jquery-history-plugin/

对于使用屏幕阅读器的视障用户来说，不使用标签也可能会出现某种可用性问题。

于 2010-10-28T18:22:01.783 回答