jQuery を改善し、効率を 1,000 倍向上させる 25 のステップ_jquery

1. Google コードから jQuery をロードする
Google コードでは、サーバーから直接ロードするよりも、Google コードから jQuery をロードする方が優れています。さらなる利点。 サーバー の帯域幅を節約し、Google のコンテンツ配信ネットワーク (CDN) から JS ライブラリを迅速にロードできます。さらに重要なのは、ユーザーが Google Code で公開されているサイトにアクセスすると、そのサイトは キャッシュされるということです。
これは理にかなっています。キャッシュされていない jQuery の同じコピーを使用しているサイトがどれだけあることか。これは簡単に実行できます。

2. チートシートを使用します
jQuery に限らず、多くのプログラミング言語にも同様のチートシートがあり、A4 で簡単です各機能が紙の上でどのように使用されているかを確認します。幸いなことに、親切な人々がすでに完璧な jQuery チートシートを作成しています:
http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat -sheet/
http://colorcharge.com/jquery/

3. すべてのスクリプトを統合して縮小します
はい、これは JavaScript の一般的なトリックです。ただし、jQuery を使用する大規模なプロジェクトでは、関連する多くの jQuery プラグイン (このサイトではイージング、localScroll、lightbox、preload を使用します) を使用する可能性があるため、通常は適用可能です。ブラウザは (ほとんどの場合) JS スクリプトを同時に読み込むことができません。つまり、多くのスクリプトを同時に読み込むと、ページの読み込み速度が遅くなります。したがって、これらのスクリプトをすべてのページにロードする場合は、公開する前に、これらのスクリプトを少し大きな JS スクリプトに統合することを検討する必要があります。一部の jQuery プラグインはすでに縮小されていますが、JS スクリプトと縮小されていないスクリプトをパッケージ化する必要があります。完了には数秒しかかかりません。
個人的には Packer by Dean Edwards

4. Firebug の優れたコンソール ロギング ツールを使用します
Firebug をまだインストールしていない場合は、必ずインストールしてください。その他の多くの便利な機能 (http トラフィックの検査や CSS の問題の発見など) に加えて、JS スクリプトを簡単にデバッグできる優れたロギング コマンドも備えています。
ここでは、Firebug のすべての 機能について詳しく説明します。
私のお気に入りの機能は「console.info」です。これを使用すると、alert;「console.time」を使用せずに情報と変数値をコンソールに出力できます。コードセットにタイマーを設定して、JS スクリプトの実行にかかる時間を計算できます。実行はすべて簡単です:

6. DOM 操作を最小限に抑える
DOM への挿入操作を減らすことで、上記のコードの実行を高速化できます。 DOM 挿入操作 (.append()、.prepend()、.after()、.wrap() など) は非常に時間がかかり、これらの操作を実行するとプログラムの実行が遅くなります。
私たちがしなければならないのは、文字列連結を使用して項目のリストを作成し、.html() などの関数を使用して項目をリストに追加することだけです。次の例を参照してください。

';

for (i = 0; i myListItems = 'これはリスト項目です ' i '';
myListItems = '';


現在、所要時間はわずか 19 ミリ秒であり、前の最初の例と比較して 50 倍の大幅な改善です。


8. 可能な限りクラスの代わりに ID を使用します


jQuery はクラスを使用して ID で選択するのと同じくらい簡単に DOM 要素を選択できるため、以前よりも自由になります。要素選択操作のためのクラスの数は非常に魅力的です。ただし、jQuery は選択操作にブラウザ固有のメソッド (getElementById) を使用するため、ID を使用して選択操作を行う方が有利です。どのくらい速いですか？見てみましょう。 前の例を変更して、作成する各 LI が一意のクラスを持つようにしました。次に、一度に 1 つの要素を選択しながら処理を繰り返します。

コードをコピーします

コードは次のとおりです: // リストを作成します var myList = $('.myList'); var myListItems = '
';
for (i = 0; i myListItems = '
• これはリスト項目です
'
}
myListItems = '

コードは次のとおりです:

// リストを作成します
var myList = $('.myList');
var myListItems = '

';
for (i = 0; i myListItems = '
• これはリスト項目です
'
}
myListItems = '

';
myList.html(myListItems);
// 各項目を 1 回選択します
for (i = 0; i var selectedItem = $('#listItem' i);
}

所要時間はわずか 61 ミリ秒で、ほぼ 100 倍高速です

9. セレクターにコンテキストを提供します
デフォルトでは、$('.myDiv') のようなセレクターを使用すると、DOM ドキュメント要素全体が検索されます。これには多大なコストがかかります。
選択操作を実行するとき、jQuery 関数は 2 番目のパラメーターを指定できます: jQuery(expression, context) セレクターにコンテキストを提供すると、要素の検索は DOM ドキュメント全体ではなく、このコンテキストで実行されます。要素。
これを説明するために、前のコードの最初の部分を使用してみましょう。それぞれが個別のクラスを持つ 1000 個の項目を含む UL を作成します。
その後、繰り返して一度に 1 つの項目を選択します。クラスごとに 1000 個の項目をすべて選択するには 5 秒以上かかることに注意してください。

コードをコピー コードは次のとおりです。

var selectedItem = $('#listItem' i);

次に、UL 内でのみ選択を実行するコンテキストを追加しました。

コードをコピー コードは次のとおりです:

var selectedItem = $('#listItem' i, $('.myList'));

効率は悪く、依然として 3818 ミリ秒かかりましたが、わずかな修正で 25% の速度向上を達成しました。
10. メソッド チェーンを正しく使用する
jQuery の最も優れた機能の 1 つは、jQuery が継続的にメソッド呼び出しを実行できることです。たとえば、要素のクラスを切り替えたいとします。

コードをコピーします コードは次のとおりです:

$('myDiv').removeClass('off').addClass('on');

あなたが私と同じなら、その後さらに使用できるかもしれません最初の 5 分で jQuery を学習します。まず第一に、行をまたいで動作することができます (jQuery は JavaScript です)。つまり、次のようなきちんとしたコードを書くことができます:

コードをコピー コードは次のとおりです:

$('#mypanel')
.find('TABLE .firstCol')
.removeClass('.firstCol')
.css('background' : 'red')
.append('このセルは現在赤色です');

リンクされたリストを使用する習慣は、デバイスの使用の選択肢を減らすのに役立ちます。ただし、1 つの要素に対して複数の機能を実行したい場合は、さらに深く掘り下げて使用できますが、操作の要素を何らかの方法で変更します:

コードをコピー コードは次のとおりです。

$('#myTable').find('.firstColumn').css('background','red');

テーブルを選択し、クラス「firstColumn」を持つセルを見つけて、その背景を赤にしました。
次に、クラス「lastColumn」を持つすべてのセルの背景を青に設定します。 find() 関数を使用してクラスが "firstColumn" ではないすべてのセルを除外したため、テーブルで選択操作を再度使用する必要がありますが、継続的にメソッドを呼び出すことはできないでしょうか。幸いなことに、jQuery には、一致した要素リストを前の状態に変更する end() 関数が用意されているため、メソッド リストを実行できるようになります。 >
コードは次のとおりです:

$('#myTable') .find('.firstColumn') .css('background','red' ) .end() .find('.lastColumn') .css('background','blue');

呼び出しを連鎖できるメソッドを作成するカスタム jQuery 関数も簡単です。要素を変更して要素を返す関数を作成するだけです。




コードをコピー

コードは次のとおりです:

$.fn.makeRed = function() {
return $(this).css('background', 'red');
}
$('#myTable') .find('.firstColumn').makeRed().append('hello');

とても簡単です。

11. エフェクトの正しい使い方を学ぶ
jQuery を初めて使い始めたとき、これがとても気に入りました。slideDown などの事前定義されたさまざまなアニメーション効果を簡単に使用できます。 () と fadeIn()。 jQuery が提供する animate() メソッドは非常に使いやすく強力なので、簡単に深く使用できます。実際、jQuery ソース コードの多くのメソッドは、animate() 関数を通じて効果を実現します。

コードをコピー コードは次のとおりです。

slideDown: function(speed,callback){
return this.animate({height: "show"}, 速度, callback);
},

fadeIn: function(speed, callback){
return this.animate({ opacity: " show"},speed,callback);
}

animate() メソッドは CSS にのみ作用し、値に基づいてスムーズに変換します。したがって、幅、高さ、不透明度、背景色、上、左、余白、色、フォントサイズなどを自由に変更できます。
メニュー項目に高さの変更を追加するのは簡単です:

コードをコピーします コードは次のとおりです:

$('#myList li').mouseover(function() {
$(this).animate({"高さ": 100}, "遅い");
});

他の jQuery 関数とは異なり、アニメーション効果は自動的にキューに入れられるため、最初の効果が完了した後に 2 番目の効果を実行する場合は、animate メソッドを 2 回呼び出す必要があります:

コードをコピー コードは次のとおりです:

$('#myBox').mouseover(function() {
$(this).animate({ "幅": 200 }, "遅い");
$(this).animate({"高さ": 200}, "遅い"); );

アニメーション効果を同時に発生させたい場合は、すべてのスタイルをパラメータ オブジェクトとしてメソッドに渡す必要があります:

コードをコピー コードは次のとおりです:

$('#myBox').mouseover(function() {
$(this) .animate({ "width" : 200, "height": 200 }, "slow");


値が数値であるプロパティをアニメーション化できます。

色や背景色 などの数値以外のプロパティをアニメーション化するのに役立つプラグインをダウンロードすることもできます。
12. イベント プロキシを理解する

JQuery を使用すると、DOM 要素にイベントをシームレスに追加できます。これは優れた機能ですが、要素にイベントを追加しすぎると非効率的になります。多くの場合、イベント プロキシを使用すると、より少ない数のイベントで同じ目標を達成できます。説明する最もよい方法は例を使用することです:

コードをコピー コードは次のとおりです:

$(' #myTable TD').click(function(){

$(this).css('background', 'red');
});テーブルをクリックすると、上記のコードはすべてのセルの背景を赤にします。たとえば、10 列、50 行のグリッドがある場合、500 個のイベントがバインドされます。さて、ここでイベント プロキシが表示されます:

コードをコピーします

コードは次のとおりです: $('#myTable').click(function(e) { var clicked = $(e.target); clicked.css('background', 'red');

});

e' には、実際にクリック イベントを受け取ったターゲット要素を含むイベント情報が含まれます。私たちがしなければならないのは、どのセルがクリックされたかを確認することだけです。かなり賢いですね！
イベント プロキシには別の利点があります。通常、イベントを要素のコレクションにバインドすると、イベントはコレクション要素にのみバインドされます。 DOM に新しい要素を追加すると、セレクターによってこれらの新しい要素が一致したとしても、これらの新しい要素はイベント ハンドラーにバインドされないため (同意されますか?)、イベントは発生しません。
イベント プロキシを使用する場合でも、DOM にバインドされた後でも複数の一致する要素をイベントに追加でき、それらは引き続き正常に機能します。
13. クラスを使用して状態を保存する
これは、HTML に情報を保存する最も基本的な方法です。 jQuery はクラスに基づいて要素を操作するのが得意なので、要素に関する状態情報を保存する必要がある場合は、追加のクラスを使用してそれを保存してみてはいかがでしょうか。
これが例です。拡張メニューを作成したいと考えています。ボタンをクリックすると、slideDown()とslideUp()でメニューを拡大・縮小したいと考えています。以下の HTML を見てください:

コードをコピーします コードは次のとおりです:

< ;div class=" 展開されたメニュー項目">

🎜>

• メニュー項目 1
  
• メニュー項目 3
  

とても簡単です。ラッパー DIV に追加のクラスを追加するだけで、項目のステータスを通知するだけです。したがって、ボタンをクリックした後に必要なのは、対応する slideUp() メソッドと slideDown() メソッドを実行するクリック イベント処理だけです。

コードをコピー

コードは次のとおりです: $('.button').click (function( ) {

var menuItem = $(this).parent();

var パネル = menuItem.find('.panel');

if (menuItem.hasClass ("expanded ")) {
menuItem.removeClass('expanded').addClass('collapsed');
panel.slideUp();
else if (menuItem.hasClass(")折りたたまれた") ) {
menuItem.removeClass('collapsed').addClass('expanded');
panel.slideDown();
}
});



これは非常に単純な例ですが、要素または HTML フラグメントに追加のクラスを追加して、あらゆる種類の情報を保存できます。
ただし、単純な状況に加えて、次のテクニックを使用する必要があります。

14. より良い方法は、jQuery の組み込み data() メソッドを使用して状態を保存することです


いくつかの理由により、これに関して適切なドキュメントはありません。 。 jQuery には組み込みの data() メソッドが用意されており、DOM 要素とは異なり、キー/値型のデータを格納するために使用できます。データの保存は非常に簡単です:
コードをコピー

コードは次のとおりです: $ ('# myDiv').data('currentState', 'off');

同じ HTML コンテンツを使用できるように、前の例のコードを変更します (「展開された」を除く) " class) および data() 関数を使用して状態を保存します:

コードをコピー

コードは次のとおりです: $ ('.button').click(function() { var menuItem = $(this).parent();

var パネル = menuItem.find('.パネル');

if (menuItem.data('collapsed')) {
menuItem.data('collapsed', false);
panel.slideDown(); 🎜>else {
menuItem.data('collapsed', true);
}
};
このメソッドの使用法がより洗練されていることにも同意していただけると思います。data() と RemoveData() の詳細については、jQuery の内部
15. 独自のセレクターを作成する
jQuery には、ID、クラス、タグ、属性、その他の要素によって選択するための組み込みセレクターが多数あります。ただし、他のコンテンツに基づいて要素を選択する必要があり、jQuery がこのセレクターを提供していない場合はどうすればよいでしょうか? そうですね、解決策の 1 つは、最初から要素にクラスを追加し、これらのクラスを要素の選択操作に使用することです。ただし、新しいセレクターを使用して jQuery を拡張するのは難しいことがわかっています。
説明するための最良の方法は、例を使用することです:

コードをコピーします コードは次のとおりです:

$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a)​​.height() > 100;
}
});

$('.box:over100pixels').click(function() {
alert('クリックした要素の高さが 100 ピクセルを超えています');
}) ;

コードの前の部分では、100px を超えるすべての要素を検索するカスタム セレクターを作成します。次のコードは、セレクターを使用して見つかった要素にクリック イベントをバインドするだけです。
ここでは詳しい説明はしませんが、その威力は想像できると思います。 Google で「カスタム jQuery セレクター」を検索すると、この例がたくさん表示されます。

16. HTML を最小化し、ページの読み込み後に変更します。このタイトルにはあま​​り意味がないかもしれませんが、このトリックはコードを合理化し、コード サイズとページのダウンロード時間を削減して、ページの最適化に役立ちます。検索エンジン。以下の例を参照してください。

コードをコピーします コードは次のとおりです。

これはフィールド番号 1

;

これはエラー メッセージです

これはフィールド番号 2

/div>

div>

これはエラー メッセージです

🎜>

上記は HTML の具体例であり、説明のために若干変更されています。このコードは非常に醜いと思うでしょう。このようなコードが非常に長い場合、かなり長くて見苦しいページが完成するでしょう。したがって、次のように処理できます:




コードをコピーします

コードは次のとおりです:

これはフィールド 1

これはフィールド 2

>これはフィールド 3

これはフィールド 4

これはフィールド 5 div>

必要なのは、jQuery 操作によるページの読み込みが完了した後で、醜い HTML を追加することだけです:




コードをコピー

コードは次のとおりです。

$(document).ready(function() { $('.field').before('< ;div class="fieldOuter ">

'); $('.field').after('

;

これはエラー メッセージです

');
常にこれを行うことをお勧めするわけではありません。ページが読み込まれた後、ページが一瞬フラッシュするのが見えますが、場合によっては、大量の HTML コンテンツが繰り返されている場合、この方法を使用して表示できるページ コードが大幅に削減されます。サイズを変更し、無関係で繰り返しのタグを減らすことで、SEO に利益をもたらすことができます。
17. 速度と SEO を考慮して、コンテンツの読み込みを遅らせる
ページの読み込み速度を向上させ、Spider によって検索される HTML コンテンツをスムーズにする方法もあります。ページの読み込み後に AJAX リクエストを使用して追加のコンテンツを読み込むことで、ユーザーはすぐにブラウジングを開始し、インデックスを付けたいコンテンツをスパイダーに表示させることができます。
私たちはすでにこのテクノロジーを自社のウェブサイトで使用しています。このページの上部にある紫色のボタンを押すと、3 つの表、ルート案内、Google マップがポップアップ表示され、ページのサイズが 3 倍になります。したがって、これらの HTML コンテンツを静的ページに配置し、ページが読み込まれた後に、load() 関数を通じてそれを読み込むだけです:

コードをコピー コードは次のとおりです:

$('#forms').load('content/headerForms.html', function() {
// ここでコードが実行されますコンテンツが読み込まれたら
// すべてのイベント ハンドラーなどをここに配置します。
});

このトリックはページのどこでも使用しません。これを考慮する必要があります。追加のページ要求を行う必要があり、ページ上の一部のコンテンツはユーザーにすぐに表示できませんが、この手法を正しく使用すると、最適化に非常に役立ちます。
18. jQuery が提供するツール機能を使用する
jQuery には Flash エフェクトだけではありません。 jQuery の作者は、JacaScript の欠点の一部を補う、非常に実用的なメソッドもいくつか提供しています。
http://docs.jquery.com/Utilities
特に、いくつかの一般的な配列関数に対するブラウザーのサポートを提供するのがパッチです。 jQuery には、配列の反復、フィルター、クローン、マージ、および重複の削除を行うメソッドが用意されています。
その他の一般的に使用される関数には、ドロップダウン ボックスでの選択内容の取得などがあります。従来の JavaScript メソッドでは、getElementById を使用して 要素を取得し、その子要素を走査して選択された要素を見つける必要がありました。 jQuery は非常に使いやすいメソッドを提供します。

コードをコピー コードは次のとおりです:

$ ('#selectList ').val();

公式 Web サイトの jQuery ドキュメントや、あまり使用されていないメソッドを参照することに時間を費やす価値があります。
19. noConflict を使用して jQuery オブジェクトの名前を変更する
ほとんどの JavaScript フレームワークは、同じページで複数の JS フレームワークが使用される場合、そのページの略語として $ 記号を使用します。紛争が簡単に発生する可能性があります。幸いなことに、簡単な方法があります。 noConflict() 関数は $ の制御を返し、それを独自の変数名に設定できます:

コードをコピー コードは次のとおりです。以下のように:

$('#selectList').val();

20.
これも十分に文書化されていない質問です (少なくとも私が調べたときにはありませんでした) が、フォト ギャラリーや回転ランタン エフェクトなどの作成に関しては、かなり一般的な要件です。 。これは jQuery で非常に簡単に実現できます。
必要なのは、IMG で .load() メソッドを使用し、その中にコールバック関数を追加することだけです。次の例では、画像 src の属性を変更し、単純な読み込み関数を追加します。

コードをコピーします コードは次のとおりです。

$('#myImage').attr('src', 'image.jpg').load(function() {
alert('画像が読み込まれました');
});

画像が読み込まれると、アラートがポップアップ表示されることに注意してください。
21. 常に最新バージョンを使用してください。
jQuery は現在も継続的に更新されており、その作者である John Resig は jQuery のパフォーマンスを向上させる方法を常に模索しています。 jQuery の現在のバージョンは 1.3.2 で、John は新しいセレクター エンジン Sizzle を作成中であると発表しました。これによりセレクターのパフォーマンスが大幅に向上する (Firefox では最大 4 倍) 可能性があるため、最新の状態に保つ必要があります。

22. 要素が存在するかどうかを確認する方法
適切な要素が存在する場合は、その要素がページ上に存在するかどうかを確認する必要はありません。 DOM 内に見つからない場合、jQuery は何も行いません。ただし、要素が選択されているかどうか、または選択されている項目の数を確認する必要がある場合は、長さ属性を使用できます:

コードをコピー コードは次のとおりです:

if ($('#myDiv).length) {
// コード
}

非常に単純。
23. HTML 属性に JS クラスを追加する
私はこのテクニックを Karl Swedberg から学び、jQuery を学習していたときに彼の本を読んでいました。
彼は最近、私の以前の記事でこの使用法についてコメントを残しました。基本原則は次のとおりです。
まず、jQuery がロードされた後、メソッドを使用して HTML タグに「JS」クラスを追加できます:

コードをコピー コードは次のとおりです:

$('HTML').addClass('JS');

これは、JavaScript が有効な場合にのみ発生するため、ユーザーが JavaScript スイッチをオンにすると、要素に CSS スタイルを追加します:

コードをコピー コードは次のとおりです:

.JS #myDiv{display:none ;}

これが意味するのは、JavaScript がオンのときにコンテンツを非表示にし、必要に応じて jQuery を使用してそのコンテンツを表示できるということです (縮小または展開など)ユーザーがクリックしたときにコンテンツが表示されます)、JavaScript をオフにしている間 (スパイダーを検索しているとき)、すべてが表示されます。このトリックは後で使用します。
ここで 彼のすべての記事 をご覧いただけます。
24. デフォルトの動作を防ぐには 'false' を返します
これは明らかな場合とそうでない場合があります。このような習慣がある場合:

コードをコピーします コードは次のとおりです。

Click me!

次に、次のイベント ハンドラーを追加します:

コピーcode コードは次のとおりです:

$('popup').click(function(){
// ポップアップ コードを起動します
} );

長いページで上記のメソッドを使用すると、うまく動作する可能性があります。リンクをクリックすると、アンカーがページの上部にジャンプすることがあります。
あなたがしなければならないのは、そのデフォルトの動作を防ぐことだけです。あるいは、実際に任意のイベントのデフォルトの動作に「return false;」を追加することもできます。次のように:

コードをコピー コードは次のとおりです:

$('popup') .click( function(){
// ポップアップ コードを起動します
return false;
});

25. Ready イベントの略語

ちょっとした裏技ですが、$(document).ready() の略語を使うと文字数を節約できます。 置換:


コードをコピー

コードは次のとおりです: $(document) .ready( function (){ // コード

}); 🎜>

コードは次のとおりです。

$(function (){
// コード