世の中には様々なJavascirptライブラリが存在していて、いくつかをあわせて使わざるをえない場合が出てきてしまいます。
もちろん、Javascriptライブラリを2つも3つも共存させるのは端からいい案とは思えないのですが、
そんな時の試してみる価値のある、解決策を紹介します。
例として、prototype.jsと共存することを考えます。
プラグインを利用しない場合は、下記のように書くとjQueryもprototype.jsもいつも通り利用することができます。
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
(function($){
$.('#hoge').css('color','#F00'); //無名関数の中だと$はjQueryとして振る舞う
})(jQuery);
$('myDiv').addClassName('fuga'); //無名関数の外だと"$"はprototype.jsとして振る舞う
</script>
</head>
言葉で書くと
- jQueryを読み込む
- 直後にjQuery.noConflict();を呼び出す（この時点で、window.$はjQueryから解放されます。）
- prototype.jsを読み込む
- jQueryは無名関数（クロージャ）の中で記述
- prototype.jsは無名関数の外で記述
となります。
実は下記に抜き出した部分がミソで、
(function($){
$('#hoge').css('color','#F00'); //無名関数の中だと$はjQueryとして振る舞う
})(jQuery);
書き方を変えれば
function hoge($){
$('#hoge').css('color','#F00');
}
hoge(jQuery);
としているのと同じこととなります。
いわゆるその場で無名関数の実行を行ってるわけですが、
その際に、無名関数に引数として「$」を指定し、jQueryをまるごと関数に渡してあげているわけです。
つまりは、jquery.jsの最後の方に書いてある
window.jQuery = window.$ = jQuery;
と結果的には同じ事ですね。
無名関数のクロージャについては「謎のjavascript、『(function (){})();』 | ぼくんちのバックステージ」が詳しくてわかりやすいです。興味ある方は是非。
話を戻して、プラグインを読み込む場合はどうでしょうか。
実は下記のようにしてもうまくいきません。
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.plugin.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
(function($){
$('#hoge').plugin();
})(jQuery);
$('myDiv').addClassName('fuga');
</script>
</head>
プラグインを読み込む場合、プラグイン自体には「jQuery」が渡らないので、うまくいきません。
こんな時は、プラグインの内容を下記のように囲ってしまえば良いのです。
(fucntion($){
//プラグインの内容
})(jQuery);
なんともいんちき臭い方法ですが、最初と最後にたった2行追加するだけで、うまく動く様になることが多いです。
そもそも上記で挟んであるプラグインの場合もあったりします。（その場合は、前述の方法で動くはずです。）
まとめると
- jQuery.noConflict();を呼び出したら(fucntion($){ })(jQuery);の中で書く。
- プラグインが動かなかったら上記でかこってみる。
の2点を試すのが、一番てっとり早くて、確実な方法かと思います。
今回はprototype.jsを例に話を進めましたが、mootoolesなど、他のJavascriptライブラリでも有効な方法なので、jQueryと他のJavascriptライブラリを共存させる必要がある際は試してみてください。
