jquery.jsを読み解くを見て勉強(第1回分)
第1回 jQueryライブラリ(1~171行目):jquery.jsを読み解く|gihyo.jp … 技術評論社
今さらだけど、何となくしか連載読んでなかったのでもう一回はじめから勉強してみる。
ってか、残しておかないと間違ってるかどうかもわからないし忘れる。
jQueryオブジェクトの作られ方
まず、window.jQueryを宣言。
これでjQueryオブジェクトにいろいろくっつけていけばグローバル変数はjQueryだけで済む。
jQueryは関数で、戻り値はjQuery.prototype.initをnewして返されるオブジェクト。
つまりvar $obj = jQuery();を実行したとすると、
jQuery.prototype.init = function (selector, context) { this.property = 'property'; this.method = function () {} } jQuery.prototype.init.prototype = { proto_propertye : 'property', proto_method : function () {} }
みたいなjQuery.prototype.initをnewしたオブジェクトができるから、
$objはjQuery.prototype.initのプロパティやメソッドが使える。
ちなみにvar $obj = new jQuery();を実行したとすると、
new演算子はfunctionの戻り値があった場合それを返すので、
19行目のreturn new jQuery.prototype.init( selector, context );からjQuery()実行時と同じ意味になる
# ここ本当かな?この先のソースでnew jQuery()やってるところとjQuery()やってるところの2パターンあって違いがわからない
また、
jQuery.prototype.init.prototype = jQuery.prototype;
を実行してるので、jQuery.prototype.init.prototypeはjQuery.prototypeと同じオブジェクト。
つまり、jQuery.prototypeの中身をみると$objが何のプロパティやメソッドが使えるかわかるのでこれから先見ていきましょうとのこと。
加えて、
jQuery.fn = jQuery.prototypeなので、
たとえばjQueryオブジェクトに関数newFunctionを追加するときは
jQuery.fn.newFunction = function() {}
ってやれば可能。
ただし、すでにjQueryオブジェクトの関数にnewFunctionって名前があったら上書きしちゃうからあんまりよろしくない。
$=jQueryなので、
$.<関数名>はjQueryのメソッド。
つまり、
jQuery.browser = function(){}
みたいに定義されてると思えばいい。
$()=jQuery()なので、
$().<関数名>はjQuery.prototype(jQuery.fn)のメソッド。
# jQuery()でreturn new jQuery.prototype.init( selector, context );されるから。
つまり、
jQuery.fn.map = jQuery.prototype.map = function(){}
みたいに定義されてると思えばいい。
jQuery.fn = jQuery.prototype = { map: function(){} }
こうかな。
jQueryの引数に関するパターンマッチ
var quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/; // 途中で<と>が出てくる(HTMLタグのこと) // または // #で始まる文字列(#ではじまるってことはIDを意味する)
というパターンを用意しておくと、jQueryの引数selectorによって処理を変えられる。
var match = quickExp.exec( selector );とやったときに、
["
["#id", undefined, undefined, "id"]
のどちらかになる。
なので、match[1]とかmatch[3]でタグやidを使った処理ができる。