jQuery構造関数の解析について簡単に説明します

2235 ワード

私の前の文章の中でjQueryの大まかなフレームワークを述べて、すべてのコードが1つの自己呼び出し匿名関数の中に書かれていることを知って、しかもwindowオブジェクトに伝わって、ソースコードはこのようです:

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


私たちはalert(jquery)を通じてそれがオブジェクトであることを知っていますが、このオブジェクトはどのように構築されていますか?私たちは$(document)のような書き方で要素を取得し、普通の方法を直接呼び出したように、jQueryは普通の関数ですか?コンストラクション関数ならなぜnew$(document)の一般的な形式ではないのでしょうか.
実はjQueryはオブジェクト向けjsライブラリで、コンストラクション関数もあり、jQueryメソッドを呼び出すたびにjQeuryオブジェクトがインスタンス化されますが、jQueryの書き方は非常に上手です.
まずjsオブジェクト向け:jsはオブジェクト向けの言語ではありませんが、オブジェクト向けの書き方が多いので、ここでは図霊の「javascriptプレミアムプログラミング」のオブジェクト向けのプログラム設計部分を見ることをお勧めします.多くの方法でよく使われる書き方は、構造加原型方式であり、以下の例を挙げる.

var Person=function(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype={
 constructor:Person,
 init:function(msg){
  this.say(msg);
 },
 say:function(msg){
 alert(this.name+' '+msg);
 }
};
var tom=new Person('tom',23); 
tom.init('  ');// tom   


実はjQueryもこの方式を採用したのはもっと賢い書き方を使っただけで、一緒にjQueryの構造関数がどんな違いがあるか見てみましょう.

// Define a local copy of 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の真の関数はinitメソッドであり、jQueryを呼び出すとnew init()の結果が直接new jQuery()ではなくnew init()の結果を返すことがわかる.
jQuery.fnは何ですか?後でこのようなコードが見えます

jQuery.fn = jQuery.prototype = {...


これでよくわかりますが、実はjQuery.fnはプロトタイプオブジェクト,すなわちjQueryプロトタイプにはinitメソッドがあり,このメソッドは真の構造関数である.このように書くメリットは$()を書く必要がないことです.Init()のような操作は、直接初期化されますが、もう一つの問題は、initがコンストラクション関数である以上、jQueryに書いた方法のインスタンスは呼び出せないのではないでしょうか.Initのインスタンス化は自然にinitのメソッドを呼び出すしかないので、後でこのようなコードを見ます.

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;


前にjQueryについて話しました.fn=jQuery.protypeは、jQueryのプロトタイプオブジェクトがinitのプロトタイプに付与されていることを意味し、jQueryのプロトタイプメソッドは自然にinitもあり、このように構成することでjQueryメソッドを使用することは非常に簡単であり、new jQuery()の操作も手動初期化も必要なく通常の関数を呼び出すように簡単である.