Ответ 1
Используйте Hyphens для обеспечения изоляции между вашим HTML и JavaScript.
Почему? см. ниже.
Hyphens действительны для использования в CSS и HTML, но не для объектов JavaScript.
Многие браузеры регистрируют HTML-идентификаторы как глобальные объекты на объекте window/document, в больших проектах это может стать настоящей болью.
По этой причине я использую имена с Hyphens таким образом, что идентификаторы HTML никогда не конфликтуют с моим 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 как глобальные объекты, это не будет выполнено, потому что сообщение не является "undefined", и оно попытается создать экземпляр объекта HTML. Убедившись, что идентификатор HTML имеет дефис в имени, предотвращает конфликты, подобные приведенному ниже:
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'];