今さら…。jQueryとprototypeの共存とか…。

私は最近はもっぱらjQueryしか使ってないのですが、4〜5年前のトレンドというか、なんというか、prototype派の人もいたわけですよ。

でですね。

「prototype使ってて、今後はjQueryに移行したいけど、今の段階だとprototypeも残したい」みたいな案件もあるんですねぇこれが。

prototype使ってるhtmlにそのままjQuery入れると、”$”が共通して使用しているため、競合してしまってどっちかが動かないか、もしくは両方全く動かない状態に陥ります。

じゃーどうしましょう。

こーしましょう。
まず、prototype.jsから読み込みをします。
で、noConflictの記述をします。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/jquery-x.x.x.js"></script>
<script>
jQuery.noConflict();
var j$ = jQuery;
</script>

上記まで書けたら、解決までほぼ完了。

と言いたいところですが、jQueryで使用している”$”を全て”j$”にする必要があります(jQueryのソースファイルじゃなくて、プラグインで使用している”$”です)。

例えば、jQueryでスクロールを制御しているのであれば、

[javascript]
$(function(){
$(‘a[href^=#]’).click(function() {
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? ‘html’ : href);
var position = target.offset().top;
});
return false;
});
});
[/javascript]

と上記のように書いてあったとして、それを下記のように書き換えます。

[javascript]
j$(function(){
j$(‘a[href^=#]’).click(function() {
var href= j$(this).attr("href");
var target = j$(href == "#" || href == "" ? ‘html’ : href);
var position = target.offset().top;
});
return false;
});
});
[/javascript]

とりあえず全部の”$”を”j$”にすりゃOKです。”$”を”j$”に全置換したらいいんじゃないかしら。

これで競合せずにjQueryとprototypeが使用できるようになります。

でもまーぶっちゃけ、jQueryとprototypeを両方使うなんて普通に考えたらしないんだけど、案件次第でさ…。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください