2

コンポーネントで構成されるサイトを構築しています。HTMLとCSSおよびjQueryの特定のセットとして定義されたコンポーネント。サイトの各ページは、多くのコンポーネントで構成されます。

ベストプラクティスに従って、JavaScriptブロックをページの下部に配置しています。必要な.jsファイルをロードしてから、必要な関数を呼び出すことを計画しています。

doThisThing();
doThatThing();

コンポーネントXがあるとします。そのコンポーネントがレンダリングされたページに表示されるたびに、関数を呼び出したいと思います。jQueryの観点から、これを処理する理想的な方法は何でしょうか？いくつかのオプション：

1）コンポーネントがページ上にあるかどうかに関係なく、常に関数を呼び出します。

$('.componentX').doYourThing()

これは簡単です。jQuery関数呼び出しのユニバーサルブロックを1つだけ持つことができるからです。ただし、DOMを検索して、そこにない可能性のあるものを探しているため、パフォーマンスがわずかに低下します。

2）コンポーネント自体に呼び出しを添付します。

<div id="componentX">my component</div>
<script>$('.componentX').doYourThing()</script>

これは、同じコンポーネントにマークアップと.js呼び出しが含まれているので便利です。欠点？

3）コンポーネントアーキテクチャをバックエンドシステムと統合して、.jsブロック内のコンポーネントのインスタンス化を可能にします。つまり、コンポーネントがページテンプレートに配置されているかどうかを確認し、配置されている場合は、依存するjs関数呼び出しをメインスクリプトブロックに追加します。

4）私が考慮すべき他のオプション？

アップデート：

ケンプの答えに基づいて、私は少し明確にすべきだと思いました。すべてのjQuery関数は1つの大きな圧縮された.jsファイルにラップされるため、サーバーヒットに関してはすべて同じです。個々のページテンプレートのコンテキストで、ページ上の各コンポーネントのすべての個々の関数呼び出しを最適に処理する方法にもっと興味があります。

たとえば、コンポーネントXはすべてのページの90％で使用される可能性があります。そのため、他の10％のページに対してjquery関数を呼び出すことは、大したことではないようです。

ただし、コンポーネントYは、すべてのページの5％でのみ使用される可能性があります。95％の確率で、すべてのページでjquery関数を呼び出したくないと思います。これは不要です。

さらに複雑になる可能性のある別のシナリオ：コンポーネントZは、すべてのページの100％で1回使用されますが、5％のページで2回使用される場合があります。

4

4 に答える 4

2

ハイブリッドソリューションを選択し、jsファイルをコンパイルして圧縮し、関数をインラインで呼び出すことができます。ここでは、2つの異なる関数を使用するとします。

var DA = {
    animateStuff:function(element){
        $(element).animate({height:500},normal);
        $(element).doSomethingElse();
    },
    doAnotherStuff:function(element){
        $(element).doOtherThings();
    }
};

jsをjquerylibでパックし、<head>セクションにロードします。それから、

HTML部分：

<div id="componentX">my component</div>
<script>DA.animateStuff('#componentX');</script>

<div class="componentY">my component</div>
<script>DA.doAnotherStuff('.componentY');</script>

このようにして、HTMLがよりクリーンになり、jsファイルがよりクリーンになり、関数を呼び出すためにdomがロードされるのを待つ必要がなくなります。タグが読み込まれるとすぐに<script>、関数が機能します。他のオプションを必要なだけ関数に渡すことができます。

たとえば、DA.animateStuff後で関数を次のように変更することができます。

animateStuff:function(element, desiredHeight){
                if(!desiredHeight){
                   var desiredHeight = 500
                }
            $(element).animate({ height: desiredHeight },normal);
            $(element).doSomethingElse();
        },

そしてあなたは次のようにhtmlを変更することができます：

<div id="componentX">my component</div>
<script>DA.animateStuff('#componentX',900);</script>

このようにして、関数を呼び出すときに要素の高さを定義できます。定義しない場合は500になります。

これがお役に立てば幸いです。乾杯

于 2010-01-27T19:50:51.267 に答える
1

プロジェクトのサイズに応じて、単純さのためにオプション＃1を使用するか、適切であるためオプション＃3を使用します。

＃1では、セレクターを適切に設定すれば、パフォーマンスへの影響はおそらくわずかです。IDベースのセレクターが最適です（#elementid）、次にelement.classname（.classname比較するとかなり遅いです）。

＃3では、各コンポーネントは、その機能に必要なJSファイルを知る必要があります。コンポーネントがページで定義されている場合、そのJSファイルをページのに追加する必要が<head>あります。サーバー側の言語とフレームワーク（ある場合）を知らなければ、これ以上言うのは難しいですが、コンポーネントがサーバー上のコードを介して表現されている場合は、コンストラクターまたは初期化ルーチンが必要であり、そのコード内にページを変更するロジック<head>、または後でページを構築するために読み取られるコレクションを配置します<head>。

ページ全体にJavaScriptがあるので、＃2は好きではありません。それは理想的とは言えないようです。

于 2010-01-27T14:23:32.423 に答える
0

個人的には、すべてのコードを1つの.jsファイルに入れます（ロードされない数ページでのみ実行される非常に特殊なタスクがない限り）。これにより、1回のリクエストで1回キャッシュできます。複数のリクエストのオーバーヘッドは、（クライアントによって実行される）さらにいくつかのDOMスキャンよりも大きいと思います。

オプション＃2は、javascriptコードをマークアップから分離するというjQueryの主要な原則の1つに反しているため、その道をたどることは決してありません。

于 2010-01-25T21:29:35.310 に答える
0

個人的には、面倒で理想的な方法ではないかもしれませんが、オーバーヘッドが心配な場合は、オプション＃2を変更して使用します。

各コンポーネントにもIDが割り当てられていると思いますか？コンポーネントを出力するたびに$（'＃componentX1'）。doSomething（）を実行すると、コンポーネントにアクセスする場合ほどDOMがスキャンされないため、オーバーヘッドが最小になります。クラス名を介して。http://geekswithblogs.net/renso/archive/2009/07/14/jquery-selector-efficiencycost-impact.aspxを参照してください。

別のアイデア-テンプレートシステム全体がどのように機能するかはわかりませんが、各コンポーネントXのIDをグローバル変数に格納してから、ループして、下部にある.doSomething（）javascriptを出力することもできます。それぞれのテンプレート。

于 2010-01-28T21:17:54.280 に答える