23

私は構築中のサイトに対してかなり重い JavaScript インターフェイスを開発しています。(最近公式に作成された) jQuery テンプレート プラグインを使用して、クエリから JSON API への要素を生成することにしました。さて、私が現在抱えている問題は次のとおりです。

私はこれらのテンプレートをたくさん持っている傾向があります。オブジェクトの種類ごとに 1 つ、リスト用、ページのセクション用などがあります。これらのテンプレートを保存するための好ましい方法はありますか? <script>テンプレート名を使用してタグを定義しid、そこからテキストを取得する方法について読んだことがあります (John Resig が「 JavaScript Micro-Templating<script> 」で説明しているように) が、すべてのページにこれらのタグの束があると少し見えますハック。

問題は、この種のシナリオに「ベスト プラクティス」があるかどうかです。

4

6 に答える 6

8

テンプレートを隠し要素にロードしてから使用しないのはなぜ$(template).clone()ですか? これにより、回避する頭痛が大幅に軽減されます。.clone()対するアプローチのパフォーマンスについて話すことはできませんが<script>、スクリプト タグを追加するとパフォーマンスが低下し、一般的にコードがごちゃごちゃになるだけだと言えます。

なんで？

  • おしゃれなエスケープ ユーティリティを使用していても、間違いが発生する可能性があります。さらに、チームの状況で作業する必要がある場合、特に人々がプロジェクトをロールオン/ロールオフする場合は、簡単に理解できない可能性があります.

  • たとえば、ポインター オブジェクトを作成し、templates = {}次のように、クローン可能な要素への jquery オブジェクト ポインターを使用してそれをロードできます。

     templates = {};
 templates.message = $("#templates .message");
 templates.dialog = $("#templates .dialog");

新しいテンプレートを作成するために必要なことは次のとおりです。

var newDialog = templates.dialog.clone();

パラメータを受け入れるラッパー関数を作成し、これらをnewDialog.find("title").html(title), newDialog.find("message").html(message),etcで追加することができます。

繰り返しますが、パフォーマンスの観点からは、現在テストする時間がないため、どちらが速いかわかりません。しかし、テンプレートを必要とするのに十分な大きさのコードベースで作業する場合は、承認された方法を使用する方が一般的に優れていることを私は知っています...他の人が最終的に関与することは避けられません.物事を説明するために周りにいる必要があるほど、時間が少なくなります.あなた自身の悪いコーディングをするために。

パフォーマンスのもう 1 つの重要な側面はタイミングです。パフォーマンスの遅延が発生している場合は、setTimeout を使用して長い実行可能コードのチャンクを分割する必要があります。新しいスタックを作成し、ブラウザが新しいスタックが作成される直前まで処理済みのものを描画できるようにします。これは、パフォーマンスの問題の一部として視覚的な遅延に対処する場合に非常に役立ちます (通常、特にコーダー以外が指摘する最も一般的なパフォーマンスの問題)。それについてさらに情報が必要な場合は、私にメッセージを送ってください。いくつかのリソースを集めます。今は限られた時間で、職場で火を消しています。:)

于 2010-11-22T20:09:21.970 に答える
4

私は最近この演習を行いました。<script>タグのアプローチは少しハックなようですが、これを良い解決策として受け入れ、自分のバージョンを選択しました（John Resigsバージョンは明らかに本当に良いですが、自分の脳のバージョンでは簡単に理解できるものを選びました）。

私のバージョンは基本的なテンプレートであり、form ##VALUE##

テンプレート:(単一アイテムテンプレートまたは行テンプレート）

<script type="text/html" id="ItemTemplate">
<table>
  <tr>
    <td>##LABEL1##</td>
    <td>##VALUE1##</td>
  <tr>
</table>
</script>

コンテンツ構築機能：

function constructFromTemplate(content, values, appendTo) {
    var modifiedHtml = content;
    modifiedHtml = modifiedHtml.replace(new RegExp('__', 'g'), '##');

    $.each(values, function (n, v) {
        modifiedHtml = modifiedHtml.replace(new RegExp('##' + n + '##', 'g'), v);
    });

    if (appendTo != null) 
    {
        $(appendTo).append(modifiedHtml);
        //initializePageElements();
    }

    return modifiedHtml;
}

利用方法

コンテンツは関数から返されます。また、appendToパラメーターを設定してコンテンツelementIDを自動的に設定することもできappendます。（設定nullしないappend）

object置換可能な値は、名前が置換可能なアイテムである動的オブジェクトとして追加されるだけです。

var theContent = constructFromTemplate(ItemTemplate, { LABEL1: 'The Label 1 content', LABEL2: 'The Label 2 content' }, null);

注： コメントアウトしました。これは、テンプレートのプラグインやスタイル//initializePageElements();を初期化するために使用されます。jQuery

コンテンツをDOMに挿入するときは、インラインスタイルのみが機能するようです。

于 2010-11-18T20:57:02.267 に答える
2

https://github.com/inspiraller/STQueryを見てください

STQuery は jquery と同じメソッド名をすべて使用しますが、DOM の要素を操作する代わりに、文字列を直接処理します。

var strTemplate = '<div id="splog"><h1>lorem ipsum</h1><div class="content">lorem ipsum</div></div>';

var ST = STQuery(strTemplate);

ST.find('h1').html('Hello');
ST.find('.content').html('World!');

var strTemplateUpdated = ST.html();

これにより、ロジックがテンプレートから分離されます。つまり、目立たない html テンプレートです。

jquery に対する利点は、STQuery が最初に DOM に書き込む必要がないことです。つまり、Web ワーカーを使用したり、すべてのテンプレート操作をサーバー上で実行したりできます。注: このメッセージの時点では、stquery は JavaScript でのみ記述されているため、選択したサーバー側の言語に変換する必要があります。

于 2011-07-20T15:18:09.843 に答える
1

私はこの1年間、さまざまなテクニックを試してきました。そのscriptトリックは少し間違っていると思いますが、これが私たちの最高のテクニックだと思います。

ページの読み込み時に存在する必要のあるテンプレートは、DOMの期間の一部である必要があります。それらをどこかに保存してロードしようとすると、顕著な遅延が発生します。

必要なときにAJAXを介して遅延ロードできるようにしながら、必要なテンプレートをページに挿入できるテンプレートヘルパーをいくつか作成しました。ページ上のすべてのテンプレートをページロード時に変数にロードします。これにより、参照が少し簡単になります。

他の人がこの問題にどのように取り組んでいるのか、私は確かに聞きたいです。

于 2010-11-18T20:56:13.363 に答える
1

フレームワークjqueryの純粋なhtmlテンプレートでスクリプトを正常に使用しました

ベスト プラクティスについては、Twitter の新しいインターフェイスをご覧ください。1 つのページですべてを処理し、"#!/paths" を介して内部的にルーティングするだけです。

単一ページの Web サイト シームを Web アプリケーションの次の大きなステップとして使用することは、個人的にはWeb 3.0と呼ぶのが好きです:) また、各ページに同じテンプレートをすべて持つことの問題も解消されます。ページは 1 つだけになります。

于 2010-11-19T23:36:04.627 に答える
0

asp.net mvc では、必要な場所に含めることができる部分的なビューに共通のテンプレートをパックすることがよくあります。そうすれば、テンプレートをあちこちで繰り返す必要がなくなります。

もう 1 つの方法は、テンプレートを別のファイルに入れることです。テンプレートを ajax でロードできるようにする newslist.tmpl.html のように。これはデータの読み込みと並行して実行できるため、データ呼び出しよりも高速である可能性が高いため、アプリケーションの速度が低下することはありません。

于 2010-11-22T21:16:26.043 に答える