最近、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 属性操作
の間の対応関係を保存します
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; });
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')
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 );
$('#id').find('tag.thing') --- 高速
$('#id tag.thing') ------- sizzle を使用します
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 ); }
// 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;
jQ のステータス セレクター (:not、:has、:eq など) は
以上がjQuery について知っておくべきことは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。