jQueryの仕組み：ソースコードを調べる

jQueryは、明らかにWeb乙女業界の標準になっています 。 注目に値する多くの優れたjsフレームワークがありますが、jQueryはその軽さ、優雅さ、そして魔法で誰もが感銘を受けました。 jQueryを使用して作成する人、jQueryのプラグインを作成する人、jQueryについての記事を作成する人もいますが、jQueryの仕組みを（特に初心者から）知っている人はほとんどいません。

この記事では、このフレームワークの内部を少し調べて、内部の内容を分析します。
この記事は、Javascriptの基本的な知識のために設計されています。 それについて考えてください。jQueryクローンの作成方法を知っていれば、おそらくここで新しいものを見つけることはできません。 残りの部分-キャットへようこそ

一般的な情報

jQueryはJavascriptライブラリです。


公式Webサイトは、 John Resig（別名jeresig ）によるjquery.com で、Mozilla Corporationの有名な第一人者であり、 元Javascriptエバンジェリストです。 彼は彼自身のブログ-ejohn.orgを持っています 。そこでは、たくさんのクールな記事とCanvasで作業するための記事-processing.jsだけでなく、「JavaScript。 プロのプログラミング技術。 RIT 殿堂入り

メインのjQueryリポジトリはGitHubにあり、ソースコード、ユニットテスト、コレクター、js-lintチェッカーなどがあります。

この時点で、GitHubに注意を払い、注意を払います。 膨大な数のOpenSource Javascriptライブラリ-prototype.js 、 MooTools 、 node.js 、 jQuery 、 Raphael 、 LibCanvas 、 YUIだけでなく、Javascript（Javascriptだけでなく）コミュニティの大部分がそこに避難所を見つけました。 GitHubは最高の場所です。

/ srcディレクトリには、多くのファイルに分割されたソースファイルが含まれています。 code.jquery.com/jquery-*.jsファイルを見て、混乱しないことを恐れた場合、すべてが構造化されており、それほどひどくないことを知っておく必要があります。 node.jsのビルダーを使用して収集されます。 その中で、ソースの文字列「@VERSION」と「@DATE」は、対応する値に置き換えられます。

ソースコードに深く入ります

コーディングスタイルは非常に親しみやすく、普通のものです。 私はあなたを喜ばせるか失望させます。 タブとエジプトのブラケットが使用されます。 ＃インデントのみがはじかれ、位置合わせはどこでも使用されません。

intro.jsとoutro.jsの 2つのファイルがあり、それぞれ収集されたソースの最初と最後に置かれます。

(function( window, undefined ) { var document = window.document, navigator = window.navigator, location = window.location; [...] //    window.jQuery = window.$ = jQuery; })(window); 

コア

私たちにとって重要なのは、すべての「肉」を含むcore.jsファイルです。

ソースコードは次のようになります。 コードによって別のレベルのネストが削除され、変数のスコープの制御が容易になることがわかります。

 var jQuery = (function () { var jQuery = function ( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }; // Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ in case of overwrite _$ = window.$, // A central reference to the root jQuery(document) rootjQuery, [...] rootjQuery = jQuery(document); [...] return jQuery; })(); 

コピーされたセクションでは、jQueryオブジェクトのコンストラクター、保存されたjQueryおよび$の現在の値（ jQuery.noConflict()を実装するために後で必要になります）、およびドキュメントへのリンクを持つjQueryオブジェクト（多くの場合キャッシュ$(document)が見つかり$(document) 、最適化）

少し下にあるのは、jQuery.browser、jQuery.trim、json解析などを実装するために必要な一連のRegExpです。 jQueryはそれらへのリンクを保持し、 jQuery.trimおよびjQuery.inArrayでネイティブ実装を使用するため、最新のブラウザーは''.trimおよび[].indexOfをjQuery.inArrayます。

 trim = String.prototype.trim, indexOf = Array.prototype.indexOf, 

オブジェクト構築

「聖人」jQuery-$-関数に近づいています。 この部分は、不慣れな人にとって最も難しい部分です。したがって、私たちは新鮮な頭でそれに取り組みます。）jQueryプロトタイプの魔法はここに隠されています。 このように機能する理由については詳しく説明しません。

上記のjQueryコンストラクターコードは既に見ました。

 var jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); }, 

つまり、jQuery関数を呼び出すと、エンティティ「 jQuery.fn.init 」が作成されて返されます。 この場所はJavascriptマジックを使用しています。 コードを少し下にすると、おおよそ次のことがわかります。

 jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) { [...] } [...] } // Give the init function the jQuery prototype for later instantiation jQuery.fn.init.prototype = jQuery.fn; 

これからは、 jQuery.fnがjQueryプロトタイプにすぎないことを知っています。この知識は、以下を理解するのに役立ちます。 また、 jQuery.fn.init.prototypeはjQueryプロトタイプを指し、 jQuery.fn.init.prototypeコンストラクターはjQuery指します。 このアプローチにより、非常に興味深い結果が得られます。 jQuery、Chromeコンソールを開き、次を入力します。

 $(document) instanceof jQuery; // true $(document) instanceof jQuery.fn.init; // true 

この動作の本質を理解できるように、別の例を示します。

 var Init = function () { console.log('[Init]'); }; var jQuery = function () { console.log('[jQuery]'); return new Init(); }; Init.prototype = jQuery.prototype = { constructor: jQuery }; var $elem = jQuery(); // [jQuery] , [Init] console.log( $elem instanceof jQuery ); // true console.log( $elem instanceof Init ); // true 

したがって、すべての構築はjQuery.fn.initオブジェクトjQuery.fn.initにあり、 jQueryはjQuery.fn.initオブジェクトjQuery.fn.init

Parsimの引数

jQuery関数を使用するための多くのオプションがあります。

 $(function () { alert('READY!') }); // ,      DOM $(document.getElementById('test')); //    $('<div />'); //    $('<div />', { title: 'test' }); //      //       css-: $('#element'); //    "element" $('.element', $previous ); //      element  $previous $("div[name=city]:visible:has(p)"); //  ,     

セレクターの詳細な説明については、 AntonShevchukの記事「 初心者向けjQuery。パート4.セレクター 」を参照してください。

jQuery.fn.initを既に知っているように、コンストラクターにjQuery.fn.initます。 ここで擬似コードを提供します。

 init: function( selector, context, rootjQuery ) { if ( !selector ) return this; // Handle $(DOMElement) if ( selector.nodeType ) return this = selector; // The body element only exists once, optimize finding it if ( selector === "body" && !context ) return this = document.body; if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } // Handle HTML strings if ( typeof selector === "string" ) { // Verify a match, and that no context was specified for #id if ( selector.match(quickExpr) ) { if ( match[1] ) { return createNewDomElement( match[1] ); } else { return getById( match[2] ) } } else { return jQuery( context ).find( selector ); } } }, 

最初の4つの部分は非常に理解しやすいものです。空のセレクター、セレクターとしてのDOM要素、または文字列「body」を渡した場合の処理​​ケースです。

文字列を渡す場合の興味深い点。 まず、「高速正規表現」で解析します。 その中で、左側の部分は行内のタグを見つける役割を果たし、2番目の部分は要素のIDによる検索を行います。
quickExpr = /^(?: [^<]*(<[\w\W]+>)[^>]*$ | #([\w\-]*)$ )/;

そして、リクエストがより複雑な場合にのみ、現在のコンテキストでfindメソッドが呼び出され、検索エンジン（同じくJResigがスポンサー） Sizzle （権利はThe Dojo Foundationに属します）を使用して要素を検索します。

プラグイン開発

多くのJavascriptの専門家は、プロトタイプクラスを非常に簡単に拡張できることを知っています。

 var MyClass = function () { // constructor }; MyClass.prototype = { // prototype }; var instance = new MyClass(); //            ,    MyClass.prototype.plugin = function () { console.log("He's alive!"); }; instance.plugin(); // He's alive! 

同様に、標準のjQueryプロトタイプを拡張できます。

 jQuery.prototype.plugin = function () { // Here is my plugin }; 

ただし、前述したように、 fnはjQuery.prototypeへの短いリンクであるため、より短く書くことができます。

 jQuery.fn.plugin = function () { // Here is my plugin // this    jquery-,     }; 

そして、このプラグインは、すでに作成されているすべてのエンティティと作成されたエンティティに表示されます。 オブジェクトにプロパティを直接追加することにより、静的プロパティを実装します。

 jQuery.plugin = function () { // Here is my plugin }; 

したがって、小さなプラグインに最適なテンプレート：

 new function (document, $, undefined) { var privateMethod = function () { // private method, used for plugin }; $.fn.myPlugin = function () { }; // ,   ,    dom-: $.myPlugin = function () { }; }(document, jQuery); 

このアプローチは、たとえばDatePickerなどのjQueryのほとんどのプラグインで見られます。

おわりに

私の意見では、jQueryの人気の理由は、外部の単純さと軽さ、および名前の簡潔さ（ setStylesに対するcss 、 setAttributesに対するattrなど）でした。 このアイデアはただ美しく、多くの人の心をつかんだ。 JQueryクローンは非常に一般的であるか、アイデアが他の言語に転送されます。 しかし、単純さはだまされています。 また、常に良いとは限らないため、メソッドのわかりやすい名前を短縮する前に、常に3回考えてください。

この記事を楽しんでいただき、あまりにも難解ではなかったことを願っています。 必要に応じて、サイクルを継続してjQueryをさらに深くすることも、他のフレームワークを探索することもできます。