jQuery逆引きリファレンス
自作のjQueryプラグインに引数を設定するには？（$.extend）
プラグイン作成の基本を理解したら、パラメーターを受け取れるようにしよう。その実装方法を解説。
一般的なメソッド／関数がそうであるように、実用的なプラグインでは、利用者が挙動をある程度制御できるように、引数（パラメーター）を受け取れるようにすべきです。本稿では、別稿「TIPS：jQueryプラグインを自作するには？」で作成したconfirmプラグインを改良して、以下のようなパラメーターを指定できるようにしてみましょう。
| パラメーター | 概要 | デフォルト値 |
|---|---|---|
| text | 確認ダイアログに表示するテキスト | 本当に送信しますか？ |
| cancelListener | キャンセル時に、要素に設定された他のリスナーもキャンセルするか | true |
これらのパラメーターは、一般的には、ハッシュ形式（＝名前付き引数）で指定できるようにするのが通例です。
|
$('#search')
.confirm({
text: '処理を継続しても構いませんか？',
cancelListener: false
})
|
名前付き引数には、以下のようなメリットがあります。
- 引数の意味が識別しやすい
- 引数の順序を利用者が自由に変更できる
- 順序に関わらず、全ての引数を自由に省略できる
プラグインでは、パラメーターの数も増えがちですし、用途によってどのパラメーターを省略するかもまちまちなことが一般的です。そのような場合にも、名前付き引数を利用することで、自由なパラメーター設定を可能にします*1。
- *1 そもそも多くのプラグインが名前付き引数を採用していますので、同じ形式を採用することは、ユーザーが直観的に利用できるというメリットもあります。
パラメーターを受け取るプラグインの定義
このようなパラメーター（名前付き引数）を受け取る、プラグイン側のコードは、以下の通りです。先述の別稿からの変更部分は、太字で表しています。
|
(function($) {
$.fn.confirm = function(params) {
// 1デフォルト値を準備
var defs = {
text: '本当に送信しますか？',
cancelListener: true
};
// 2デフォルト値に実引数をマージ
var config = $.extend({}, defs, params);
this.click(function(e) {
if(!confirm(config.text)) {
e.preventDefault();
// 3cancelListenerパラメーターがtrueなら処理を停止
if (config.cancelListener) {
e.stopImmediatePropagation();
}
}
});
return this;
};
})(jQuery);
|
デフォルト値は、1のようにハッシュとして準備しておきます。あとは、これを実際に渡されたパラメーターとマージすることで、明示的な指定がないパラメーターはデフォルト値のままに、指定されたパラメーターはその値が、それぞれ採用されることになります。ハッシュ同士のマージには、$.extendメソッドを利用します（2）。
［構文］$.extendメソッド
$.extend(target, obj1 [, obj2,...])
- target： マージ元のオブジェクト
- obj1、obj2...： マージするオブジェクト
この例であれば、空のハッシュ（{}）に対して、デフォルト値（defs）→実引数（params）の順でマージしています。マージ結果は戻り値configに格納されます。
パラメーターを準備できてしまえば、あとは簡単。config.text、config.cancelListenerのような形式で、個々のパラメーターにアクセスできます。例えば3であれば、cancelListenerパラメーターがtrueの場合にだけ、stopImmediatePropagationメソッドを呼び出して、以降のリスナーをキャンセルしています。
API：jQuery.fn（jQueryプロトタイプオブジェクト） カテゴリ：内部処理（Internals）
API：jQuery.extend() カテゴリ：Utilities（ユーティリティ）
※以下では、本稿の前後を合わせて5回分（第30回～第34回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
32. 【現在、表示中】≫ 自作のjQueryプラグインに引数を設定するには？（$.extend）
プラグイン作成の基本を理解したら、パラメーターを受け取れるようにしよう。その実装方法を解説。
34. JSON形式のWeb APIにアクセスするには？（$.getJSON）
クロスドメイン制約を回避するためのJSONPをjQueryで利用しよう。$.getJSONメソッドの基本的な使い方を解説する。
