命名“类”和“id” HTML属性 - 破折号与下划线 [英] Naming "class" and "id" HTML attributes - dashes vs. underlines
问题描述
< div id =example-value> 或< div id =example_value> ？
这个网站和Twitter使用第一种风格。
使用连字符确保HTML和JavaScript之间的隔离。
为什么？请参阅下文。
连字符在CSS和HTML中有效，但不能用于JavaScript对象。
的浏览器将HTML Ids注册为窗口/文档对象上的全局对象，在大型项目中，这可能会变得非常痛苦。
因为这个原因，我使用带有连字符这样，HTML ids不会与我的JavaScript冲突。
请考虑以下内容：
.js
message = function（containerObject）{
this.htmlObject = containerObject;
};
message.prototype.write = function（text）{
this.htmlObject.innerHTML + = text;
};
html
< body>
< span id ='message'>< / span>
< / body>
< script>
var objectContainer = {};
if（typeof message =='undefined'）{
var asyncScript = document.createElement（'script'）;
asyncScript.onload = function（）{
objectContainer.messageClass = new message（document.getElementById（'message'））;
objectContainer.messageClass.write（'loaded'）;
}
asyncScript.src ='message.js';
document.appendChild（asyncScript）;
} else {
objectContainer.messageClass = new message（document.getElementById（'message'））;
objectContainer.messageClass.write（'loaded'）;
}
< / script>
如果浏览器将HTML ids注册为全局对象，上述操作将失败，因为消息不是'undefined'它将尝试创建一个HTML对象的实例。通过确保HTML ID在名称中包含连字符，可防止以下冲突：
message.js
message = function（containerObject）{
this.htmlObject = containerObject;
};
message.prototype.write = function（text）{
this.htmlObject.innerHTML + = text;
};
html
< body>
< span id ='message-text'>< / span>
< / body>
< script>
var objectContainer = {};
if（typeof message =='undefined'）{
var asyncScript = document.createElement（'script'）;
asyncScript.onload = function（）{
objectContainer.messageClass = new message（document.getElementById（'message-text'））;
objectContainer.messageClass.write（'loaded'）;
}
asyncScript .src ='message.js';
document.appendChild（asyncScript）;
} else {
objectContainer.messageClass = new message（document.getElementById（'message-text'））;
objectContainer.messageClass.write（'loaded'）;
}
< / script>
当然，你可以使用messageText或message_text，但这不能解决问题，你可以运行在同一个问题中，您将意外访问HTML对象而不是JavaScript一个
一个备注，您仍然可以通过（例如）窗口访问HTML对象对象通过使用窗口['message-text'];
<div id="example-value"> or <div id="example_value">?
This site and Twitter use the first style. Facebook and Vimeo - the second.
Which one do you use and why?
Use Hyphens to ensure isolation between your HTML and JavaScript.
Why? see below.
Hyphens are valid to use in CSS and HTML but not for JavaScript Objects.
A lot of browsers register HTML Ids as global objects on the window/document object, in big projects, this can become a real pain.
For this reason, I use names with Hyphens this way the HTML ids will never conflict with my JavaScript.
Consider the following:
message.js
message = function(containerObject){
this.htmlObject = containerObject;
};
message.prototype.write = function(text){
this.htmlObject.innerHTML+=text;
};
html
<body>
<span id='message'></span>
</body>
<script>
var objectContainer = {};
if(typeof message == 'undefined'){
var asyncScript = document.createElement('script');
asyncScript.onload = function(){
objectContainer.messageClass = new message(document.getElementById('message'));
objectContainer.messageClass.write('loaded');
}
asyncScript.src = 'message.js';
document.appendChild(asyncScript);
}else{
objectContainer.messageClass = new message(document.getElementById('message'));
objectContainer.messageClass.write('loaded');
}
</script>
If the browser registers HTML ids as global objects the above will fail because the message is not 'undefined' and it will try to create an instance of the HTML object. By making sure an HTML id has a hyphen in the name prevents conflicts like the one below:
message.js
message = function(containerObject){
this.htmlObject = containerObject;
};
message.prototype.write = function(text){
this.htmlObject.innerHTML+=text;
};
html
<body>
<span id='message-text'></span>
</body>
<script>
var objectContainer = {};
if(typeof message == 'undefined'){
var asyncScript = document.createElement('script');
asyncScript.onload = function(){
objectContainer.messageClass = new message(document.getElementById('message-text'));
objectContainer.messageClass.write('loaded');
}
asyncScript.src = 'message.js';
document.appendChild(asyncScript);
}else{
objectContainer.messageClass = new message(document.getElementById('message-text'));
objectContainer.messageClass.write('loaded');
}
</script>
Of course, you could use messageText or message_text but this doesn't solve the problem and you could run into the same issue later where you would accidentally access an HTML Object instead of a JavaScript one
One remark, you can still access the HTML objects through the (for example) window object by using window['message-text'];
这篇关于命名“类”和“id” HTML属性 - 破折号与下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
