1

私は現在、デザインを支援するためにjsとjqueryを学んでいます。私が抱えている一般的な問題は、やりたいことを実行できることですが、コード化された方法が効率的かどうかわかりません. 誰でもこれをコーディングするより良い方法を見ることができます:

$(".cal-check a").click(function(e) {
e.preventDefault();
$(".agenda").addClass("active");
});

$(".agenda .close-panel").click(function(e) {
e.preventDefault();
$(".agenda").removeClass("active");
});

カレンダーイベントをクリックすると、アクティブなクラスがアジェンダと呼ばれるカレンダー内の別のクラスに追加され、アジェンダが表示されます。次に、閉じるパネル要素をクリックして削除します。どうもありがとう

4

4 に答える 4

1

次のように .agenda セレクターをキャッシュできます。

var $agenda = $(".agenda");

$(".cal-check a").click(function(e) {
    e.preventDefault();
    $agenda.addClass("active");
});

$agenda.find(".close-panel").click(function(e) {
    e.preventDefault();
    $agenda.removeClass("active");
});​
于 2012-12-20T13:05:05.373 に答える
0

それは十分に効率的なはずです。コードを最適化する方法は、DOM 構造に大きく依存します。

舞台裏では、Sizzle 検索エンジンを備えた jQuery は、利用可能な場合は DOM 検索用の組み込みメソッドを使用します (ネイティブ検索は、JS で行われる検索よりも常に高速です)。あなたの場合、特に最新のブラウザーでは、querySelectorAllがあり.cal-check a、.agendaセレクターはその組み込みメソッドで実行されるため、すべて問題ありません。また、検索に使用できるgetElementByClassName.agendaもあります。

これらの方法は両方とも、最新のブラウザーのほとんどでサポートされているため (リンクにサポートされているブラウザーのリストが含まれている場合)、IE8+、Firefox、Chrome などのブラウザーについて話すことは、セレクターで十分に高速です。同時に、IE7 には上記のような機能がなく、Sizzle は多数の要素を調べて探している要素を見つける必要があります。おそらく、id を持つコンテナーを指定してその量を制限できます。その場合、その要素内のみが検索されます: $("#someId .agenda")たとえば。さらにいくつかのタグを追加することもできます: $("#someId div.agenda"). このようにして、(getElementById) 内の div (getElementsByTagName を使用できます) で検索する要素の量を制限します#someId。そうすれば、IE7 やその他の古いブラウザで速度を上げることができますgetElementByClassName。querySelector

さらに、ここで既に述べたように、検索結果をキャッシュすることもできます。

于 2012-12-20T13:32:35.300 に答える
0

クラスを変更しないことをお勧めします。クラスを変更すると、通常はブラウザーに負荷がかかります。1 つのクラスを変更すると、すべてのクラスを再解析する必要があるためです。これは通常、アニメーションなどのより積極的なものには非常に悪いですが、パフォーマンスを考慮している場合は、それを考慮に入れる必要があります。

于 2012-12-20T13:08:46.223 に答える
0

これはもう効率的だと思います。将来的に役立つかもしれないことは、DOM にできるだけ飛び込まないようにすることです。この小さな例では違いはありませんが、たとえば毎回 jquery を使用してフェッチする代わりに、agencyClass の変数を作成します。

var agendaClass = $(".agenda");

$(".cal-check a").click(function(e) {
e.preventDefault();
agendaClass .addClass("active");
});

$(".agenda .close-panel").click(function(e) {
e.preventDefault();
agendaClass .removeClass("active");
});
于 2012-12-20T13:10:17.347 に答える