2

マークアップを複製しているところで、このコードの臭いに常に遭遇しますが、それを修正する方法がよくわかりません。典型的なユースケースのシナリオは次のとおりです。

ある種の記事にコメントを投稿したいとしましょう。記事の下には、たくさんのコメントがあります。これらは元のページリクエストで追加され、テンプレートエンジン（私の場合はFreemarkerですが、PHPなどでもかまいません）によって生成されます。

これで、ユーザーがコメントを追加するたびに、新しいli要素を作成し、それを現在のページのコメントリストに挿入する必要があります。このliに次のようなものがたくさん含まれているとしましょう：

  1. ユーザーのアバター
  2. 彼らの名前
  3. プロフィールをクリックするか、プライベートメッセージを送信するためのリンク
  4. 彼らが書いたテキスト
  5. 彼らがコメントを書いた日付
  6. 現在ログインしているユーザーがこれらのアクションを実行する権限を持っている場合、一部の「編集」および「削除」リンク/ボタン。

さて、これらのすべては、最初にページを生成したテンプレートにすでに書かれています...それで、Javascript内でそれを複製する必要があります！

もちろん、Jqueryのテンプレートプラグインなどの別のテンプレート言語を使用して、この新しいliブロックの生成と追加の手間を軽減できます...ただし、マクロなどを使用できないため、HTMLマークアップが重複することになります。テンプレート言語によって提供される便利さ。

では、重複をどのようにリファクタリングするのでしょうか。それも可能ですか、それとも私たちはそれを我慢するだけですか？この問題を解決するために使用されているベストプラクティスは何ですか？

4

1 に答える 1

1

これは一般的な問題であり、UIの複雑さが増すにつれて明らかになり、サーバーとクライアントの両方のテンプレートで変更を行う必要があります。この問題は、クライアント側とサーバー側の両方で同じテンプレートマークアップを使用することで修正できます。テンプレートプロセッサは、JavaScriptとサーバー側言語の両方で作成する必要があります。

上記のアプローチよりもクリーンであるが、どちらにも独自の問題がある他の2つのソリューション：

  • クライアント側ですべてを行う
  • サーバー側ですべてを行う

すべてのマークアップ生成がクライアント側で行われる場合、サーバーは多かれ少なかれWebサービスのように動作し、アプリケーションに適した形式でのみデータを送り返します。JSONとXMLは、今日のほとんどのWebサービスで非常に人気のある形式です。クライアントは常に必要なHTMLとJSを生成します。このアプローチを使用する場合は、クライアントとサーバーの境界を明確に定義する必要があります。クライアントはサーバーで何が起こるかについての知識が限られているため、これは適切なエラーコードを定義する必要があることを意味します。ほとんど/すべてのサーバーの相互作用が非同期で行われるため、状態管理はより困難になります。このアプローチでコメントを追加する例は、次のようになります。

$('#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);
}

もう1つのアプローチは、サーバー側ですべてを実行することです。変更が発生するたびに、サーバーにリクエストを送信し、サーバーに更新されたビューを要求します。バックエンドが高速で、応答時間が1秒未満で、ネットワークアクティビティの適切なインジケーターがあれば、サーバーですべてが発生しているにもかかわらず、アプリケーションは非常に応答性が高いように見えます。上記の例は次のように簡略化されます。

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

これは、以前のアプローチよりもクライアント側ではるかにクリーンに見えますが、マークアップ生成をサーバーに移動したところです。ただし、アプリケーションがGoogleマップのようにAJAXyでない場合は、このアプローチの方が扱いやすい場合があります。繰り返しになりますが、アプリケーションがどれほど複雑かという問題であり、おそらく状態のクライアント側を維持することが必要です。その場合は、前のアプローチを使用することをお勧めします。

于 2010-12-12T09:54:21.573 に答える