jQueryとPrototypeを共存させる

2011.04.17 11:34
 jQueryとPrototypeは非常に便利なライブラリーなのですが、共存させるとなると一工夫が必要です。そのまま使うとコンフリクトして機能を失ってしまうのです。ここでは共存の方法を紹介します。
 巷の噂ではprototypeを先に読み込んで、jQueryを後から読み込むという噂ですが、私の環境では両者の順番に関係ありませんでした。jQueryを先に読み込んでも問題なしでした。(後から何かしらの問題があるのかもしれませんが、今のところ大丈夫です。)心配な方はは巷の噂どおり、
  1. prototypeのライブラリーを読み込み
  2. pototypeのプラグインを読み込み
  3. jQueryのライブラリーを読み込み
  4. jQueryのプラグインを読み込み
という順番でやってみてください。私の環境では、
  1. jQueryのライブラリーを読み込み
  2. jQueryのプラグインを読み込み
  3. prototypeのライブラリーを読み込み
  4. pototypeのプラグインを読み込み
でやっています。きちんと根拠は確かめていないのですが、たぶんこれでも大丈夫な筈です。

 さて、jQueryとPrototypeでは、どういうわけかprototypeが強く、prototypeは何もしなくてもよいのです。これはかなりひどい!いずれにししろjQuery側で何とかしてね、という話しでまとまっているのでその通り...jQuery側である関数を使ってコンフリクトを回避します。
 まずはjQueryのライブラリーを呼び出します。その直後に以下のようなコードでjQueryの「$」マークを違った文字列に置き換えて作動させるための関数を書きます。この関数は、ライブラリーを呼び出した直後であればどこでも大丈夫です。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
// ↓ ライブラリーを呼び出した直後(ここ!)
<script type="text/javascript">  
jQuery.noConflict()
</script>
<script type="text/javascript" src="<$mt:BlogURL$>theme-script/jquery_main.js"></script>
 という感じで、jQuery.noConflict()という(そのまんまの)関数を使います。この関数は、「$」を「jQuery」という文字列に置き換えてjQueryのプラグインを作動させます。なので、実際に使用するプラグインの中の$マークはすべて置換しないと使えないということになります。
例えば、プラグインの中身が、
$(document).ready(
    function() {
        $("#title").css("background-color","#ffffff");
    }
);
     ↓
jQuery(document).ready(
    function() {
        jQuery("#title").css("background-color","#ffffff");
    }
);
という感じになります。実際これはかなり面倒くさいですが、prototypeとjQueryが混じってしまうとコードを書きなおすよりはちょっと楽ということになります。特に Ajaxの魅力はそのプラグインなので、こういう手は使わないわけにはいかないんです。
 ここまでの設定で一応、コンフリクト回避ができます。

 このjQuery.noConflict()は、jQueryという文字列だけではなく任意の文字列に置換要請することも可能です。
<script type="text/javascript">  
jQuery.noConflict();  
var jq$ = jQuery;  

</script>
というふうに書いておくと、
jq$(document).ready(
    function() {
        jq$("#title").css("background-color","#ffffff");
    }
);
というふうに書けます。






プロフィール



  • Name :: 山上オサム ♂(39)
  • Hobby :: 武術
  • Work :: Web Designer