読者です 読者をやめる 読者になる 読者になる

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 );とやったときに、
["", "", "g", undefined]
["#id", undefined, undefined, "id"]
のどちらかになる。
なので、match[1]とかmatch[3]でタグやidを使った処理ができる。

jQuery.fn.setArray

setArray()は配列の0番目に要素を入れるためのもの。
jQueryオブジェクトは配列ではないので、そのままpushできない。
なので、Array.prototype.push.applyを使って自分自身にelemsをpushする。
これによりjQuery.get(0)で、その要素自身を取ることができる。

jQuery().eachとjQuery.eachの違い

jQuery.eachは配列やオブジェクトの繰り返し処理ができる。
jQuery().eachの中でjQuery.eachを呼んでいて、
jQuery.each(this,...)というふうに引数にthisを追加している。
つまりjQuery().each(callback)はjQuery.each(jQuery(), callback)と同じことかな?