jQuery/コードを読む/001

jQuery/コードを読む/001

prototype.js同様これもバカ正直に読んでいきます←やめたほうがいい。読む順番がある。

バージョンは1.2.3 jQuery: The Write Less, Do More, JavaScript Library

1行目~変数空間を死守せよ!

いきなりコード全体が1個の関数オブジェクトでラッピングされて、定義直後に実行されるように「()」がケツ

(function(){
//延々とコード
})();

jQueryで使う変数名が外部と被っても、外部からの影響を受けないように、逆に外部に影響を出さないように関数スコープに閉じ込めてるということ

14行目~ 予め退避

まず window 上の jQuery プロパティの存在を確認。単独で使えば存在するわけがないので通常はスルー。

存在したのなら内部変数_jQueryにjQueryオブジェクトを突っ込んでます。

// Map over jQuery in case of overwrite
if ( window.jQuery )
	var _jQuery = window.jQuery;

これは既存のjQueryとの衝突回避のために、あとの621行目で復帰させるために一応この時点で退避している。

noConflict: function( deep ) {
    window.$ = _$;
 
    if ( deep )
        window.jQuery = _jQuery;
 
    return jQuery;
},

↑で変数の範囲を関数のスコープで切り取っているので、_jQueryは一番外側の関数のプライベートメンバとして機能する。 つまり外部に漏れない。

17行目~ jQuery関数の定義 外部にチラ見せ設計

なにやら関数オブジェクトをwindow.jQueryとプライベートjQueryに突っ込んでる。

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

jQueryはできる限り変数を内部に閉じ込めて、必要な部分だけwindowオブジェクトを通じて外部に公開するような設計。

jQuery関数の定義 内部

オブジェクトの内部自体は関数オブジェクトでガードされているので定義時には何が入っていても関係ない。

引数を二つ取り・・・どこかで定義されている、jQueryオブジェクトの内部実装のinitメソッドに値を渡してるだけ。

このリターンがjQueryオブジェクトそのものなんでしょう。

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

new 演算子を使ってコンストラクタメソッドとして、内部のinit関数を呼び出し。

jQueryでは包含されているせいかこのオブジェクトに格納されているprototypeプロパティからの直接起動が多い気がするんだがこれは何を意味するのか?

あとコンストラクタ関数が呼び出されたらこいつのthisは何を指すのか?

ポイントは、jQueryで $('#hoge') とか書かないとこいつは呼ばれないということだね。

23行目~ 出た!ドル関数定義

prototype.js でもおなじみの$関数の定義。

jQueryではドキュメントオブジェクトの取得ではなく、jQuery関数へのショートカットになっている。

存在を確認して内部にまた控えてる。 これはprototype.jsとの併用を考慮しているからなのでしょうかね?

// Map over the $ in case of overwrite
if ( window.$ )
	var _$ = window.$;
 
// Map the jQuery namespace to the '$' one
window.$ = jQuery;

よくわかりませんが、単独では$はjQueryオブジェクト生成のショートカットなんだと覚えておけばいいでしょう

まとめ

  • Javascriptは関数スコープなので関数オブジェクトでラップすると変数の影響を封じ込めることができる。
  • 関数オブジェクトで封じ込められた中身は実行時に初めて評価される。定義時ではない。

次回 読む002

Tag

javascript/jquery/code_reading/code_reading_001.txt · 最終更新: 2018-11-17 14:32 by ore