Ema*_*sev 108 html coding-style naming-conventions
<div id="example-value">还是<div id="example_value">？
这个网站和Twitter使用的是第一种风格.Facebook和Vimeo--第二个.
你使用哪一个？为什么？
Raa*_*tje 128
使用连字符确保HTML和JavaScript之间的隔离.
为什么？见下文.
连字符在CSS和HTML中有效,但对JavaScript对象无效.
许多浏览器将HTML ID作为全局对象注册到窗口/文档对象上,在大型项目中,这可能会成为一种真正的痛苦.
出于这个原因,我使用带有连字符的名称,HTML ID永远不会与我的JavaScript冲突.
考虑以下:
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>
如果浏览器将HTML ID注册为全局对象,则上述操作将失败,因为该消息不是"未定义",并且它将尝试创建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对象时遇到同样的问题
一句话,您仍然可以通过(例如)窗口对象使用window ['message-text']访问HTML对象;
Kla*_*urn 82
它具体说明:
用连字符分隔ID和类名中的单词.除了连字符之外,不要通过任何字符(包括根本没有)连接选择器中的单词和缩写,以便提高理解和可扫描性.
/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}
/* Not recommended: uses underscore instead of hyphen */
.error_status {}
/* Recommended */
#video-id {}
.ads-sample {}
我相信这完全取决于程序员。如果你愿意的话，你也可以使用驼峰命名法（但我认为这看起来很尴尬。）
我个人更喜欢连字符，因为它在键盘上打字速度更快。所以我想说你应该选择你最舒服的，因为你的两个例子都被广泛使用。
| 归档时间： |
|
| 查看次数： |
66498 次 |
| 最近记录： |