BinaryDevelop
  1. ホーム
  2. html

[解決済み] HTML属性 "class "と "id "の命名 - ダッシュとアンダーライン [closed].

2022-08-27 14:02:19

質問

<div id="example-value"> または <div id="example_value"> ?

このサイトとTwitterは、最初のスタイルを使用しています。FacebookとVimeoは2番目のスタイルです。

どちらをお使いですか？

どのように解決するのですか？

ハイフンを使って、HTMLとJavaScriptを分離するようにします。

なぜかというと、以下をご覧ください。

ハイフンは CSS と HTML では有効ですが、JavaScript Objects では使用できません。

多くのブラウザは、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 を使うこともできますが、これでは問題が解決しませんし、後で誤って JavaScript のオブジェクトではなく HTML のオブジェクトにアクセスしてしまうという同じ問題にぶつかる可能性があります。

一つの発言として、あなたはまだwindow['message-text']を使うことによって、（例えば）windowオブジェクトを通してHTMLオブジェクトにアクセスすることができます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します