Ajax design / Refactoring Hilfe, wenn neue Inhalte Rendering - wie Listenelemente und divs

Question

ich auf diesem Code Geruch konsequent kommen, wo ich bin Auszeichnungs duplizieren, und ich bin nicht wirklich sicher, wie es zu beheben. Hier ist ein typischer Anwendungsfall Szenario:

Lassen Sie uns sagen, wir möchten Kommentare des Artikels auf eine Art zu schreiben. Unterhalb des Artikels finden wir eine Reihe von Kommentaren. Diese werden mit der Originalseite Anfrage hinzugefügt und werden von der Template-Engine erzeugt (Freemarker in meinem Fall, aber es kann sein, PHP oder was auch immer).

Nun, wenn ein Benutzer einen Kommentar hinzufügt, wollen wir ein neues li -Element erstellen und zu injizieren es in der Liste der aktuellen Seite der Kommentare. Lassen Sie uns sagen, das li ein paar Sachen enthält wie:

1. Die Benutzer-Avatar
2. Ihr Name
3. Ein Link zu ihrem Profil klicken oder ihnen eine private Nachricht senden
4. Der Text, den sie geschrieben
5. Das Datum, das sie den Kommentar geschrieben
6. Einige „Bearbeiten“ und „Löschen“ Links / Tasten, wenn der aktuell angemeldete Benutzer hat die Berechtigung, diese Aktionen zu tun.

Nun, alle diese Dinge wurden bereits in unserer Vorlage geschrieben, dass ursprünglich die Seite erzeugt ... so jetzt müssen wir es innerhalb von Javascript kopieren!

Natürlich können wir eine andere Template-Sprache verwenden - wie jQuerys Template-Plugin - den Schmerz erzeugenden zu erleichtern und Anhänge diesen neuen li Block ... aber wir haben noch mit doppelten HTML-Markup am Ende, das ist < em> leicht anders, weil wir nicht uns zur Verfügung gestellten Makros oder andere Annehmlichkeiten von der Template-Sprache verwenden können.

So wie Refactoring wir die Vervielfältigung aus? Ist es überhaupt möglich, oder haben wir nur mit damit abfinden? Was sind die besten Praktiken verwendet werden, dieses Problem zu lösen?

Answer 1

Dies ist ein häufiges Problem und wird immer deutlicher, wie die UI-Komplexität steigt, und Änderungen müssen sowohl auf den Server und die Client-Vorlagen durchgeführt werden. Dieses Problem ist fixierbar, indem eine der gleiche Vorlage Markup auf dem Client und Server-Seite verwenden. Die Template-Prozessoren müssen sowohl JavaScript und die Server-Seite Sprache geschrieben werden.

Zwei weitere Lösungen, die sauberer als der oben beschriebene Ansatz sind, aber beide haben ihre eigenen Probleme:

• Do alles Client-Seite
• alles tun, Server-Seite

Wenn all Markup-Generation auf der Client-Seite durchgeführt wird, dann wirkt der Server mehr oder weniger wie ein Web-Service, die nur wieder Daten in beliebigen Formate passen die Anwendung sendet. JSON und XML sind wirklich gängigen Formate für die meisten Web-Services heute. Der Client erzeugt immer den notwendigen HTML und JS. Wenn bei diesem Ansatz geht, muss die Grenze zwischen dem Client und dem Server wird gut definiert. Da der Client begrenzte Kenntnis von dem, was auf dem Server geschieht, bedeutet dies, dass die richtige Fehlercodes definiert werden. Staatliche Verwaltung wird schwieriger geworden, da die meisten / alle Server-Interaktion asynchron geschehen wird. Ein Beispiel für einen Kommentar mit diesem Ansatz des Hinzufügen aussehen kann:

$('#add-comment').click(function() {
    var comment = $('#comment-box').text();
    $.ajax('http://example.com/add', {
        success: function() {
            addCommentRow(comment);
        },
        ...
    });
});

function addCommentRow(comment) {
    var user = currentUser().name;

    var html = "<li><b>{user}</b> says {comment}</li>";
    html = html.replace("{user}", user).replace("{comment}", comment);

    var item = $('<li>').html(html);
    $('#comments').append(item);
}

Der andere Ansatz ist alle Server-Seite zu tun. Jedes Mal, wenn eine Änderung der Fall ist, eine Anfrage an den Server schießen, und sie auffordern, für die aktualisierte Ansicht. Mit einem schnellen Backend, Antwortzeiten unter einer Sekunde, und geeignete Indikatoren der Netzwerkaktivität, sollten die Anwendung sehr reaktions scheinen trotz allem Geschehen auf dem Server. Das obige Beispiel vereinfacht werden würde:

$('#add-comment').click(function() {
    $.ajax('http://example.com/add', {
        success: function(response) {
            $('#comments').html(response);
        },
        ...
    });
});

Obwohl dies viel mehr Reiniger auf der Client-Seite scheint als der bisherige Ansatz haben wir gerade umgezogen, die Markup-Generation auf den Server hoch. Wenn jedoch die Anwendung nicht sehr AJAXy wie Google Maps ist, dann kann dieser Ansatz einfacher sein, zu arbeiten. Wieder ist es eine Frage, wie kompliziert die Anwendung ist, und vielleicht ist für Sie eine Notwendigkeit Zustand Client-Seite beibehalten wird, in dem Fall, dass Sie mit dem bisherigen Ansatz gehen mögen.