$('li.menu-item').click(function () {alert('テストクリック');})
.css('display', 'block')
.css('color', 'red')
fadeTo(2, 0.7);
7. コード内でセレクターを頻繁に使用する場合は、拡張します。 jQuery の $.expr[':'] オブジェクトを使用して、独自のセレクターを作成します。次の例では、非表示の要素を選択するためのアバブザフォールドセレクターを作成しました:
$.extend($.expr[':'], {
abovethefold: function(el) {
return $(el).offset().top < $ (ウィンドウ) .scrollTop() $(window).height();
}
});
var nonVisibleElements = $('div:abovethefold'); // 要素を選択します
2. DOM 操作を最適化するための提案 8. jQuery オブジェクトをキャッシュする
頻繁に使用する要素をキャッシュします:
var header = $('#header');
var divs = header.find('div'); >var Forms = header.find('form');
9. DOM 挿入を実行する場合、すべての要素を 1 つの要素にカプセル化します
直接の DOM 操作は遅いです。 HTML 構造の変更は最小限に抑えます。
var menu = ''; for (var i = 1; i <100; i ) {
メニュー = '
- ' i '
'; 🎜>menu = '';
$('#header').prepend(menu);
// これは絶対に行わないでください:
$('#header').prepend( ' ');
for (var i = 1; i $('#menu').append( ' - ' i '
');
}
10. jQuery は例外をスローしませんが、
例外の数はユーザーにスローされませんが、開発者はこれに依存しないでください。 jQuery は通常、オブジェクトが存在するかどうかを判断する前に、無駄な関数を多数実行します。したがって、オブジェクトへの一連の参照を行う前に、まずそのオブジェクトが存在するかどうかを確認する必要があります。
11. 同等の関数の代わりに直接関数を使用する パフォーマンスを向上させるには、$.get()、$ .getJSON()、$.post() の代わりに $.ajax() のような直接関数を使用する必要があります。後者は $.ajax() を呼び出すためです。
12. 後で使用するために jQuery の結果をキャッシュする
多くの場合、JavaScript アプリケーション オブジェクトを取得します。App を使用して、頻繁に選択するオブジェクトを保存できます。
コードをコピーしますApp.hiddenDivs.find('span');
13. jQuery の内部関数 data() を使用して状態を保存します
を使用することを忘れないでください。情報を保存する .data() 関数:
コードをコピー
コードは次のとおりです: $( '#head').data('name', 'value'); // 次に、それをアプリケーションで呼び出します:
$('#head').data('name'); 🎜 >
14. jQuery ユーティリティ関数を使用する
シンプルで実用的な jQuery ユーティリティ関数を忘れないでください。私のお気に入りは $.isFunction()、$isArray()、$.each() です。
15. HTML ブロックに「JS」クラスを追加します。
jQuery が読み込まれたら、まず HTML に「JS」というクラスを追加します。
コピーコード
の場合のみユーザーが JavaScript を有効にすると、CSS スタイルを追加できます。例:
コードをコピー
JavaScript が有効になっている場合は、HTML コンテンツ全体を非表示にし、jQuery を使用して目的のことを実現できます (たとえば、ユーザーがパネルをクリックしたときに特定のパネルを折りたたんだり展開したりするなど)。 Javascript が有効になっていない場合、ブラウザはすべてのコンテンツをレンダリングし、検索エンジン クローラーもすべてのコンテンツを削除します。今後はこのテクニックをもっと活用していきたいと思います。
3. イベントのパフォーマンスの最適化に関する提案
16. $(window).load に従う
$(document) の代わりに $(window).load() が使用される場合があります。 ready() は、すべての DOM 要素がダウンロードされるまで待機しないため、高速です。使用する前にテストする必要があります。
17. イベント委任を使用する
コンテナ内に多数のノードがあり、イベントをすべてのノードにバインドしたい場合、委任はそのようなアプリケーション シナリオに非常に適しています。委任を使用すると、親でイベントをバインドし、どの子ノード (ターゲット ノード) がイベントをトリガーしたかを確認するだけで済みます。これは、大量のデータを含むテーブルがあり、td ノードにイベントを設定したい場合に非常に便利です。まずテーブルを取得し、次にすべての td ノードの委任イベントを設定します。
$("テーブル").delegate("td", "hover", function(){
$(this).toggleClass("hover");
}); >
18.ready イベントの略語を使用します
js プラグインを圧縮してすべてのバイトを保存したい場合は、$(document).onready() の使用を避けるべきです
//
$(document).ready(function) は使用しません。 (){
// コード
});
$(function (){
// コード
}); >
4. jQuery のテスト
19. jQuery 単体テスト JavaScript コードをテストする最良の方法は、人にテストしてもらうことです。ただし、Selenium、Funcunit、QUIT、QMock などの自動化ツールを使用して、コード (特にプラグイン) をテストできます。この件については言いたいことがたくさんあるので別のトピックで取り上げたいと思います。 20. jQuery コードを標準化する
コードを頻繁に標準化し、どのクエリが遅いかを確認し、置き換えます。 Firebug コンソールを使用できます。 jQuery のショートカット関数を使用してテストを容易にすることもできます:
$.l($('div'))
$.time();
$.lt () ; $('div');
コードをコピーします>
コードは次のとおりです:
21. 最新バージョンのjQuery
最新バージョン 多くの場合、最高です。バージョンを変更した後は、必ずコードをテストしてください。完全な下位互換性がない場合もあります。
22. HMTL5 の使用
新しい HTML5 標準は、より軽量な DOM 構造をもたらします。構造が軽いということは、jQuery を使用するときに必要なトラバーサルが少なくなり、読み込みパフォーマンスが向上することを意味します。したがって、可能であれば HTML5 を使用してください。
23. 15 個を超える要素にスタイルを追加する場合は、スタイル タグを DOM 要素に直接追加します。
いくつかの要素にスタイルを追加するには、jQuey の css() 関数を使用するのが最善の方法です。ただし、15 を超える要素にスタイルを追加する場合は、スタイル タグを DOM に直接追加する方が効率的です。この方法では、コード内でのハードコードの使用を回避します。
コードをコピー
コードは次のとおりです。
$('') .appendTo('head');
24. Avoid loading redundant code
It is a good idea to put Javascript code in different files and load them only when needed. This way you won't load unnecessary code and selectors. It is also easy to manage code.
25. Compress into one main JS file to keep the number of downloads to a minimum
When you have determined which files should be loaded, package them into one file. Use some open source tools to automatically do it for you, such as using Minify (integrated with your back-end code) or using online tools such as JSCompressor, YUI Compressor or Dean Edwards JS packer to compress files for you. My favorite is JSCompressor.
26. Use native Javascript when needed
Using jQuery is a great thing, but don’t forget that it is also a framework for Javascript. So you can use native Javascript functions when necessary in jQuery code, which can achieve better performance.
27. Load jQuery framework from Google
When your application is officially launched, please load jQuery from Google CDN, because users can get the code from the nearest place. This way you can reduce server requests, and if the user browses another website that also uses Google CDN's jQuery, the browser will immediately call out the jQuery code from the cache.
// Link specific version of the compression code
< ;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
28. Lazy load content for speed and SEO benefits (Lazy load content for speed and SEO benefits)
Use Ajax to load your website, which can save money on the server side Loading time. You can start with a common sidebar widget.
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
