jQuery()の挙動を解読する(6) jQuery.clean()メソッド解読(2)──jQuery解読(10)

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

このエントリイのjQuery.js 1.2.1における対象箇所

コードの表示/隠蔽

33: jQuery.fn = jQuery.prototype = {
34: 　init: function(selector, context) {
　　　　・・・・
39:　　　if ( typeof selector == "string" ) {
40: 　　　　var m = quickExpr.exec(selector);
41:　　　　 if ( m && (m[1] || !context) ) {
42:　　　　　　// HANDLE: $(html) -> $(array)
43:　　　　　　if ( m[1] )
44:　　　　　　　 selector = jQuery.clean( [ m[1] ], context );
　　　　　　・・・・・・
82:　　　},
　　　　　　---------------------------------------------
765:　　　clean: function(a, doc) {
766:　　　　　var r = [];
767:　　　　　doc = doc || document;
768:
769:　　　　　jQuery.each( a, function(i,arg){
　　　　　　・・・・・・
854:　　　},

直前のエントリイにおいて、何とか jQuery.each() メソッドを解明できましたので、次に44行の jQuery.clean([m[1]],context) で呼び出される clean()メソッド内で、eachメソッドが どの様に呼び出されているのかを調べます。

769行の jQuery.each(a,function(i,arg))メソッドの引数は何？

直前のエントリイで明らかにしたjQuery.each()メソッドの定義から、呼び出されたeachメソッドの最初の引数 a は、44行と765-769行によって cleanメソッドの最初の引数、つまり配列 [m[1]]となります。またfunction()の２つ目の引数argは、やはり定義からaの要素、つまり 配列[m[1]]の要素 となります。そしてこの場合のeachメソッド（769行）は引数が２つですので、先に見た４番目のケースとなります。

こうして769行の jQuery.each(a,function(i,arg)) は、具体的には jQuery.each([m[1]],function(i,[m[1]]の個々の要素)) となります。

次に、eachで反復対象となる a、つまり [m[1]] はどのような内容となるのか、改めて確認しておく必要があるでしょう。m[1] は31-40行の定義上から、タグの属性や子要素に任意の文字を含むhtmlタグの羅列となります。例えば"<div><p>Hellow!</p></div>"のような文字列です。従って [m[1]].length=1であり、arg="<div><p>Hellow!</p></div>"であり、これも1つしかありません。つまりeachは一回だけ適用されることになります。

わずか1度しか使わないのにどうしてeachメソッドを使う必要があるのか、この点は不明です。

str.replace(RexExp,function())───（777-780行）

さて、clean()メソッドを先に進むと、775-841行で「Convert html string into DOM nodes」（html文字列のDOMノードへの変換）が行われています。その最初の部分はタグのXHTMLスタイルへの変換ですが、ここで興味深いのは replaceメソッドが引数に関数を取っていることです。

これまではstring.replace(regexp,newString) しか知らなかったのです。関数を指定できるようになったのはJavascript1.3以降だそうですから、決して最近のことではないのですが、関数を使ったreplaceの例はこれまで見たことがなかったのです。

さて書籍等に拠ればこの場合の関数の引数は、順に「ヒットした文字列」、「最初の部分文字列」、「２番目の部分文字列」、・・・となるようです。

正規表現文字列「/(<(\w+)[^>]*?)/>/g」によって arg 内から抽出された文字列が第１引数 m に代入され、allには第１部分文字列である <(\w+)[^>]*? （mから末尾の２文字"/>"を省いた文字列）が、またtagには 第２部分文字列である \w+ （タグ名になる）が、それぞれ順次代入されることになります。

例えば argが"<img src='test' alt='test' />"である場合には m="<img src='test' alt='test' />"、all="<img src='test' alt='test' "、tag="img" と順に代入されます。

それにしても、置換メソッドは何を目的としているのか、最初は分かりませんでした。関数の返値を見るとここでも正規表現によるパターン検索が登場します。tag名に代入されたタグ名を対象として、tag.matchでパターン検索しているのはみな終了タグがないタグ名です。そして、当該パターン検索にヒットした場合には m が、その他の場合にはall+</tag>が返されます。つまり、tag.match検索にヒットした場合には、閉鎖タグがないままの<tag名･･･/>が返値となり、ヒットしなかった場合には<tag名･･･></tag名>が返されるのです。

当たり前のことをやっているだけではないか、と最初は不審に思いました。

そこで以下のテストコードを作成しfirebugでチェックしてみました。

(function(arg){
var result = arg.replace(/(\w+)[^>]*?)\/>/g, function(m, all, tag){
    var tmp =[m,all,tag].join(", ")
    alert(" m, all, tag = " + tmp);
    return tag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area)$/i)? m : all+"></"+tag+">"
}
alert(result);
})("<div src='test' />");

上記のargに色々なタグ文字列を入れてみると、<img･･･/>はそのまま<img･･･/>となって帰ってくるし、/がない<img･･･>はそのまま<img･･･>で帰ってきます。そこで敢えて謝った記述 <div･･･/></div>をreplaceしてみたら、誤りを正して<div></div>が帰ってきました。

つまり、この置換メソッドは不正なXHTML構文を正す役割を負っているようです。ユーザーによって終了タグを記述しない誤記があった場合において、自動的に終了タグを挿入させるのです。しかし同時に終了タグがない要素名であって / が付いていないタグ記述に対して、それを付与する機能は持ってない、ということが分かりました。

▲ToTop

次には空白文字の削除とdivエレメントの生成が続いている───（782-783行）

jQuery.trim()───（911-913行）これは trim の名から推測されるとおり不要な空白文字列を削除するメソッドです。正確に言うとjQuery.trim(arg)メソッドは、arg文字列の先頭または末尾に存在する1個以上の空白文字列を削除し、途中にある空白文字は削除しません。引数tがなかった場合にエラーにならぬよう、(t||"")をreplace対象文字列としています。これによりarg文字列の先頭又は末尾にあるホワイトスペースが削除され、変数 s にその結果が代入されます。

このように空白文字を削除するのは、直後に生成されるdivエレメントと併せて、この後に続く"入力値に対する次なるエラーチェック"を行うためです。

var wrap で誤ったタグ記述を正しく修正する───（785-817行）

「clean」の意味はこのwrapを解明することでかなり見えてきそうです。結論を先取りすれば誤ったタグ記述を正しく修正する為のコードがこのwrapに続く部分です。

この部分では極めてトリッキーなコードが３つあります。

第一はindexOf()メソッドの特異な利用方法です。string.indexOf("str")は、string文字列内にstrが含まれる場合には 0 または自然数を返します。含まれなければ -1 が返ります。さて、否定演算子を前に置いて、!string.indexOf("str")とすると、string.indexOf("str") = 0 の時だけこの値はtrueとなり、その他はfalseになります。0 の否定だけが true だからです。

こうして !string.indexOf("str") は string 文字列の先頭に str が含まれる場合にだけ true となります。このトリッキーな方法を使って s 文字列の先頭に或る文字列が含まれる場合に、或る配列を指定しそれを wrap に代入しているのが785-810行です。

トリッキーなコードの第二は、&& 演算子及び || 演算子の使い方です。var wrap への代入値は、連続する || 演算子によってその前後にあるいずれか一つの値となりますが、そのいずれかを選択するのは && の前に置かれたコードです。&& の前に置かれた式の値が true の時だけ && の右の値が取得されるからです。

因みにここで行われることを馴染みのコードで書けば、極めて冗長ですが次のようになります。

if ( s.indexOf("<opt")==0 ) var wrap = [1, "<select>", "</select>"]; else if ( s.indexOf("<leg")==0 ) var wrap = [1, "<fieldset>", "</fieldset>"]; else if (･････) ････ else var wrap = [0,"",""];

&& と || の２つの演算子を巧みに組み合わせて条件分岐を行っているわけで switch 文を代行していることになります。この記述方法は自作コード内でも極めて重宝すると思います。

第三のトリッキーコードは極めつけです。817行の div=div.lastChild がタグの入力ミスを修正する役割を負っているのです。

どういうことかと言うと、wrapに代入された配列とargの値を組み合わせて、コード内で生成したdivタグ内に wrap[1] + arg + wrap[2] を代入していますが、これは例えば<table><tbody></tbody><colgroup><col></col></colgroup></table>のような文字列になります（argが<colを含んでいた場合）。そして815-817行によって、生成したdivタグ内に<col></col>を代入しています。

これだけ見ると元の値を返して一体何をしているのか？、と疑問に思いますが、実はこの一連のコードは入力ミスを修正してくれる機能を持っているのです。例えばjQuery("<col>abc</tr>").*** のようにタイプミスをしたとします。これがclean()メソッドに掛けられて<col>abc</tr>の部分が<col>abc</col>と修正されるのです。

どうしてこのような修正が行われるかと言えば、lastChild（別にfirstChildでも構わない）プロパティの効能です。一端ラッピングされたタグ文字列から DOM のプロパティを利用することによってエラーを修正しているのです。この方法には驚きました。そんな効能が DOM ツリー検索機能に存在していることなど、全く知らなかったからです。

とにかくこれらのトリッキーなコードを重ねて、ユーザーによるタグ標記のエラー訂正を行っているわけです。（785-817行）。

▲ToTop

IEのバグ対策───（819-838行）

823: if ( !s.indexOf("<table") && s.indexOf("<tbody") < 0 )
824:　 tb = div.firstChild && div.firstChild.childNodes;

ここではIEによって自動挿入されてしまうことがある tbody 空要素 を削除しています。つまりバグ対策です。

まず、ユーザーが入力した標記文字列の先頭に <table が含まれ、かつ当該タグ標記文字列内に <tbody が含まれなかったら、tb に div の孫ノード全てを代入し（823-824行）、入力文字列がtableタグを含まず <thead や <tfoot だった場合には tbに div の子ノードを代入しています。（827-828行）つまりtableタグの子要素を抽出しています。

IEバグ対策のこのブロックでも && 論理演算子がトリッキーな使われ方をしています。

824行の tb = div.firstChild && div.firstChild.childNodes; です。これは2つのノードオブジェクトを論理演算子で結合してますが、この式は&& の両側が共に真の場合に真を返すわけではなく、
if (div.firstChild) tb = div.firstChild.childNodes;
と言う意味になります。

次に、tbノードの要素数を頼りにその最後から順に「子ノードを持たない tbody ノード」を抽出し（831行）、当該tbodyノードを削除しています。（832行）

以上によりIEが勝手に挿入するtbodyタグ（それは子要素を持たない）を削除することが出来るわけです。

IE対策の最後は空白文字の扱いです。arg の最初に空白文字がある場合に（835行）、その空白文字列を取りだして、補正されたarg つまりdiv.firstChildの前に挿入しています。（836行）

しかしこの部分の必要性と具体的な適用例は思いつきません。

▲ToTop

jQuery.clean()メソッド解読の最後（840-845行）

arg が文字列型であった場合の処理の最後に、
arg = jQuery.makeArray( div.childNodes ); （840行）があります。

これは、補正されたタグ文字列を arg 配列に入れるコードです。ここに、jQuery.makeArray() は915-926行で定義されていますが、「配列を作る」との名称から推測される内容とは裏腹に、safariのバグフィックスのようです。配列もどきを配列に格納して返値とするメソッドで、対象が配列の場合には当該配列が返されます。

とにかく840行によって補正されたタグ文字列は配列に格納されます。

最後に、arg が文字列型ではない場合の処理が続きます。既に直前の840行でタグ文字列は配列 arg に代入されていますので、元のargが文字列型であってもこの段階では誤記が修正された上で arg 配列に変化しています。

続く843-847行までの５行の解読は未だ出来ません。

849行では取得された配列が r 配列に合併されていますが（jQuery.merge()）、元々 r 配列は空配列（766行）ですから、849行によって arg 配列が r 配列に代入されることになります。

そして最後の最後に、この r 配列を return して、長い長い jQuery.clean()メソッドが終了します。

jQuery.clean()メソッド全体の意味

途中でJavascriptの学習を深めながら、延々とinit()メソッド内で呼び出されるjQuery.clean()メソッドの解読を続けてきました。何とかその全容を解き明かすことが出来たものと考えていますが、最後に、init()メソッドから呼び出されたjQuery.clean()メソッドが果たす役割についてまとめておきます。

それは第一に、ユーザーが記述したタグ名（子孫を持つ場合を含む）の整合性をチェックし、もし記述にミスがあればそれを修復します。整合性は（a）終了タグがないタグ名が正しく記述されているかどうか、また（b）開始タグと終了タグがきちんと対になっているかを調べます。

第二に、tableタグにまつわるIEのバグ対策を行います。しかしこれはユーザー入力値とは無縁ですので、init()メソッドで呼び出されたjQuery.clean()メソッドではこの部分は利用されません。まだ分析していませんが、cleanメソッドが別の箇所から呼び出された時に効果を発揮する箇所なのだと推測しています。

第三に、formタグに関わるチェックがありますが、この部分は解読できていません。後日を待つこととします。

以上のように、jQuery.clean()メソッドは３つの清掃作業をおこなうメソッドとして定義されていると理解することが出来ます。