<div id="example-value">veya <div id="example_value">?
Bu site ve Twitter birinci stili kullanıyor. Facebook ve Vimeo - ikincisi.
Hangisini kullanıyorsunuz ve neden?
Yanıtlar:
HTML ve JavaScript'iniz arasında izolasyon sağlamak için Kısa Çizgi kullanın.
Neden? aşağıya bakınız.
Tireler CSS ve HTML'de kullanmak için geçerlidir ancak JavaScript Nesneleri için geçerli değildir.
Pek çok tarayıcı HTML kimliklerini pencere / belge nesnesine global nesneler olarak kaydeder, büyük projelerde bu gerçek bir acıya dönüşebilir.
Bu nedenle, kısa çizgilerle adları kullanıyorum, bu şekilde HTML kimlikleri JavaScript'imle asla çakışmaz.
Aşağıdakileri göz önünde bulundur:
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>Tarayıcı HTML kimliklerini global nesneler olarak kaydederse, mesaj 'tanımsız' olmadığından yukarıdaki işlem başarısız olur ve HTML nesnesinin bir örneğini oluşturmaya çalışır. Bir HTML kimliğinin adında bir tire işareti bulunduğundan emin olarak, aşağıdaki gibi çakışmaları önler:
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>Elbette, messageText veya message_text'i kullanabilirsiniz, ancak bu sorunu çözmez ve daha sonra JavaScript yerine yanlışlıkla bir HTML Nesnesine erişeceğiniz aynı sorunla karşılaşabilirsiniz.
Bir not, ['mesaj-metni'] penceresini kullanarak (örneğin) pencere nesnesi aracılığıyla HTML nesnelerine hala erişebilirsiniz;
window['message-text'];
Google HTML / CSS Stil Kılavuzunu tavsiye ederim
Bu özellikle belirtir :
Kimlik ve sınıf adlarındaki sözcükleri kısa çizgiyle ayırın . Anlaşılırlığı ve taranabilirliği geliştirmek için seçicilerdeki sözcükleri ve kısaltmaları kısa çizgiler dışında herhangi bir karakterle (hiç yok dahil) birleştirmeyin.
/* 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 {}BEMnotasyon?
Bu gerçekten tercihe bağlıdır, ancak sizi belirli bir yönde etkileyecek olan şey, kod yazdığınız düzenleyici olabilir. Örneğin, TextMate'in otomatik tamamlama özelliği kısa çizgide durur, ancak alt çizgiyle ayrılmış kelimeleri tek bir kelime olarak görür. Bu nedenle sınıf adları ve kimlikleri , otomatik tamamlama özelliğini ( ) kullanmaya the_postgöre daha iyi çalışır .the-postEsc
Bunun tamamen programcıya bağlı olduğuna inanıyorum. İsterseniz camelCase'i de kullanabilirsiniz (ama bunun tuhaf görüneceğini düşünüyorum.)
Ben şahsen kısa çizgiyi tercih ediyorum, çünkü klavyemde yazmak daha hızlı. Bu nedenle, her iki örneğiniz de yaygın olarak kullanıldığı için en rahat olduğunuz şeyle gitmeniz gerektiğini söyleyebilirim.
Her iki örnek de tamamen geçerlidir, hatta ":" veya "" karışımına bile atabilirsiniz. w3c özelliklerine göre ayırıcılar olarak . Ben şahsen "_" iki kelimelik bir isim ise, sırf boşlukla benzerliğinden dolayı kullanıyorum.
ZZ:ZZolarak kaçınılmalıdır ZZ\00003AZZ.
Aslında bazı dış çerçeveler (javascript, php) kimlik adlarında hipeni kullanmada zorluklar (hatalar?) Alt çizgi kullanıyorum (960grid de öyle) ve hepsi harika çalışıyor.
Esas olarak karşılaştığım bir javascript yan etkisi nedeniyle altını çizmenizi öneririm.
Aşağıdaki kodu konum çubuğunuza yazacak olsaydınız, bir hata alırsınız: "örnek değer" tanımsızdır. Div, alt çizgilerle adlandırılsaydı işe yarardı.
javascript:alert(example-value.currentStyle.hasLayout);document.getElementById("example-value")çalışacak olması gerekir .