jQueryの運行メカニズムと設計理念の分析
5969 ワード
その短くて精悍で、使用が簡単で便利で、性能が効率的で、開発効率を極めて高めることができて、Web応用を開発する最良の補助ツールの一つです.そのため,ほとんどの開発者はPrototypeを捨ててjQueryを選択してWeb開発を行っている.
一部の開発者はjQueryを使用する場合、jQueryドキュメントの使用方法しか知らないため、jQueryの動作原理が分からず、多くの問題に直面することがあります.これらの問題の大部分は不適切な使用によって生じ,ごく少数はjQueryのBugである.その動作メカニズムやコアソースがわからなければ、jQueryクラスライブラリベースの高性能なプログラムを書くのも難しい.
jQueryベースのプログラムをデバッグする場合、ほとんどの時間はjQueryオブジェクトに入ってその実行状態を分析することを追跡しますが、jQueryコードはExt、YUIのように中規中挙ではなく、そのコードは少し難解で、分かりにくいです.つまりjQueryをうまく使いたければ、必ずソースコードをはっきりさせなければならないということです.
jQueryのデザインコンセプト
jQueryを使用する前に、jQueryは何ですか?jQueryはクラスライブラリであり,prototype,mootoolsなどのクラスライブラリと同様にWebのJavaScript開発に補助機能を提供する.では、なぜjQueryを選んだのでしょうか.jQueryが登場する以前はPrototype,YUIともに成熟したJsのフレームワークであり,それぞれ特徴があった.なぜそれらを捨てて、後発のショーを使うjQueryは、開発者を引き付ける優れた特性を持っているのだろうか.
この質問に答えるには、jQueryの設計理念を理解しなければなりません.Web開発でJavaScriptをどのように使用しているかを思い出したり想像したりします.ほとんどの時間はgetElementByIdを用いてDomドキュメントにDOM要素を見つけ、値や設定値をとり、innerHTMLを用いてその内容を取ったり設定したり、clickなどのイベントの傍受をしたりしています.制御スタイルの面ではheight,width,displayなどの変更を行い、視覚的な効果を達成します.Ajax側では、データを取り出してページのある要素に内容を追加します.
総合的に、DOM要素を操作しています.この要素は1つ以上かもしれません.この要素はDocument、WindowまたはDOM要素かもしれません.このように私たちの任務は2つの大部分で、1つはDOM要素を探して、2つはDOM要素を操作します.
使いこなすにはgetElementByIdのような直接的な検索方式を採用してもElementのようなものを採用してもよい.LastChildのような間接的な検索方式は難しくなく、DOM要素に対してもDOMの操作面が豊富で、使いにくいわけではありませんか?では、クラスライブラリは何に使いますか?最も難しい問題はブラウザの互換性の問題です.すべてのJavaScriptフレームワークはこの問題を解決し、JavaScript自体が持つ操作を簡素化しなければならない.
PrototypeはJsクラスライブラリを創始した先河と言っていいほど、私たちに新しい感じを与えてくれます.ほとんどのブラウザの互換性の問題を解決します.同時に元の関数名が長くて記憶しにくいよく書かれた間違いの問題(getElementByIdの代わりに$(xx)を採用)を簡略化し、Ajaxのアクセス方式を提供し、Array、Object、Function、EventなどのJavaScriptオリジナルオブジェクトを拡張した.
しかし、これらは開発のニーズを満たすことができません.例えば、DOMツリーの中でDOM要素を探すのは、要素のIDを通過するだけです.しかし、私たちはもっと便利な検索方法を望んでいます.同時に、あまり広くなく、曲線を勉強しすぎたり、使いにくい統一的な入り口を望んでいます.
jQueryはここから出発して、すべてをjQueryオブジェクトに統一します.jQueryを使用することは、jQueryオブジェクトを使用することです.実はjQueryの創始的な仕事はその名前のようにqueryです.強力な検索機能により、すべてのフレームワークが暗くなります.jQueryは実質的にクエリーです.検索された要素をクエリーベースで操作する機能も提供されます.このようにjQueryはクエリと操作の統一である.クエリーはエントリで、操作は結果です.
jQueryは実装上も2つの大部分に分けることができ、一部はjQueryの静的方法であり、実用的な方法やツール方法とも呼ばれ、jQuery.xxx()のjQueryネーミングスペースは直接参照します.第2の部分はjQueryのインスタンスメソッドであり、jQuery(xx)または$(xx)によってjQueryインスタンスを生成し、このインスタンスによって参照するメソッドである.この部分の方法の多くは,静的メソッドエージェントを用いて機能を完了することから行われる.真の機能的な動作はjQueryの静的方法で実現される.これらの機能は細分化され、以下の部分に分けることができます.
1、Selector、要素を検索します.このルックアップには、CSS 1~CSS 3に基づくCSS Selector機能だけでなく、直接ルックアップまたは間接ルックアップに拡張された機能も含まれる.
2、Dom要素の属性操作.Dom要素はhtmlのラベルと見なすことができ,属性に対する操作はラベルの属性に対する操作である.このプロパティ操作には、追加、変更、削除、値の取得などが含まれます.
3、Dom要素のCSSスタイルの操作.CSSは、ページの表示を制御する効果です.CSSの操作には、高さ、幅、ディスプレイなど、よく使われるCSSの機能が含まれなければなりません.
4、Ajaxの操作.Ajaxの機能は,非同期でサーバからデータを取り出して関連操作を行うことである.
5、Eventの操作.Eventの互換性を統一的に処理しました.
6、アニメーション(Fx)の操作.CSSスタイル上の拡張と見なすことができます.
jQueryオブジェクトの構築
jQueryオブジェクトを生成または構築することは、クエリーを構築して実行することです.クエリーである以上、必ず検索される結果です.(DOM要素)では、後でこれらの結果を操作することができます.では、これらの検索結果はどこに保存されますか?最良の場所はもちろんこのjQueryオブジェクトの内面です.検索結果は1つの要素である可能性があり、複数の要素(NodeSetの集合の形式)である可能性があります.すなわちjQueryオブジェクトの内面に集合がある.このコレクションはDOM要素を検索するために保存されます.
しかし、前節で述べたjQueryオブジェクトは、すべての操作の統一的なエントリであり、DOMドキュメントからDOM要素を検索するだけでなく、別の集合から転送されたDom要素、HTMLの文字列から生成されたDOM要素に限定されるものではありません.
jQueryドキュメントには、jQuery(expression,[context])、jQuery(html)、jQuery(elements)、jQuery(callback)の4つの方法が用意されています.このうちjQueryは$で代用できます.この4種類はよく使われます.実はjQueryのパラメータはどんな要素でもjQueryオブジェクトを構成することができます.
いくつかの例を挙げます.
1,$($(「P」)は、そのパラメータがjQueryオブジェクトまたはArrayLikeの集合であることを示す.
2、$()は$(document)の略です.
3,$(3)はjQueryオブジェクトの集合に3を配置する.
$(3)のような要素(ArrayLikeの集合のような要素)がDOM要素ではない場合は、jQueryオブジェクトを構築しないほうがよい.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()によってそのprototypeを継承する方法ではない.jQueryオブジェクトは実際にjQuery.fn.init関数によって生成されたオブジェクトである.jQuery.prototypeにいくつかの関数セットを追加したオブジェクトには意味がないことがわかる.new jQuery()は可能であるため、ただし、生成されたjQueryオブジェクトはreturn時に破棄されます.だからnew jQuery()でjQueryオブジェクトを構築しないほうがいいです.jQueryオブジェクトは実はnew jQuery.fn.init.ではjQuery.fn.init.prototypeにはjQueryオブジェクトが掛けてある操作方法です.のように
jQueryjQuery.fn.init.prototype = jQuery.fn;
時間があれば589行でjQueryを実現するのではないかと心配するかもしれません.fnの関数はjQueryに置く.fn.init.prototypeが上がって、その後はjQuery.を通ります.fn.extendの方法はどうしますか?ここは実際にjQuery.fnの参照.jQueryを拡張するときは、関連する関数extendをjQueryにfnでいいです.jQueryを見てみましょうfn.Initはどのようにして仕事を完成しましたか.
一部の開発者はjQueryを使用する場合、jQueryドキュメントの使用方法しか知らないため、jQueryの動作原理が分からず、多くの問題に直面することがあります.これらの問題の大部分は不適切な使用によって生じ,ごく少数はjQueryのBugである.その動作メカニズムやコアソースがわからなければ、jQueryクラスライブラリベースの高性能なプログラムを書くのも難しい.
jQueryベースのプログラムをデバッグする場合、ほとんどの時間はjQueryオブジェクトに入ってその実行状態を分析することを追跡しますが、jQueryコードはExt、YUIのように中規中挙ではなく、そのコードは少し難解で、分かりにくいです.つまりjQueryをうまく使いたければ、必ずソースコードをはっきりさせなければならないということです.
jQueryのデザインコンセプト
jQueryを使用する前に、jQueryは何ですか?jQueryはクラスライブラリであり,prototype,mootoolsなどのクラスライブラリと同様にWebのJavaScript開発に補助機能を提供する.では、なぜjQueryを選んだのでしょうか.jQueryが登場する以前はPrototype,YUIともに成熟したJsのフレームワークであり,それぞれ特徴があった.なぜそれらを捨てて、後発のショーを使うjQueryは、開発者を引き付ける優れた特性を持っているのだろうか.
この質問に答えるには、jQueryの設計理念を理解しなければなりません.Web開発でJavaScriptをどのように使用しているかを思い出したり想像したりします.ほとんどの時間はgetElementByIdを用いてDomドキュメントにDOM要素を見つけ、値や設定値をとり、innerHTMLを用いてその内容を取ったり設定したり、clickなどのイベントの傍受をしたりしています.制御スタイルの面ではheight,width,displayなどの変更を行い、視覚的な効果を達成します.Ajax側では、データを取り出してページのある要素に内容を追加します.
総合的に、DOM要素を操作しています.この要素は1つ以上かもしれません.この要素はDocument、WindowまたはDOM要素かもしれません.このように私たちの任務は2つの大部分で、1つはDOM要素を探して、2つはDOM要素を操作します.
使いこなすにはgetElementByIdのような直接的な検索方式を採用してもElementのようなものを採用してもよい.LastChildのような間接的な検索方式は難しくなく、DOM要素に対してもDOMの操作面が豊富で、使いにくいわけではありませんか?では、クラスライブラリは何に使いますか?最も難しい問題はブラウザの互換性の問題です.すべてのJavaScriptフレームワークはこの問題を解決し、JavaScript自体が持つ操作を簡素化しなければならない.
PrototypeはJsクラスライブラリを創始した先河と言っていいほど、私たちに新しい感じを与えてくれます.ほとんどのブラウザの互換性の問題を解決します.同時に元の関数名が長くて記憶しにくいよく書かれた間違いの問題(getElementByIdの代わりに$(xx)を採用)を簡略化し、Ajaxのアクセス方式を提供し、Array、Object、Function、EventなどのJavaScriptオリジナルオブジェクトを拡張した.
しかし、これらは開発のニーズを満たすことができません.例えば、DOMツリーの中でDOM要素を探すのは、要素のIDを通過するだけです.しかし、私たちはもっと便利な検索方法を望んでいます.同時に、あまり広くなく、曲線を勉強しすぎたり、使いにくい統一的な入り口を望んでいます.
jQueryはここから出発して、すべてをjQueryオブジェクトに統一します.jQueryを使用することは、jQueryオブジェクトを使用することです.実はjQueryの創始的な仕事はその名前のようにqueryです.強力な検索機能により、すべてのフレームワークが暗くなります.jQueryは実質的にクエリーです.検索された要素をクエリーベースで操作する機能も提供されます.このようにjQueryはクエリと操作の統一である.クエリーはエントリで、操作は結果です.
jQueryは実装上も2つの大部分に分けることができ、一部はjQueryの静的方法であり、実用的な方法やツール方法とも呼ばれ、jQuery.xxx()のjQueryネーミングスペースは直接参照します.第2の部分はjQueryのインスタンスメソッドであり、jQuery(xx)または$(xx)によってjQueryインスタンスを生成し、このインスタンスによって参照するメソッドである.この部分の方法の多くは,静的メソッドエージェントを用いて機能を完了することから行われる.真の機能的な動作はjQueryの静的方法で実現される.これらの機能は細分化され、以下の部分に分けることができます.
1、Selector、要素を検索します.このルックアップには、CSS 1~CSS 3に基づくCSS Selector機能だけでなく、直接ルックアップまたは間接ルックアップに拡張された機能も含まれる.
2、Dom要素の属性操作.Dom要素はhtmlのラベルと見なすことができ,属性に対する操作はラベルの属性に対する操作である.このプロパティ操作には、追加、変更、削除、値の取得などが含まれます.
3、Dom要素のCSSスタイルの操作.CSSは、ページの表示を制御する効果です.CSSの操作には、高さ、幅、ディスプレイなど、よく使われるCSSの機能が含まれなければなりません.
4、Ajaxの操作.Ajaxの機能は,非同期でサーバからデータを取り出して関連操作を行うことである.
5、Eventの操作.Eventの互換性を統一的に処理しました.
6、アニメーション(Fx)の操作.CSSスタイル上の拡張と見なすことができます.
jQueryオブジェクトの構築
jQueryオブジェクトを生成または構築することは、クエリーを構築して実行することです.クエリーである以上、必ず検索される結果です.(DOM要素)では、後でこれらの結果を操作することができます.では、これらの検索結果はどこに保存されますか?最良の場所はもちろんこのjQueryオブジェクトの内面です.検索結果は1つの要素である可能性があり、複数の要素(NodeSetの集合の形式)である可能性があります.すなわちjQueryオブジェクトの内面に集合がある.このコレクションはDOM要素を検索するために保存されます.
しかし、前節で述べたjQueryオブジェクトは、すべての操作の統一的なエントリであり、DOMドキュメントからDOM要素を検索するだけでなく、別の集合から転送されたDom要素、HTMLの文字列から生成されたDOM要素に限定されるものではありません.
jQueryドキュメントには、jQuery(expression,[context])、jQuery(html)、jQuery(elements)、jQuery(callback)の4つの方法が用意されています.このうちjQueryは$で代用できます.この4種類はよく使われます.実はjQueryのパラメータはどんな要素でもjQueryオブジェクトを構成することができます.
いくつかの例を挙げます.
1,$($(「P」)は、そのパラメータがjQueryオブジェクトまたはArrayLikeの集合であることを示す.
2、$()は$(document)の略です.
3,$(3)はjQueryオブジェクトの集合に3を配置する.
$(3)のような要素(ArrayLikeの集合のような要素)がDOM要素ではない場合は、jQueryオブジェクトを構築しないほうがよい.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()によってそのprototypeを継承する方法ではない.jQueryオブジェクトは実際にjQuery.fn.init関数によって生成されたオブジェクトである.jQuery.prototypeにいくつかの関数セットを追加したオブジェクトには意味がないことがわかる.new jQuery()は可能であるため、ただし、生成されたjQueryオブジェクトはreturn時に破棄されます.だからnew jQuery()でjQueryオブジェクトを構築しないほうがいいです.jQueryオブジェクトは実はnew jQuery.fn.init.ではjQuery.fn.init.prototypeにはjQueryオブジェクトが掛けてある操作方法です.のように
jQueryjQuery.fn.init.prototype = jQuery.fn;
時間があれば589行でjQueryを実現するのではないかと心配するかもしれません.fnの関数はjQueryに置く.fn.init.prototypeが上がって、その後はjQuery.を通ります.fn.extendの方法はどうしますか?ここは実際にjQuery.fnの参照.jQueryを拡張するときは、関連する関数extendをjQueryにfnでいいです.jQueryを見てみましょうfn.Initはどのようにして仕事を完成しましたか.
init : function(selector, context) {
selectorselector = selector || document;// selector
// Handle $(DOMElement) Dom ，
if (selector.nodeType) {
this[0] = selector;
this.length = 1;
return this;
}
if (typeof selector == "string") {//selector string
var match = quickExpr.exec(selector);
if (match && (match[1] || !context)) {
if (match[1])// $(html) -> $(array)
selector = jQuery.clean([match[1]], context);
else {// ：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 = [];
}
} else
// ： $(expr, [context])==$(content).find(expr)
return jQuery(context).find(selector);
} else if (jQuery.isFunction(selector)) // ： $(function) Shortcut for document ready
return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector);
// ： $(elements)
return this.setArray(jQuery.makeArray(selector));
}