jqueryのコア機能の詳細な分析

コア関数には以下が含まれます:

jquery の定義方法、呼び出し方法、拡張方法。コア メソッドの実装方法をマスターすることが、jQuery ソース コードを理解する鍵となります。ここですべてが突然明らかになりました。

1、定義方法、つまり入り口

// jQueryのローカルコピーを定義する

var jQuery = function( selector, context ) {

// jQueryオブジェクトは実際には単なるinitコンストラクターです '強化された'

Return new jQuery.fn.init(selector, context, rootjQuery);//jQuery オブジェクトは、jQuery のプロトタイプである jQuery.prototype.init の constructor強化版です

}

2 、および jQuery.fn の関係。 .init

//オブジェクト メソッドを定義します。つまり、$("xx") を通じてのみ呼び出すことができます。

jQuery.fn = jQuery.prototype = {

init:function( selector, context, rootjQuery ) {

return jQuery.makeArray( selector, this );

}

他にもたくさんの プロパティとメソッドがあります ,

プロパティは: jquery、constructor、selector、length

メソッドは: toArray、get、pushStack、each、ready、slice、first、last、eq、map、end、push、sort、splice

…

}

//後のインスタンス化のために init 関数に jQuery プロトタイプを与えます

jQuery.fn.init.prototype = jQuery .fn;

つまり、$("xx") にはインスタンス メソッドがあり、呼び出すことができます。 (jQuery.prototype で定義されたメソッドの呼び出し)

なぜ jQuery は jQuery.fn.init オブジェクトを返すのですか?

jQuery = function( selector, context ) {

// jQuery オブジェクトは実際には単なる init コンストラクターです。 '

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

}

jQuery.fn = jQuery.prototype = {

…

}

jQuery.fn.init.prototype = jQuery. fn;

stackoverflow で同様の質問を見つけてください:

http://stackoverflow.com/questions/4754560/help- Understanding-jquerys-jquery-fn-init-why-is-init-in-fn

これも

http://stackoverflow.com/questions/1856890/why-does-jquery-use-new-jquery-fn-init-for-creating-jquery-object-but-i-can/1858537#1858537

私は信じていますコードはこの方法で記述されているため、新しい jQuery オブジェクトをインスタンス化するたびに new キーワードが必要なくなり、オブジェクト構築の背後にあるロジックをプロトタイプに委任することができます。前者は、ライブラリを使いやすくするためのものだと思います。後者は、初期化ロジックを 1 か所にきれいに保持し、渡された引数に正しく一致するオブジェクトを構築して返すために init を再帰的に呼び出すことを可能にします

3、拡張オブジェクト メソッドと静的メソッドの原則を拡張します

jQuery .extend = jQuery.fn.extend = function() {

var target = argument[0] || {};

return target;

}

$.extend にほかならない extend を使うと便利です({ }); と $.fn.extend({}); fn を見たときに jQuery.prototype を理解して考えることができれば幸いです。

このスコープをもう一度見てみましょう:

$.extend ->this is $-> this.aa()

$.fn.extend->this is $.fn-> )

拡張実装の詳細を添付:

使用シナリオ:

1、パラメーターを 1 つだけ使用して一部の関数

を拡張します。例: $.extend({f1:function(){},f2:function(){},f3:function(){}})

2、複数のオブジェクトを最初のオブジェクトにマージします

(1) 浅いcopy の場合、最初のパラメータはターゲット オブジェクトです。たとえば

var a = {name:”hello”}

var b = {age:30}

$.extend(a,b);//a={name:”hello”,age:30}

(2) ディープコピー。最初のパラメータは TRUE で、2 番目のパラメータはターゲット オブジェクトです。たとえば、

var a = {name:{job:”it”}};

var b = {name:{age: 30 }};

//$.extend(a,b);

$ . extend(true,a,b);

console.log(a);

jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    // 是不是深复制  Handle a deep copy situation
    if ( typeof target === "boolean" ) {
        deep = target;
        target = arguments[1] || {};
        // skip the boolean and the target
        i = 2;
    }

    // 不是对象类型  Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
        target = {};
    }

    // 扩展插件的情况  extend jQuery itself if only one argument is passed
    if ( length === i ) {//$.extend({f1:function(){},f2:function(){},f3:function(){}})
        target = this;//this是$,或是$.fn
        --i;
    }

    for ( ; i < length; i++ ) {//可能有多个对象扩展到第一个对象上
        // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) {//options是一个对象
            // Extend the base object
            for ( name in options ) {
                src = target[ name ];  //src是target里已经存在的value（也可能不存在）
                copy = options[ name ];//copy是待合入的一个value

                // 防止循环引用  Prevent never-ending loop
                if ( target === copy ) {//例如：var a={};$.extend(a,{name:a});//可能导致循环引用
                    continue;
                }

                // if是深复制else是浅复制  Recurse if we're merging plain objects or arrays
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }

                    // 亮了，直至剥离至最深一层非对象类型，而且是逐个。Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don't bring in undefined values
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;//target[ name ] = options[ name ];
                }
            }
        }
    }

    // Return the modified object
    return target;
};

jQuery.extend({…}) 分析

書き方を見てみよう

jQuery.extend({

prop : ””

method:function(){}

});

これらのメソッドは jQuery の静的プロパティおよびメソッド (つまり、ツール メソッド) であることがわかります。将来的には、それらを直接提供できるようになります。ユーザー向け、または内部使用向け。

特定の実装されたツールの属性とメソッドは (内部的に使用されるものもマークされています)

jquery.extend（{

待機：内部）を待つファイルの数のカウンター（内部）holdready（）}}}。
タイプ（）
Exceptionshrown : コレクションを走査します

Trim() : 先頭と末尾のスペースを削除します

makeArray() : クラス配列を実数配列に変換します

inArray() : 番号グループのバージョン IndexOf
これを

access( を指すように変更します) ) : 多機能値操作 (内部)

now() : 現在時刻

swap() : CSS スワップ (内部)

});

jQuery.ready.promise = function(){}; の非同期操作を監視します。 DOM (内部)
function isArraylike(){} 配列状の判定（内部）

以上がjqueryのコア機能の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。