jQuery について知っておくべきことは何ですか?

最近、jQuery のソース コードを見てみたいと思い、このブログ「jQuery ソース コードから学んだ 10 のこと」を見つけました

この記事はこのビデオ ブログに基づいており、いくつかの内容を改良して皆さんと共有します。

注:
この記事は 2010 年に書かれました。著者はビデオ内で言及された内容に基づいて、現在のバージョン 1.11 に対応するいくつかの調整を加えました。また、一部は放棄されました。削除されたコンテンツ ページは削除されました。元の作成者に感謝します

ブラック ボックス/ブラック ボックス

ブラック ボックス システムの概念は、入力が与えられた場合に出力を返すシステムであり、ブラック ボックスは実装プロセス。ここで言うjQueryブラックボックスは、jsグローバル変数ウィンドウにjQueryと$を出力するもので、処理はブラックボックス内にカプセル化されており外界と干渉しません。

jQuery バージョン 1.4 のブラック ボックスは、次のような自己実行関数を使用します

(function( window, undefined){})(window)

著者は、ブラック ボックスを実装するためのより一般的な方法を提供しました

undefined = true;
(function(window, document, undefined){    
    if(foo == undefined) {
        }
})(this, document)

jQuery のブラック ボックスには、unknown と呼ばれる 3 番目の仮パラメータがあります、そして、実パラメータを渡すとき、jsで値が渡されていない仮パラメータは値が渡されず、ブラックボックス内の未定義の正確性が保証されます。 js では、未定義にグローバル プロパティ として値を割り当てることができます (例: 上記のコードの unknown = true

) 自己実行関数モードでブラック ボックスを実装するもう 1 つの利点は、圧縮が容易になることです。次のような状況では、ブラック ボックス内の単純な変数を使用するだけで済みます。

(function(A, B, C)){
    B.getElementById('')
})(this, document)

著者は、次のような、ページの特定の部分を継続的に更新 (継続的に実行) する匿名関数の自己実行の例を多数挙げました

(function loop(){
    doStuff();
    $('#update').load('awesomething.php',function(){
        loop();
    })
    //setTimeout(loop, 100)
})()

jQuery 1.11 バージョンのブラック ボックスは、新しいファクトリーメソッド、この記事では

noConflict の実装については説明しません

この関数には大きな違いはありません 1.11 バージョンのコードは次のとおりです

var
    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,
    // Map over the $ in case of overwrite
    _$ = window.$;
jQuery.noConflict = function( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }
    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }
    return jQuery;
};

競合防止の実装は以前のメソッドを保存することであることがわかります。最初に JQuery と $ を呼び出し、次に noConflict が呼び出されたときに、それらに

ネイティブ js 属性の名前付けによる変換を与えます

1.4 バージョンでは、props オブジェクトを使用して、jquery の属性操作とネイティブ js 属性操作
の間の対応関係を保存します

縮小バージョンバージョン1.11のバージョンはこんな感じです

jQuery.extend({
    propFix: {
        "for": "htmlFor",
        "class": "className"
    },
    prop: function( elem, name, value ) {
        //...
        name = jQuery.propFix[ name ] || name;
    },
    propHooks: {
        //...
    }
});
jQuery.each([
    "tabIndex",
    "readOnly",
    "maxLength",
    "cellSpacing",
    "cellPadding",
    "rowSpan",
    "colSpan",
    "useMap",
    "frameBorder",
    "contentEditable"
], function() {
    jQuery.propFix[ this.toLowerCase() ] = this;
});

propFix this オブジェクトには、クラスからclassNameへの変換など、対応する関係テーブルが格納されており、prop関数はこの関係テーブルの処理を担当します。 以下のそれぞれは非常に興味深いものです。配列内のプロパティを走査

し、その小文字形式をそれ自体にマップし、propFix に入れます

特殊効果の速度

jQuery の一部のアニメーションでは、直接次のことができることがわかっています。通常、高速、低速を使用してください。 実装速度を定義するには、ソースコードで次のように定義します

jQuery.fx.speeds = {
    slow: 600,
    fast: 200,
    // Default speed
    _default: 400
};

いたずらな原作者は次のことを行いました:

var isIE 
//...
jQuery.fx.speeds._default = isIE ? 800 : 400
jQuery.fx.speeds.veryfast = 200;
$('...').fadeIn('veryfast')

1つは、デフォルト属性に対して条件判断

を行うことです。 "veryfast" などのカスタム速度もあります

.ready

ready 関数 バージョン 1.11 とバージョン 1.4 の間には大きな違いがあります。新しいバージョンでは理解できないことが多くあります。簡単にコアを取り出してみましょう。互換性の理由から見てください

jQuery.ready.promise = function( obj ) {    //...省略若干        } else if ( document.addEventListener ) {            // 使用addEventListener "DOMContentLoaded" 监听ready事件            document.addEventListener( "DOMContentLoaded", completed, false );            // 备选方案 "load"            window.addEventListener( "load", completed, false );        //如果IE        } else {            // Ensure firing before onload, maybe late but safe also for iframes                        //IE下 attachEvent 的"onreadystatechange"            document.attachEvent( "onreadystatechange", completed );            // A fallback to window.onload, that will always work                        //备选方案onload            window.attachEvent( "onload", completed );            // If IE and not a frame            // continually check to see if the document is ready            var top = false;            try {                top = window.frameElement == null && document.documentElement;            } catch(e) {}            if ( top && top.doScroll ) {                (function doScrollCheck() {                    if ( !jQuery.isReady ) {                        try {                            // Use the trick by Diego Perini                            // http://javascript.nwbox.com/IEContentLoaded/                            top.doScroll("left");                        } catch(e) {                            return setTimeout( doScrollCheck, 50 );                        }                        // detach all dom ready events                        detach();                        // and execute any waiting functions                        jQuery.ready();                    }                })();            }        }    }    return readyList.promise( obj );};
.ready 利用了下面的.promise去做确保载入完成的工作，重点是document.addEventListener( "DOMContentLoaded", completed, false );window.addEventListener( "load", completed, false );document.attachEvent( "onreadystatechange", completed );window.attachEvent( "onload", completed );

4 つのチェック方法

上から始めると、IE で dom ノードがスクロールがあるかどうかを判断します。スクロールしないと準備完了に影響が出ます。簡単に言うと、jQuery は Diego Perini と呼ばれる技術を使用しています。コメント内のアドレスで詳細を確認できます。

Selector

$('#id').find('tag.thing') --- 高速

$('#id tag.thing') ------- sizzle を使用します

元の作成者は、ここで jquery の効率の問題について言及しました。上記のメソッドは高速ですが、次のメソッドはわずかに遅いです。簡単に言うと、次のメソッドは sizzle を呼び出し、sizzle を通じて実際に上記のモードと ID に変換されるためです。呼び出しは jQuery.init を通じて直接行われます

これを拡張する必要があります。1.11 で jQuery オブジェクトがどのように見えるかを見てみましょう

jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        // Need init if jQuery is called (just allow error to be thrown if not included)
        return new jQuery.fn.init( selector, context );
}

jQuery オブジェクトは実際には init と呼ばれる独自の コンストラクター

を返します。 init の動作を見てみましょう

// Initialize a jQuery object
    init = jQuery.fn.init = function( selector, context ) {
        var match, elem;
        // HANDLE: $(""), $(null), $(undefined), $(false)
            //超级省略...下略
        // Handle HTML strings
        // HANDLE: $(html) -> $(array)
        // HANDLE: $(html, props)
        // HANDLE: $(#id)
        // HANDLE: $(expr, $(...))
        // HANDLE: $(expr, context)
        // HANDLE: $(DOMElement)
        // HANDLE: $(function)
        return jQuery.makeArray( selector, this );
    };
// Give the init function the jQuery prototype for later instantiation
init.prototype = jQuery.fn;

上記で抽出したコード コメントから、HTML タグ名と ID の取得を含め、JQ 独自のコンストラクターでどのような状況が処理されるかがわかります。つまり、これら 2 つの取得は最低レベルです。さらに、$() の他の処理は他の関数を経由する必要があるため、上記の処理ほど効率的ではありません。

同時に、init のプロトタイプが jQuery.fn に割り当てられていることもわかります。興味のある方は、jQuery オブジェクトについて詳しく学ぶことができます。

jQ のステータス セレクター (:not、:has、:eq など) は

Sizzle.selectors.pseudos🎜 に保存されます

以上がjQuery について知っておくべきことは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。