複数の jQuery プラグインで共有するオブジェクトを無名関数内に定義する

複数の jQuery プラグインを管理するために必要となる共通関数

マウスカーソル位置、要素位置、要素サイズ、window サイズ、スクロール値などの値は、jQuery プラグインを作成する上で、あれこれの複数のプラグインに共通して必要となる基本的な情報であり、どのプラグインからも使用できるように定義することが求められる。

こうして複数のプラグインから共通して利用できるオブジェクトを作成した。

概要は以下の通り。

1. 各プラグインから共通して使用する jQuery クラスオブジェクト F を、任意の 1 以上のプラグインコードが記されたファイル内の無名関数内に配置する。
2. プラグインファイルが 2 つ以上に分割されていても利用できるようにする。
3. F のプロパティには HTML 要素や winodw の位置、大きさ、スクロール値を算出する関数を登録する。
4. また、window resize、window scroll 及び mousemove イベントの各ハンドラーも F のプロパティに登録する。
5. イベントハンドラーを除く上記の諸関数による取得値を、各プラグインコード内の変数や、HTML 要素を参照するオブジェクト（ jQuery インスタンスオブジェクトを含む ）に登録できるように、諸関数の引数を工夫する。
6. F オブジェクトには getPos、getSize、getScroll、eF、winSize、winscrollPos、mousePos の 8 つのプロパティを設け、各プロパティ値を全て関数か、関数の実行返値とする。
7. getPos、getSize、getScroll の 3 つの関数は、eF 関数オブジェクトから、あるいは各プラグインコード内に設けられた DOM Reaady 関数内から直接び出され、これらに返値を返す。
8. 複数のプラグインから利用することを想定しているイベントハンドラーは、試行錯誤の結果、各プラグインコード内の変数や、HTML 要素を参照するオブジェクトに登録するのではなく、直接 $.F オブジェクトのプロパティ値として登録することにした。
9. 言わずもがなのことであるが、mousemove イベントは DOM が Ready された状態でマウスカーソルが移動することによって発生する。そのため例えば DOM が Ready される前に、マウスカーソルを当該ブラウザとは別のアプリケーションに移動した場合には $.F.mousePos オブジェクトが誕生する前に、それを利用するコードが進行する場合もある。このような場合に対処するために、$.F.mousePos = {X:"0px",Y:"0px"};の一行を挿入した。

その jQuery クラスオブジェクトについて

オブジェクト名は単純明快に F とし、次のように定義した。因みに jquery.js による jQuery クラスオブジェクトには F プロパティは存在しない。

  $.F ={
    // 要素の位置計測
    getPos : function(elem){
      if (!$(elem)||!$(elem).offset()) return false;
      var off = $(elem).offset(),
      	  pos = $(elem).position();
      return {
        left : off.left, // 絶対座標横方向値
        top : off.top, // 絶対座標縦方向値
        posLeft : pos.left, // offsetParent座標横方向値
        posTop : pos.top // offsetParent座標横方向値
      }
    },
    // 要素の大きさ計測
    getSize : function(elem){
      if (!$(elem)||!$(elem).width()) return false;
      if (elem===window){
        return { //内容辺サイズ、border 辺サイズ
          cW:$(elem).width(), cH:$(elem).height(),
          oW:$(elem).outerWidth(), oH:$(elem).outerHeight()
        }
      } else {
        return { //内容辺サイズ、padding 辺サイズ、border 辺サイズ及び margin 返サイズ
          cW:$(elem).width(), cH:$(elem).height(),
          iW:$(elem).innerWidth(), iH:$(elem).innerHeight(),
          oW:$(elem).outerWidth(), oH:$(elem).outerHeight(),
          oMW:$(elem).outerWidth(true), oMH:$(elem).outerHeight(true)
        }
      }
    },
    // スクロール値取得
    getScroll : function(elem){
      if (!$(elem)) return false;
      return {L:$(elem).scrollLeft(), T:$(elem).scrollTop()}
    },
    // ノードに位置、サイズ及びスクロールの各プロパティを設定する。
    eF : function(elem){
      if (!$(elem)) return false;
      elem.pos = $.data(elem,"pos") || $.data(elem,"pos",$.F.getPos(elem));
      elem.size = $.data(elem,"size") || $.data(elem,"size",$.F.getSize(elem));
      elem.scroll =$.data(elem,"scroll") || $.data(elem,"scroll",$.F.getScroll(elem));
    }
  }
  // $.F オブジェクトにwindowサイズとスクロール値及び
  // resize event ハンドラー, scroll event ハンドラーを登録する。
  $(function(){
      $.F.winSize = $.F.getSize(window); // 現在値の取得
      $.F.winScrollPos = $.F.getScroll(window); // 現在値の取得
      $.F.mousePos = {X:"0px",Y:"0px"}; // 初期値設定
      //resize,scroll イベントハンドラー
      $(window).resize(function(){$.F.winSize = $.F.getSize(window)})
        .scroll(function(){$.F.scrollPos = $.F.getScroll(window)});
      // body 上での mousemove イベントハンドラー。マウス位置取得
      $(document.body).mousemove(function(e){
        $.F.mousePos={X:e.pageX, Y:e.pageY};
      });
    }
  })

▲ToTop

各プラグインから共用する F オブジェクトの説明

$.F.eF メソッドにより任意の HTML 要素の位置、大きさおよびスクロール値を取得する。また、$.F オブジェクトの winSize 及び winScrollPos プロパティに、頁オープン時の window の大きさとスクロール値を取得し、かつ、これらの値は window resize 及び window scroll イベントに対応させた。更に $.F.mousePos プロパティに、mousemove イベントによるマウスカーソル位置を取得した。

なお、$.F オブジェクト定義時（つまり頁を開いた時）にマウスカーソルが当該 window 内にない場合もあるので、mousePos プロパティは初期値として {top:0,left:0} を設定した。そうしないとマウスカーソルが window 外にある場合には、$.F オブジェクト定義時に mousePos プロパティが未定義になってしまうからである。

eF メソッドにより取得された値は、対象となった HTML 要素オブジェクトの pos、size 及び scroll プロパティ値に格納される。このことを jQuery インスタンスで表現すれば、jQuery における対象要素表現 strings を expr として、jQuery(expr)[0].pos、jQuery(expr)[0].size、jQuery(expr)[0].scroll である。

DOM Ready 関数内で取得された window サイズ、スクロール値あるいはマウスカーソル絶対座標値は、$.F オブジェクトの winSize、winScrollPos あるいは mousePos プロパティに格納される。

F オブジェクトや複数のプラグインを内包する無名関数の構成

■ 1 以上のプラグインコードを含む 1 つの任意のプラグインファイル内の冒頭で、
　 $.F オブジェクトを登録する。
(function($){
  // 複数のプラグインから利用する F オブジェクトを定義する
  $.F={……}; 
  $(function(){
    $.F.winSize = $.F.getSize(window);
    ･･･
    ･･･
    $(document.body).mousemove(function(e){
      $.F.mousePos={X:e.pageX, Y:e.pageY};
    });
  });
  $.fn.pluginA = function(){ // プラグイン A
    // eF 関数を jQuery インスタンスの i 番目の要素を引数にして起動。これにより、
    // 当該要素の絶対位置とオブセットペアレント内の位置が当該要素の pos プロパティに、
    // 当該要素の大きさが当該要素の size プロパティに、
    // 当該要素のスクロール値が当該要素の scroll プロパティに、それぞれ設定される。
    $.F.eF(this[i]);
    ･･･････
  };
  $.fn.pluginB = function(){ // プラグイン B
    $.F.eF(this[i]);
	･･･････
  };
  ･･･････
})(jQuery)

■ 別のプラグインファイル内からの $.F オブジェクトの利用
(function($){
  $.fn.pluginC = function(){ // プラグイン C
    // eF 関数を jQuery インスタンスの i 番目の要素を引数にして起動。これにより、
    // 当該要素の絶対位置とオブセットペアレント内の位置が当該要素の pos プロパティに、
    // 当該要素の大きさが当該要素の size プロパティに、
    // 当該要素のスクロール値が当該要素の scroll プロパティに、それぞれ設定される。
    $.F.eF(this[i]);
    ･･･････
  };
  $.fn.pluginD = function(){ // プラグイン D
    $.F.eF(this[i]);
	･･･････
  };
  ･･･････
})(jQuery)