jquery.jsを読み解く

第11回 jQueryライブラリ(2365行目~2529行目)

この記事を読むのに必要な時間:およそ 5 分

jQuery.fn.serialize()

2432:   serialize: function() {
2433:     return jQuery.param(this.serializeArray());
2434:   },

2432行目からは,Formの値をシリアライズするjQuery.fn.serialize()メソッドの定義です。serializeArray()メソッドを呼び出して,その結果をjQuery.param()メソッドを使って,key=value形式に変換して返します。

jQuery.fn.serializeArray()

2435:   serializeArray: function() {
2436:     return this.map(function(){
2437:       return jQuery.nodeName(this, "form") ?
2438:         jQuery.makeArray(this.elements) : this;
2439:     })
2440:     .filter(function(){
2441:       return this.name && !this.disabled && 
2442:         (this.checked || /select|textarea/i.test(this.nodeName) || 
2443:           /text|hidden|password/i.test(this.type));
2444:     })
2445:     .map(function(i, elem){
2446:       var val = jQuery(this).val();
2447:       return val == null ? null :
2448:         val.constructor == Array ?
2449:           jQuery.map( val, function(val, i){
2450:             return {name: elem.name, value: val};
2451:           }) :
2452:           {name: elem.name, value: val};
2453:     }).get();
2454:   }
2455: });
2456: 

2435行目からは,jQuery.fn.serializeArray()の処理になります。先ほどのserialize()メソッドとの違いは,戻り値がJSON形式で返ってくる点です。内部処理はjQueryメソッドのチェーンになっています。

2436行目のmapメソッドで選択要素のnodeNameを調べ,formであればその要素を返し,そうでなければ自身を返します。

2440行目のfilterメソッドによって,name属性が設定されていて,disableではないものでかつ,checked属性があるか,select要素またはtextarea要素か,もしくはtypeがtext,hidden,passwordであるものを抽出します。

2445行目のmapメソッドで,value値を取り出します。そして,2447行目でその値がnullでなくて,Array型であればmapメソッドによってさらに内部の配列要素を取り出します。

最後に,2453行目のget()メソッドによってjQuery.makeArrayメソッドを使ってクリーンにした配列を返します。

AJAX関連のイベント割り当て

2457: // Attach a bunch of functions for handling common AJAX events
2458: jQuery.each( "ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess,ajaxSend".split(","), function(i,o){
2459:   jQuery.fn[o] = function(f){
2460:     return this.bind(o, f);
2461:   };
2462: });
2463: 

2458行目からは,Ajax関連イベントの割り当て処理になります。ajaxStart,ajaxStop,ajaxComplete..などのイベントを現在選択中の要素に割り当てます。ここで面白いのは,これらの関数はどこにも定義されていなくて,ライブラリの利用者が定義したものをそのまま実行する形になります。

jQuery.get()

2464: var jsc = (new Date).getTime();
2465: 
2466: jQuery.extend({
2467:   get: function( url, data, callback, type ) {
2468:     // shift arguments if data argument was ommited
2469:     if ( jQuery.isFunction( data ) ) {
2470:       callback = data;
2471:       data = null;
2472:     }
2473:     
2474:     return jQuery.ajax({
2475:       type: "GET",
2476:       url: url,
2477:       data: data,
2478:       success: callback,
2479:       dataType: type
2480:     });
2481:   },
2482: 

2464行目は,ブラウザのキャッシュを回避するためのパラメータを生成して,jsc変数に格納しています。

2466行目からは,簡単にGETリクエストを行うことができるjQuery.get()メソッドの定義です。2469行目で,第2引数に関数が渡された場合は,dataが省略されているものとみなしてcallback変数およびdata変数の値を設定し直します。2474行目を見ると,jQuery.get()メソッドはjQuery.ajax()の単なるラッパであることが分かります。実際のリクエストはjQuery.ajax()によって行われます。

著者プロフィール

山下英孝(やましたひでたか)

大学を卒業後,大手SIerに就職し,電機メーカーの研究所勤務を経て,ウノウに入社。1年半に渡ってWebサイトの開発,ディレクション,運用を経験した後に独立。2008年2月よりフリーエンジニアとして活動中。好きな言語はJavaScriptとPythonで,Linuxサーバ運用管理も得意。

ブログWeboo! Returns.