jQueryの動作仕組みと設計思想の解析_jquery

これは短くて簡潔で、使いやすく、パフォーマンスが効率的で、Web アプリケーション開発に最適な補助ツールの 1 つです。したがって、ほとんどの開発者はプロトタイプを放棄し、Web 開発に jQuery を選択しています。

一部の開発者は、jQuery を使用するときに、jQuery ドキュメントでの使用方法しか知らず、jQuery がどのように動作するかを理解していないため、多くの問題に遭遇することがよくあります。これらの問題のほとんどは不適切な使用によって引き起こされ、いくつかは jQuery のバグです。 jQuery クラス ライブラリの動作メカニズムとコアのソース コードを理解していないと、jQuery クラス ライブラリをベースにした高パフォーマンスのプログラムを作成することは困難です。

jQuery に基づいてプログラムをデバッグする場合、ほとんどの場合、jQuery オブジェクトを追跡してその実行ステータスを分析する必要があります。ただし、jQuery コードは Ext や YUI ほど標準的ではありません。わかりにくい。つまり、jQuery を使いこなすには、そのソース コードを知る必要があります。

jQuery の設計コンセプト

jQuery を使用する前に、誰もが jQuery とは何なのかを疑問に思うでしょう。 jQuery は、プロトタイプ、mootools、その他のクラス ライブラリと同様に、Web 上の JavaScript 開発のための補助機能を提供するクラス ライブラリです。では、なぜ jQuery を選ぶのでしょうか? jQuery が登場する前は、Prototype と YUI はどちらも非常に成熟した JS フレームワークであり、それぞれに独自の特徴がありました。なぜそれらを放棄して新星 jQuery を使用するのでしょうか?開発者を魅了する優れた機能は何ですか?

この質問に答えるには、jQuery の設計概念を理解する必要があります。 Web 開発で JavaScript をどのように使用するかを思い出してください。ほとんどの場合、getElementById は Dom ドキュメント内の DOM 要素を検索するために使用され、値が取得または設定されます。また、innerHTML はそのコンテンツの取得または設定、またはイベント (クリックなど) の監視に使用されます。スタイルを制御するために、高さ、幅、表示などを変更して視覚効果を実現します。Ajax の場合は、データを取得し、ページ上の特定の要素にコンテンツを追加します。

要約すると、DOM 要素を操作しています。この要素は 1 つ以上の場合があります。この要素は、Document、Window、または DOM 要素です。このように、私たちのタスクは 2 つの部分で構成されており、1 つは DOM 要素を見つけること、もう 1 つは DOM 要素を操作することです。

DOM 要素の使用に習熟している人にとっては、getElementById などの直接検索メソッドや Element.lastChild などの間接検索メソッドを使用することも難しくありません。使いにくくないですか？では、クラス ライブラリは何に役立つのでしょうか?最も難しい問題はブラウザの互換性です。すべての JavaScript フレームワークは、この問題を解決し、JavaScript 自体の操作を簡素化する必要があります。

Prototype は JS クラス ライブラリの先駆けとも言える、新鮮な印象を与えてくれます。これにより、ブラウザの互換性の問題のほとんどが解決されます。同時に、元の関数名が長くて覚えにくい場合に頻繁に発生する書き込みエラーの問題を簡素化し (getElementById の代わりに $(xx) を使用します)、Ajax アクセス メソッドを提供し、Array、Object などの JavaScript ネイティブ オブジェクトを拡張します。 、関数、およびイベント。

しかし、これらはまだ開発のニーズを満たすことができません。たとえば、DOM ツリー内の DOM 要素の検索は要素の ID によってのみ行うことができますが、より便利な検索方法が必要であり、期待されています。入口が一般的すぎたり、学習曲線が高すぎたり、使用が困難になったりしてはなりません。

jQuery はここから始まり、jQuery オブジェクト内のすべてを統合します。 jQuery を使用するということは、jQuery オブジェクトを使用することを意味します。実際、jQuery の先駆的な仕事はまさにその名前が示すとおり、クエリです。その強力な検索機能は、あらゆるフレームワークを圧倒します。 jQuery は本質的にはクエリです。クエリに基づいて、見つかった要素を操作する機能も提供されます。このように、jQuery はクエリと操作を統合したものです。クエリはエントリであり、操作は結果です。

jQuery の実装は 2 つの部分に分けることもできます。1 つは jQuery の静的メソッドであり、ユーティリティ メソッドまたはツール メソッドとも呼ばれ、jQuery の jQuery 名前空間を通じて直接参照されます。 xxx()。 2 つ目は jQuery インスタンス メソッドで、jQuery(xx) または $(xx) を通じて jQuery インスタンスを生成し、このインスタンスを通じて参照するメソッドです。この部分のメソッドのほとんどは、関数を完了するために静的メソッド プロキシを使用します。実際の関数操作は jQuery の静的メソッドで実装されます。これらの関数は次の部分に分類できます:

1. セレクター、要素の検索。この検索には、CSS1～CSS3をベースにしたCSSセレクター機能だけでなく、直接検索や間接検索に拡張した機能も含まれています。

2. Dom 要素の属性操作。 Dom 要素は HTML タグとみなすことができ、属性の操作はタグの属性に対して操作します。この属性操作には、値の追加、変更、削除、取得などが含まれます。

3. Dom 要素の CSS スタイルの操作。 CSS はページの表示を制御します。 CSS の操作には、高さ、幅、表示、およびその他の一般的に使用される CSS 関数が含まれている必要があります。

4. Ajax 操作。 Ajax の機能は、サーバーからデータを非同期にフェッチし、関連する操作を実行することです。

5. イベント運営。イベントの互換性が統一されました。

6. アニメーション (Fx) の操作。これは CSS スタイルの拡張として見ることができます。

jQuery オブジェクトの構築

jQuery オブジェクトの生成または構築は、実際にはクエリ (セレクター) を構築して実行することです。クエリなので結果（DOM要素）は必ず検索され、その結果に対して操作が行われます。では、これらの検索結果はどこに保存されるのでしょうか?もちろん、最適な場所はこの jQuery オブジェクト内です。検索の結果は 1 つの要素である場合もあれば、(NodeSet のコレクションの形式で) などの複数の要素である場合もあります。つまり、jQuery オブジェクト内にコレクションが存在します。このコレクションには、見つかった DOM 要素が保存されます。

しかし、前のセクションで説明した jQuery オブジェクトはすべての操作の統合された入り口であるため、その構築は DOM ドキュメントから DOM 要素を見つけることに限定されるわけではなく、他のコレクションから転送されることもあります。渡されるのは、HTML 文字列から生成された DOM 要素である場合もあります。

jQuery ドキュメントは、jQuery オブジェクトを構築する 4 つの方法、jQuery(expression, [context])、jQuery(html)、jQuery(elements)、および jQuery(callback) を提供します。 jQuery は $ に置き換えることができます。この４つがよく使われます。実際、jQuery パラメータは任意の要素にすることができ、jQuery オブジェクトを構成できます。

いくつかの例:

1. $($("P")) のパラメーターは jQuery オブジェクトまたは ArrayLike のコレクションであることがわかります。

2. $() は $(document) の略です。

3. $(3) は、jQuery オブジェクト コレクションに 3 を入れます。

DOM 要素ではない $(3) などの要素 (ArrayLike コレクションの要素など) については、jQuery オブジェクトのメソッドはすべて DOM オブジェクトを対象にしないことが最善です。使い方が分からないとエラーが発生する可能性があります。ここまで述べてきましたが、その原理を理解するのはまだ困難です。ソース コードの観点から詳しく分析してみましょう。

jQuery(xxx) の呼び出しを通じてオブジェクトは生成されません。これがポイントです。 Window オブジェクトに。では、jQuery のインスタンス メソッドはどのように継承されるのでしょうか?見てみましょう:

var jQuery = window.jQuery = window.$ = function(selector, context)
{ return new jQuery.fn.init(selector, context);
これが jQuery の一般的な入り口です。jQuery オブジェクトは実際には new jQuery() を通じてそのプロトタイプのメソッドを継承します。 jQuery オブジェクトは、実際には jQuery.fn.init 関数によって生成されたオブジェクトです。ここで、いくつかの関数セット オブジェクトを jQuery.prototype に追加することはあまり意味がないことがわかります。新しい jQuery() は問題ありませんが、生成された jQuery オブジェクトは返されるときに破棄されるためです。したがって、jQuery オブジェクトの構築に new jQuery() を使用しないことが最善です。 jQuery オブジェクトは実際には新しい jQuery.fn.init です。そして jQuery.fn.init.prototype が jQuery オブジェクトの操作メソッドになります。たとえば、

jQueryjQuery.fn.init.prototype = jQuery.fn;
589 行目の関数を実装し、jQuery.fn の関数を jQuery.fn.init に入れるかどうかを心配することがあります。プロトタイプを作成した場合、jQuery.fn.extend メソッドを使用して何をすればよいでしょうか?これは実際には jQuery.fn への参照です。 jQueryを拡張する場合は、関連する関数をjQuery.fnに拡張するだけです。ここで、jQuery.fn.init がどのように機能するかを見てみましょう:

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

init : function(selector, context) {
selectorselector = selector document;// セレクターが存在することを確認します

// 最初のケースは Handle $(DOMElement) ) コンテキストを無視した単一の Dom 要素

if (selector.nodeType) {
this[0] = selector;
return this; }

if ( typeof selector == "string") {//セレクターは文字列です
var match = QuickExpr.exec(selector);
if (match && (match[1] || !context)) {
if (match[1])// 2 番目のケースが処理されます $(html) -> $(array)
selector = jQuery.clean([match[1]], context );
else {// 3 番目のケース: HANDLE: $("#id")//$("#id") の処理
var elem = document.getElementById(match[3]); >if (elem) {
// IE は name=id の要素を返します。その場合、document.find(s)
if (elem.id != match[3])
return jQuery ().find(selector) ;
// 新しい jQuery(elem) を構築します
return jQuery(elem)
}
selector = []
};

// 4 番目のケース: 処理 $(expr, [context])==$(content).find(expr)
return jQuery(context).find(selector); else if (jQuery.isFunction(selector)) //5 番目の状況: $(function)7 ドキュメント準備完了のショートカット
return jQuery(document)[jQuery.fn.ready" : "load"](selector );

// 6 番目のケース: $(elements) の処理
return this.setArray(jQuery.makeArray(selector));
}