jQueryのソースコード解析-03 jQueryオブジェクトの構築-ソースコードの構造とコア機能_jquery

著者: nuysoft/Gao Yun QQ: 47214707 メール: nuysoft@gmail.com
結局のところ、私は同時に読み書きをしているので、間違っている場合は教えてください。そうすれば、より多くのコミュニケーションが図れ、一緒に進歩することができます。この章はまだ完了していません。完了したら PDF が送信されます。
はじめに:
体系的に書きたいのですが、まずは興味深い部分から始めます。
最近、読者が PDF を Baidu Wenku にアップロードしました。まず、転載して拡散していただきありがとうございます。ただし、それをダウンロードするために高い富の値を設定するのは良くありません。将来的にはWenkuにアップロードしてください。ご配慮ください。
3. jQuery オブジェクトの構築
3.1 ソース コードの構造
最初に全体の構造を見てから、分解してみましょう:

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

(function( window, unknown ) {
var jQuery = (function() {
// jQuery を構築しますobject
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}
// jQuery オブジェクト プロトタイプ
jQuery.fn = jQuery.prototype = {
コンストラクター: jQuery,
init: function( selector, context, rootjQuery ) {
// セレクターには次の 7 つの分岐があります:
// DOM 要素
// 本体 (最適化)
// 文字列: HTML タグ、HTML 文字列、#id、セレクター式
// 関数 (準備ができたコールバック関数として)
// 最後に疑似配列を返します
}
};
// 後でインスタンス化するために init 関数に jQuery プロトタイプを与えます
jQuery.fn.init.prototype = jQuery.fn>// コンテンツを最初のパラメーターにマージします。後続の関数はこの関数拡張を通過します
// jQuery.fn.extend によって拡張された関数のほとんどは、jQuery.extend によって拡張された同じ名前の関数を呼び出します
jQuery.extend = jQuery.fn.extend = function() {};
// jQuery の静的メソッドを拡張します
jQuery.extend({
// 準備完了のbindReady
// isPlainObject isEmptyObject
// parseJSON parseXML
// globalEval
// 各 makeArray inArray マージ grep マップ
// プロキシ
// アクセス
// uaMatch
// サブ
// ブラウザ
}); >// ここで、jQuery オブジェクトの構築が完了しました。次のコードはすべて jQuery または jQuery オブジェクトの拡張です。
return
})();
window.jQuery = window.$ = jQuery ;
})(window );


l jQuery オブジェクトは新しい jQuery を通じて作成されるのではなく、新しい jQuery.fn.init

を通じて作成されます。 コードをコピー コードは次のとおりです:

var jQuery = function( selector, context ) {

return new jQuery.fn.init( selector, context, rootjQuery );
}


n jQuery オブジェクトは jQuery.fn.init オブジェクトです

n new jQeury() が実行されると、生成される jQuery オブジェクトは次のようになります。破棄され、最終的に jQuery.fn.init オブジェクトが返されるため、新しいキーワード
l を使用する必要はありません。を実行し、jQuery.fn.init.prototype = jQuery.fn を実行します。マージされたコードは次のとおりです:
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype
すべてのメソッドは jQuery にマウントされます。 fn は jQuery.prototype にマウントされること、つまり jQuery 関数にマウントされることと同等ですが (最初は jQuery = function(selector, context))、最終的には jQuery.fn.init.prototype にマウントされることと同等になります。これは、最初に jQuery 関数によって返されたオブジェクトにマウントすること、つまり、jQuery オブジェクトで最終的に使用するオブジェクトにマウントすることと同等です。
このプロセスは非常に複雑で、金と翡翠は途中で「失われます」。
3.2 jQuery.fn.init
jQuery.fn.init の機能は、受信したセレクター パラメーターを分析し、さまざまな処理を実行して、jQuery オブジェクトを生成することです。
タイプ (セレクター)
処理メソッド
DOM 要素
は jQuery オブジェクトにパッケージ化され、直接
body (最適化) を返します
document.body から
の個々の HTML タグを読み取ります
document.createElement
HTML string
document.createDocumentFragment
#id
document.getElementById
セレクター式
$(…).find
Function
Register dom 準備コールバック関数へ
3.3 jQuery.extend = jQuery.fn.extend

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

// 2 つ以上のオブジェクトのプロパティを最初のオブジェクトにマージします。jQuery の後続の関数のほとんどは、この関数を通じて拡張されます。
// 関数は jQuery.fn.extend を通じて拡張されます。 jQuery.extend で拡張された同名の関数を呼び出す
// 2 つ以上のオブジェクトが渡された場合、すべてのオブジェクトのプロパティが最初のオブジェクトのターゲットに追加されます
// 1 つだけ渡された場合オブジェクトの場合、オブジェクトのプロパティを jQuery オブジェクトに追加します。
// このようにして、jQuery 名前空間に新しいメソッドを追加できます。 jQuery プラグインの作成に使用できます。
// 渡されたオブジェクトを変更したくない場合は、空のオブジェクトを渡すことができます: $.extend({}, object1, object2);
// デフォルトのマージ操作は反復的ではありません。ターゲットのいずれかが属性である場合でも、属性がオブジェクトまたは属性の場合、マージされずに完全に上書きされます
// 最初のパラメータが true の場合、反復的にマージされます
// オブジェクトから継承された属性プロトタイプはコピーされます
// 未定義の値はコピーされません
// パフォーマンス上の理由から、JavaScript の組み込み型プロパティはマージされません
// jQuery.extend( target, [ object1 ] , [ objectN ] )
// jQuery.extend ( [ deep ], target, object1, [ objectN ] )
jQuery.extend = jQuery.fn.extend = function() {
var options, name 、src、コピー、copyIsArray、クローン、
target = argument[0] || {}、
i = 1、
length = argument.length、
deep = false; / ディープ コピー状況を処理します
// 1 つのパラメーターがブール型の場合、おそらくディープ コピー
if ( typeof target === "boolean" ) {
deep = target = argument[1] || {};
// ブール値とターゲットをスキップします
// 3 番目から開始してブール値とターゲットをスキップします
i = 2; // ターゲットが文字列または何かである場合の処理​​ (ディープ コピーで可能)
// ターゲットがオブジェクトでも関数でもない場合、強制的に空のオブジェクトになります
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
// 引数が 1 つだけ渡された場合は jQuery 自体を拡張
// 引数が 1 つだけ渡された場合、これは jQuery の拡張であると考えられます
if ( length === i ) {
target = this;
}
for ( ; i // 非 null/未定義値のみを処理します
// 非 null パラメータのみを処理します
if ( (options = argument[ i ]) != null ) {
// 基本オブジェクトを拡張します
for ( name in options ) {
src = target[ name ];
copy = options[ name ]; // 終わりのないループを防止します
// 循環参照を避ける
if ( target === copy ) {
Continue;
}
// プレーンオブジェクトまたは配列をマージする場合は再帰
// ディープコピーと値が純粋なオブジェクトまたは配列の場合、再帰
if ( deep && copy && ( jQuery.isPlainObject( copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
// copy が配列
if ( copyIsArray ) {
copyIsArray = false;
// クローンは src です
clone = src && jQuery.isArray(src) : []; / コピーがオブジェクトの場合
} else {
// clone は src の修正値
clone = src && jQuery.isPlainObject(src) : {}; >// 元のオブジェクトは決して移動せず、クローンを作成してください
// jQuery.extend を再帰的に呼び出します
target[ name ] = jQuery.extend( deep, clone, copy )
// 未定義を持ち込まないでください値
// 空の値はコピーできません
} else if ( copy !== unknown ) {
target[ name ] = copy;
}
}
}
}
// 変更されたオブジェクトを返します
// 変更されたオブジェクトを返します
return target;


続きます
;