1

Javascript なしで動作するページから始めて、Javascript の奇抜さを追加し、最後に Ajax を少し追加したいと考えています。

これはすべてのものをきれいに保つようです。私はそれを使った最初の実験にとても満足していました. 次に、次の問題に遭遇しましたが、これには適切な解決策がありません。これらの 2 つのサンプル ページの場合:

<!-- /products/ -->
<ul>
    <li>
        Product A thumbnail
        <a href="/details/1/">Details for A</a>
    </li>
    <li>
        Product B thumnail
        <a href="/details/2/">Details for B</a>
    </li>
</ul>

<!-- /details/<id>/ -->
<script type="text/javascript" src="/details.js/"></script>
show details about the product with the given id
details.js will unobtrusively enhance it

欲しい機能

Ajax を使用して、/products/ページ上の製品の詳細の一部を動的に読み込みます (たとえば、サムネイルにカーソルを合わせたとき)。/details/<id>/より正確には、ページ上のの簡略化されたバージョンを取得して表示し/products/ます。

目立たない実装

写真をホバリングするときhrefに、対応するアンカーの属性に対して Ajax リクエストを行います。サーバーはページ全体で応答でき/details/<id>/、JQuery セレクターは興味深い部分だけを切り取ることができます。または、サーバーはリクエストが特別であることを認識し、興味深い部分だけを返すこともできます。これまでのところ、簡単できれいです。

問題

/details/<id>/ページは単なる HTML ではありません。見栄えを良くするために独自の Javascript も用意されていたので、その Javascript を/products/ページで再利用したいと考えています。/products/そのため、HTML をフェッチするだけでなく/details/<id>/、本格的なページに存在する Javascript の動作も複製したいと考えてい/details/<id>/ます。

私が考えることができる唯一の（悪い）解決策

ページをロードするときにブラウザーが行うことを複製する明示的なコードを記述し/details/<id>/ます<script>。これは、正しく理解するのが難しいと思われる多くの定型的なものです。結果は単純ではないので、明らかに書きたくありません。

また、目立たない Ajax に本当に固執している場合に非常に頻繁に発生する種類の問題であり、それに対するより洗練された解決策があるはずだとも感じています。

4

1 に答える 1

2

アーキテクチャ的には、よりクリーンなソリューションは、HTML を取得してそこから製品データを選別しようとするのではなく、製品データ (XML または JSON 表現を使用できます) だけを返す Ajax 呼び出しを持つことです。目標は、プレゼンテーションからデータを分離することです。同様のシナリオ (マウスオーバーで詳細が表示される) で私が使用した手法は、ページに含まれるが非表示の HTML 'テンプレート' を使用することです。マウスオーバーで、Ajax 呼び出しを行って製品データを取得し (通常はデータをキャッシュするので、同じアイテムをマウスオーバーしたときにデータを再取得する必要がありません)、HTML テンプレートにデータを入力し、配置してから表示します。

JavaScript の複製が心配な場合は、JavaScript を別のファイルに移動して、含めることができるようにする必要があります。JavaScript が非常にページ固有のものである場合は、より一般的/再利用可能にする必要があるかもしれません。または、JavaScript ではなく、CSS やサーバー側のテクノロジを使用して「派手にする」必要があるかもしれません。

于 2010-11-10T15:43:37.487 に答える