2013年6月14日金曜日

jQueryの複数Version共存と無名関数

例えば,ある公開中の顧客のサイトで何かのPluginを動かしたいとする.そのPluginはjQuery1.9.1以降であれば動作するが,それ未満であった場合,動作しないことが確認されている.しかし,顧客のサイトはjQuery1.2.6が導入されており,そこですでに使用されているPluginはjQuery1.9.1では動作しないことがわかっている.次の場合,単純にjQuery1.9.1をjQuery1.2.6が読み込まれた後に読み込むと,jQuery1.9.1になってしまう.

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    alert($().jquery); // 1.9.1
  </script>
</head>
</html>

サンプルファイルDL : sample1.html

この場合,jQueryの共存を行うことが出来れば,ベストな解であるといえる.その方法は次のコードを導入することで,これを可能とする.

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    jQuery1_9_1 = jQuery.noConflict(true);
    alert($().jquery); // 1.2.6
    alert(jQuery1_9_1().jquery); // 1.9.1
  </script>
</head>
</html>

サンプルファイルDL : sample2.html

さて,これによって,jQueryが1.2.6と1.9.1の共存した状態になる.つまり,jQuery1.9.1の$関数をjQuery1_9_1関数に書き換えたようなイメージになる.このような場合,それぞれのVersionで動かすためにはjQuery1.2.6ならば$関数を用いて,jQuery1.9.1ならば$関数の代わりにjQuery.noConflict()関数で$関数の代わりに定義したjQuery1_9_1関数(?)を用いれば良い.しかし,このままではjQuery1.9.1を使う場合,通常ならば$(hogehoge)と書くところをjQuery1_9_1(hogehoge)と書かなければならないので,無名関数を用いてjQuery1.9.1でも$(hogehoge)とかけるようにすることができる.

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    jQuery1_9_1 = jQuery.noConflict(true);
    (function($){
      alert($().jquery); // 1.2.6
    })(jQuery);
    (function($){
      alert($().jquery); // 1.9.1
    })(jQuery1_9_1);
  </script>
</head>
</html>

サンプルファイルDL : sample3.html

ある関数はjQuery1.2.6で,ある関数はjQuery1.9.1で,それぞれを定義後,自由な位置で呼び出したい場合がある.これは連想配列内でそれぞれの定義を書けば,無名関数外でも,その関数を指定したjQueryのVersionで動かすことができる.

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    jQuery1_9_1 = jQuery.noConflict(true);
    (function($){
      a191 = {
        b : function(){
          return $().jquery;
        }
      }
    })(jQuery1_9_1);
    (function($){
      a126 = {
        b : function(){
          return $().jquery;
        }
      }
    })(jQuery);
    alert(a191.b()); // 1.9.1
    alert(a126.b()); // 1.2.6
  </script>
</head>
</html>

サンプルファイルDL : sample4.html

補足:無名関数とはこのような関数である.

<html>
<head>
  <script type="text/javascript">
    alert(
      (function(a){
        return a;
      })("aに入る値")
    );
  </script>
</head>
</html>

サンプルファイルDL : sample5.html

この無名関数を理解すると,$関数がなぜ無名関数を使うと jQuery1.2.6 が jQuery1.9.1 に変わったのかが良く分かる.