prototype.jsを読み解く

第9回 Prototypeライブラリ(2621~2845行目)

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

2680:   disable: function(form) {
2681:     form = $(form);
2682:     Form.getElements(form).invoke('disable');
2683:     return form;
2684:   },
2685: 

2680行目はdisable()です。

Form.getElements()でフォーム内のすべての入力要素を配列で取得し,Enumerable.invoke()を使って各々の要素に対してdisable()メソッドを起動しています。

2686:   enable: function(form) {
2687:     form = $(form);
2688:     Form.getElements(form).invoke('enable');
2689:     return form;
2690:   },
2691: 

2686行目からは enable() です。

disable()と同様で,disable()の代わりにenable()メソッドを起動しています。

2692:   findFirstElement: function(form) {
2693:     return $(form).getElements().find(function(element) {
2694:       return element.type != 'hidden' && !element.disabled &&
2695:         ['input', 'select', 'textarea'].include(element.tagName.toLowerCase());
2696:     });
2697:   },
2698: 

2692行目からはfindFirstElement()です。

getElements()で入力要素すべてを取得し,イテレータ内で真を返す最初のものだけを返すEnumerable.find()メソッドを使っています。

イテレータ内の条件は<input type="hidden">ではなく,プロパティdisabledが真でもなく,タグが<input>, <select>, <textarea>のいずれかである場合に真となります。最後の条件はgetElements()でやっている形に合わせてForm.Element.Serializers 以下のプロパティ存在チェックを使う方が(速度的にも,同じような条件判断を一箇所に集めるためにも)よいかもしれません。

2699:   focusFirstElement: function(form) {
2700:     form = $(form);
2701:     form.findFirstElement().activate();
2702:     return form;
2703:   },
2704: 

2699行目はfocusFirstElement()です。単純に先ほどのfindFirstElement()を呼んで,その要素に対してForm.Element.Methods.activate()メソッドを呼んでいるだけです。

2705:   request: function(form, options) {
2706:     form = $(form), options = Object.clone(options || {});
2707: 
2708:     var params = options.parameters;
2709:     options.parameters = form.serialize(true);
2710: 
2711:     if (params) {
2712:       if (typeof params == 'string') params = params.toQueryParams();
2713:       Object.extend(options.parameters, params);
2714:     }
2715: 
2716:     if (form.hasAttribute('method') && !options.method)
2717:       options.method = form.method;
2718: 
2719:     return new Ajax.Request(form.readAttribute('action'), options);
2720:   }
2721: }
2722: 
2723: /*--------------------------------------------------------------------------*/
2724: 

2705行目からはrequest()です。

フォームを簡単にAjax.Request()経由で送信するための関数です。

まず,options.parametersで渡された送信パラメータと,フォームが持っている送信パラメータをマージします。2712行目で必要に応じて正規化してくれているので,options.parametersにはクエリ文字列形式の文字列でもハッシュ形式のオブジェクトでも構いません。

フォームの送信に使うHTTPメソッドは,options.methodが指定されていればそちらを優先し,そうでなければ<form>タグのmethod属性を使います。

最後にAjax.Request()を呼び出して終了です。

Form.Element オブジェクト

2725: Form.Element = {
2726:   focus: function(element) {
2727:     $(element).focus();
2728:     return element;
2729:   },
2730: 
2731:   select: function(element) {
2732:     $(element).select();
2733:     return element;
2734:   }
2735: }
2736: 

2725行目からはForm.Elementです。focus()とselect()しか定義されていませんが,後述するForm.Element.MethodsがObject.extend()されるので,実際にはそれらを合わせた関数が使えます。

focus(), select()共に渡された要素のfocus(), select()メソッドを呼んでいるだけです。両方続けて呼んでくれるForm.Element.Methods.activate()という関数もあります。

著者プロフィール

栗山淳(くりやまじゅん)

S2ファクトリー株式会社株式会社イメージソース所属。
本業はWeb制作会社の裏方。得意分野はFreeBSDやPerlのはずだが,必要に迫られるとHTML/CSSやJavaScriptも書く。