Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

自作のjQueryプラグインに引数を設定するには?($.extend)

2015年11月19日

プラグイン作成の基本を理解したら、パラメーターを受け取れるようにしよう。その実装方法を解説。

  • このエントリーをはてなブックマークに追加

 一般的なメソッド/関数がそうであるように、実用的なプラグインでは、利用者が挙動をある程度制御できるように、引数(パラメーター)を受け取れるようにすべきです。本稿では、別稿「TIPS:jQueryプラグインを自作するには?」で作成したconfirmプラグインを改良して、以下のようなパラメーターを指定できるようにしてみましょう。

パラメーター概要デフォルト値
text 確認ダイアログに表示するテキスト 本当に送信しますか?
cancelListener キャンセル時に、要素に設定された他のリスナーもキャンセルするか true
confirmプラグインで利用できるパラメーター

 これらのパラメーターは、一般的には、ハッシュ形式(=名前付き引数)で指定できるようにするのが通例です。

JavaScript
$('#search')
  .confirm({
    text: '処理を継続しても構いませんか?',
    cancelListener: false
  })
confirmプラグインに対してパラメーターを渡すコード(confirm_param.html)

 名前付き引数には、以下のようなメリットがあります。

  • 引数の意味が識別しやすい
  • 引数の順序を利用者が自由に変更できる
  • 順序に関わらず、全ての引数を自由に省略できる

 プラグインでは、パラメーターの数も増えがちですし、用途によってどのパラメーターを省略するかもまちまちなことが一般的です。そのような場合にも、名前付き引数を利用することで、自由なパラメーター設定を可能にします*1

  • *1 そもそも多くのプラグインが名前付き引数を採用していますので、同じ形式を採用することは、ユーザーが直観的に利用できるというメリットもあります。

パラメーターを受け取るプラグインの定義

 このようなパラメーター(名前付き引数)を受け取る、プラグイン側のコードは、以下の通りです。先述の別稿からの変更部分は、太字で表しています。

JavaScript
(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);
名前付き引数を受け取れるようにしたconfirmプラグインのコード(jquery.confirm.js)

 デフォルト値は、1のようにハッシュとして準備しておきます。あとは、これを実際に渡されたパラメーターとマージすることで、明示的な指定がないパラメーターはデフォルト値のままに、指定されたパラメーターはその値が、それぞれ採用されることになります。ハッシュ同士のマージには、$.extendメソッドを利用します(2)。

[構文]$.extendメソッド

$.extend(target, obj1 [, obj2,...])

  • target: マージ元のオブジェクト
  • obj1、obj2...: マージするオブジェクト

 この例であれば、空のハッシュ({})に対して、デフォルト値(defs)→実引数(params)の順でマージしています。マージ結果は戻り値configに格納されます。

 パラメーターを準備できてしまえば、あとは簡単。config.textconfig.cancelListenerのような形式で、個々のパラメーターにアクセスできます。例えば3であれば、cancelListenerパラメーターがtrueの場合にだけ、stopImmediatePropagationメソッドを呼び出して、以降のリスナーをキャンセルしています。

処理対象:基本 カテゴリ:プラグイン
API:jQuery.fn(jQueryプロトタイプオブジェクト) カテゴリ:内部処理(Internals)
API:jQuery.extend() カテゴリ:Utilities(ユーティリティ)

※以下では、本稿の前後を合わせて5回分(第30回~第34回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
30. 特定の要素に関連付くデータを取得/設定するには?(data)

現在の要素に対して任意のデータを設定/取得するためのdataメソッドの基本と、利用上の注意点を解説する。

jQuery逆引きリファレンス
31. jQueryプラグインを自作するには?($.fn)

何度も利用する似たコードは、ライブラリではなくプラグインにまとめよう。プラグイン作成の基本を解説。

jQuery逆引きリファレンス
32. 【現在、表示中】≫ 自作のjQueryプラグインに引数を設定するには?($.extend)

プラグイン作成の基本を理解したら、パラメーターを受け取れるようにしよう。その実装方法を解説。

jQuery逆引きリファレンス
33. HTTP GET/POSTで非同期通信を実施するには?($.get/$.post)

$.get/$.postメソッドを使って取得したデータを加工して表示コンテンツを組み立てる方法を解説する。

jQuery逆引きリファレンス
34. JSON形式のWeb APIにアクセスするには?($.getJSON)

クロスドメイン制約を回避するためのJSONPをjQueryで利用しよう。$.getJSONメソッドの基本的な使い方を解説する。

サイトからのお知らせ

Twitterでつぶやこう!