默认情况下，JSF 会生成不可用的 ID，这与 Web 标准的 CSS 部分不兼容 [英] By default, JSF generates unusable IDs, which are incompatible with the CSS part of web standards
问题描述
活跃的 JSF(或 Primefaces)用户能否解释为什么默认情况下会发生这种情况，为什么没有人对此采取任何措施:
Can someone who is an active JSF (or Primefaces) user explain why by default this happens why nobody is doing anything about it:
<p:commandLink id="baz" update=":foo:boop" value="Example" />
生成的标记不能在没有 hack 的情况下在 JavaScript 或 CSS 中使用，通常应被视为无效:
Which generates markup that cannot be used in JavaScript or CSS without hacks and should generally be considered invalid:
<a href="javascript:void(0);" id=":foo:bar:baz">Example</a>
此处的 id=":bar:baz:foo" 属性包含冒号，至少从 CSS 的角度来看，这不是该属性的有效字符.
The id=":bar:baz:foo" attribute here contains colons, which aren't a valid character for this attribute, at least from CSS perspective.
虽然该属性根据规范可能是有效的，但它无法与现实世界的 JavaScript 和 CSS 实现一起使用.
While the attribute may be valid according to spec, it fails to work with real-world JavaScript and CSS implementations.
简而言之，JSF中默认的id属性生成无法用于前端开发.
In short, default id attribute generation in JSF is unusable for front-end development.
推荐答案
选择 : 是因为这是唯一可以保证最终用户不会意外使用它的合理分隔符在 JSF 组件 ID(这是 已验证) 和可以通过使用 转义它在 CSS 选择器中使用它.
The : is been chosen because that's the only sensible separator character for which can be guaranteed that the enduser won't accidently use it in JSF component IDs (which is been validated) and that it's possible to use it in CSS selectors by escaping it with .
请注意，HTML4 规范 说冒号是id 和 name 属性中的 valid 值.因此，您抱怨它与网络标准"不兼容.无处可去.
Note that the HTML4 spec says that the colon is a valid value in id and name attribute. So your complaint that it isn't compatible with "web standards" goes nowhere.
ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后面可以跟任意数量的字母、数字 ([0-9])、连字符(-")、下划线(_")、冒号(:")和句点(.").
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
唯一的问题是 : 是 CSS 选择器中的一个特殊字符，需要对其进行转义.JS 本身没有冒号问题.document.getElementById("foo:bar") 工作得很好.唯一可能的问题是在 jQuery 中，因为它使用 CSS 选择器语法.
The only problem is thus that the : is a special character in CSS selectors which needs to be escaped. JS has at its own no problems with colons. The document.getElementById("foo:bar") works perfectly fine. The only possible problem is in jQuery because it uses CSS selector syntax.
如果您确实需要，那么您可以随时更改默认分隔符 :，方法是将 javax.faces.SEPARATOR_CHAR 上下文参数设置为例如- 或 _ 如下.您只需要保证您不在 JSF 组件 ID 中自己的任何地方使用该字符(它没有经过验证！).
If you really need to, then you can always change the default separator character : by setting the javax.faces.SEPARATOR_CHAR context param to e.g. - or _ as below. You only need to guarantee that you don't use that character anywhere in JSF component IDs yourself (it's not been validated!).
<context-param>
<param-name>javax.faces.SEPARATOR_CHAR</param-name>
<param-value>-</param-value>
</context-param>
顺便说一下，_ 有一个额外的缺点，它出现在 JSF 自动生成的 ID 中，例如 j_id1，因此您还应该确保 allNamingContainer 组件整个 JSF 页面都有一个固定的 ID，而不是自动生成的 ID.否则 JSF 将无法找到命名容器子项.
The _ has by the way the additional disadvantage that it occurs in JSF autogenerated IDs like j_id1, thus you should also ensure that all NamingContainer components throughout your JSF pages have a fixed ID instead of an autogenerated one. Otherwise JSF will have problems finding naming container children.
我只是不推荐它.从长远来看，它是混乱和脆弱的.再想想，普通 JSF webapp 中的独特元素本身通常已经不在表单或表格中.它们通常只代表主要的布局方面.我想说，否则从一般的 HTML/CSS 角度来看，这是一个糟糕的设计.只需通过可重用的 CSS 类名而不是 ID 来选择它们.如果你真的需要，你总是可以将它包装在一个普通的 HTML
I would only not recommend it. It's in long term confusing and brittle. To think about it again, unique elements in the average JSF webapp are by itself usually already not inside forms or tables. They generally just represent the main layout aspects. I'd say, it's otherwise a bad design in general HTML/CSS perspective. Just select them by reusable CSS class names instead of IDs. If you really need to, you can always wrap it in a plain HTML <div> or <span> whose ID won't be prepended by JSF.
另见:
- What are valid values for the id attribute in HTML?
- Is it possible to change the element id separator in JSF?
- How to select JSF components using jQuery?
- How to use JSF generated HTML element ID with colon ":" in CSS selectors?
- Integrate JavaScript in JSF composite component, the clean way
这篇关于默认情况下，JSF 会生成不可用的 ID，这与 Web 标准的 CSS 部分不兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
