Kann jemand grundlegende Gründe hinzufügen, warum das Anhängen von HTML-Markup an Feldvariablen falsch ist?

Question

   html += '<tr style="display:none;"><td class="leftval">ID:</td><td><span id="' + _uniqueId + '-id">' + one + '</span></td></tr>';
    html += '<tr><td class="leftval"><label for="' + _uniqueId + '-itemdesc" title="This is the descriptive text that will actually appear in the email.">Description: </label></td>';
    html += '<td><input value="' + four + '" class="CDinput" name="itemdesc" id="' + _uniqueId + '-itemdesc" type="text"></td></tr>';
    html += '<tr><td class="leftval"><label for="' + _uniqueId + '-title" title="This is the title text that is used in the email.  The text usually is used as the anchor text of a link.">Title: </label></td>';
    html += '<td><input value="' + five + '" class="CDinput" name="title" id="' + _uniqueId + '-title" type="text"></td></tr>';
    html += '<tr><td class="leftval"><label style="color:#f16d44;" for="' + _uniqueId + '-enddate" title="This is the expiration of the offer.  The formating here is arbitrary and does not impact how the end date would look in the actual template.">End Date: </label></td>';
    html += '<td><input style="width:230px" value="' + six + '" class="CDinput" name="enddate" id="' + _uniqueId + '-itemenddate" type="text">';//I'm overriding the default width for the calendar image
    html += '<img style="cursor:pointer;" class="CDdate" id="' + _uniqueId + '-dateselector"src="/images/Calendar_hyperlink.png"></td></tr>';

Mir fallen 3 Gründe ein:

1. Operatoren für Zeichenketten wie ' + ' erschweren das Lesen
2. Die Einrückung ist schwieriger, da es umständlich ist, das Feld einzurücken, um einen richtig formatierten HTML-Ausschnitt zu simulieren.
3. Die Anzeigelogik ist eng mit der Logik der Geschäftsanwendungen verwoben, was eine Diversifizierung des Schwerpunkts erschwert.

Answer 1

Sie haben 3 gute Gründe angeführt und sind unter den ersten drei. Der Versuch, die beiden zu mischen macht für hässlichen Code, schwer zu lesen, schwer zu pflegen, etc.

Eine andere Sache, an die ich bis vor kurzem noch nicht gedacht hatte, ist, dass einige Editoren, wie Netbeans, Sie darauf hinweisen, wenn Ihr HTML fehlerhaft ist. Vergessen, Tags zu schließen, falsche Werte, usw. Ich verwende PHP für meine Arbeit und habe mir angewöhnt, so etwas zu tun:

<li>
    <span class='name'><?php echo _TAG_INDEX ?>:</span>
    <span class='value'><?php echo $get_zone_array['DB_ID'] ?></span>
</li>

So kann ich, wenn ich vergessen habe, ein Tag zu schließen, z. B. wenn ich das schließende </span> Wenn ich irgendwo einen Fehler gefunden hätte, wäre er mir aufgefallen, so dass ich ihn beheben konnte. Wenn ich jedoch den HTML-Code in eine Variable einfüge oder ihn direkt als Echo ausgeben würde, wie hier:

$html = "<li><span class='name'>"._TAG_INDEX.":<span>" // notice missing / in </span>
      . "<span class='value'>".$get_zone_array['DB_ID']."</span>"
      . "</li>";
echo $html;

dann gäbe es keine HTML-Prüfung durch den Editor, was das Auffinden dieser kleinen, bösen xHTML-Fehler erschwert.

Answer 2

Einige der Gründe:

1. Es ist potthässlich!
2. Es ist langsam. (Die += Operator in Java ist nicht schnell. Manchmal akzeptabel, aber definitiv nicht schnell, weil er eine Menge Objekte erstellen und Puffer kopieren muss).
3. Es ist zu einfach, XSS-Schwachstellen durch Zeichenketten einzuführen, die nicht ordnungsgemäß in Anführungszeichen gesetzt werden.
4. Es ist zu unflexibel; ändert man etwas am Layout, muss man den gesamten Code ändern.

Verwenden Sie stattdessen eine Vorlagenbibliothek. So viel einfacher, richtig zu bekommen.