0

サーバーからブラウザに、ユーザーに表示されるべきではないオブジェクトとカテゴリ ID またはその他のシステム変数を渡す最も効果的な方法は何ですか?

たとえば、ツールチップ html を表示したり、ajax でお気に入りに追加したり、マップに表示したりできます。そのツールチップ html、データベース ID、または地理的位置をどこに保存するのが最適ですか?

私が考えることができるいくつかのオプションは次のとおりです。

  • <script></script>各アイテムのタグ内の辞書、
  • マイクロフォーマット、
  • インラインxml、
  • rel属性、
  • 特定の情報を含む css クラス名class="lat-12345 uid-45678"。
  • <script></script>テンプレート内のシステム値を持つ html ids マッピング辞書の辞書を持つもの、
  • データベースから生成され<script src="..."></script>、テンプレート内のシステム値を使用して辞書をマッピングする html ID の辞書を介して含まれる javascript、
  • id 以外の情報が必要な場合は、すべてのケースで ajax リクエストを使用します。
  • html タグ内のパラメーターを持つイベント ハンドラーonmouseover="tooltip(this, 123, 'Hello world!')"。

PS私は目立たないソリューションを好み、ロード/実行時間も重要です。

4

5 に答える 5

1

使用できる方法の1つは、カスタム属性です。これをマイクロフォーマットと呼んでいると思いますが、同じものかどうかはよくわかりませんので、以下に説明を書きます。

以前に同じ質問をしたことがあるので、私は基本的に次のようなものを使用します。

<div data-pid="1234">
    <a href="#" class="add-to-favourites">
        <img src="addToFavourites.png" />
    </a>
</div>

$("a.add-to-favourites").click(function() {
    $.load("/Favourites/Add.php?prodID="+$(this).parent().attr("data-pid"));
});

これはあなたがやりたいことを正確に行うはずです。タグではなくpidにを入れた理由は、他のすべての製品情報を、を使用してマウスオーバーでツールチップを表示したり、とを使用して地図に表示したりするなど、ユーザーが実行できる他のアクションで内に配置できるためです。 。もちろん、これらには任意の名前を付けることができます。divadivdata-descriptiondata-geo-xdata-geo-y

サポート/受け入れ

これは、あなたがやりたいことをするための完全に受け入れられた方法になりつつあります。HTML 5は、まさにあなたが達成しようとしている種類のことのためにこれをサポートします。

つまり、HTML 5でサポートされていますが、HTML4についてはどうでしょうか。

HTML 4が無効になる可能性がありますが、世界はより大きく、より良いものに移行しています。古いブラウザ（IE6以前、FF1 / 2、Opera 7/8 / 9）は一般的ではなくなってきているため、問題になることはありません。古いブラウザを実際に壊すことはありません-機能は引き続き機能します。

重要な有効性に関する注意

data-属性名の前に必ずを付けてください。これにより、属性がHTML5で完全に有効になります。

いくつかの追加のヒント

jQuery 1.5では、私の質問に対する回答から、attr("pid")の値を返すように指定するだけでよいと聞いていますdata-pid。この場合、実際の属性の名前の後に属性名の2番目の部分に名前を付けるときは注意が必要です（たとえば、の代わりに、特に属性が指定されている場合は-data-idを使用します。どのような効果があるかわかりません。これを行わなかった場合は持っていますが、これが原因で後日サイトに問題が発生するよりも、そもそも問題を回避する方がよいでしょう。data-pidid

これがあなたが探していたものであることを願っています。

于 2010-10-12T19:59:50.370 に答える
1

スクリプトで単純な JSON オブジェクトを使用できるように、1 回の AJAX 呼び出しで最初に必要なデータを取得することをお勧めします。もちろん、さらに情報が必要な場合は、追加の呼び出しでそれを補うことができます。

それが現実的でない場合は、JavaScript オブジェクトを<script>...</script>タグに「ハードコーディング」するのが次善の策です。もちろん、「ハードコーディング」はブラウザの観点からのものです。実際のコンテンツは、データベースのサーバー側スクリプトによって確実に書き込まれます。

于 2010-10-12T18:30:34.423 に答える
1

おそらく私は何かが欠けている... JSONだけではないのはなぜですか?

それをどのように「送信」するか (「javascript」としての最初のページ読み込みで、または AJAX などを介して) は、データがいつ利用可能になるかによって主に決定される些細なことです。(JSON は、正当な JavaScript 構文のサブセットです。)

あとは正しい変換の問題です。もちろん、これを JSON/JS にプッシュすることで、JS 以外のクライアントを相互運用できないようにすることもできます。そのような場合は、サーバー側の変換を適切に実行してみませんか?

HTML で任意の属性を使用することもできます (HTML5 仕様には、正式に合法化された「data-*」が含まれる場合があります)。技術的には「正しい」とは言えませんが、すべての主要な Web ブラウザーは、DOM API を介してアクセスできる未知の属性を受け入れます。 .

于 2010-10-12T19:49:45.670 に答える
0

document.ready イベントで初期化する Javascript シングルトン AppCacheManager を実装します。少し JS oop を使用すると、本格的な OOP データストアが作成されます。

情報が必要なときはいつでも、Ajax / RESTful Web サービスを介してロードし、AppCache Manager にキャッシュします。したがって、2 つのキャッシュがあります。1.RESTful Web サービス URL キャッシングにより可能になるブラウザ キャッシュ、および 2:JS キャッシュ マネージャー。

クライアントがキャッシュについて何も知る必要がないように、新しいデータを透過的にフェッチするか、キャッシュされたデータを返す AppCacheManager へのすべてのリクエストにアクセスします。

要するに：

  • JS CacheManager を書く
  • データ全体を一度にフェッチするのではなく、必要に応じて小さな部分に分けてキャッシュします
  • cachemanager の便利なインターフェースを定義する

使用例:

<a href="linkurl" onmouseover="CacheManagerFactory.getInstance().getTooltip('TooltipID');">linktext</a>

控えめであることは JS では非常に難しいことであり、それについても知りたいと思っています。

それが役に立ったことを願っています。

于 2010-10-13T14:31:35.747 に答える
0

ASP.NET は、これを行うための非常に便利な方法を提供します。JavaScript オブジェクトを簡単に記述できます。他のテンプレート エンジンも同様の方法でこれを行うことができると確信しています。

var person = {
    Name : <%= _person.Name %>,
    Age : <%= _person.Age %>
};
于 2010-10-12T18:30:02.490 に答える