jQueryの基礎(3)

2011.07.26 22:39

Prototypeとの衝突を防ぐ

 Ajaxといえば何と言ってもprototypeっていう人も結構多いです。現に精巧にできているAjax関係のプラグインなんか見ててもプロトタイプが非常に多いです。専門的に見ればプロトタイプの方が断然優れているそうです。jQueryは突っ込んで開発すると結構いろいろ問題があるようですが、使い勝手の良さとか情報の多さからすれば素人に毛が生えたような私には背格好がちょうどよいのです。しかし、このprototypeとjQueryは基本的には衝突します。同じ変数を別のライブラリーで使うので双方互いに譲らない。しかし結局譲ったのはjQueryの方でした。特に問題なければ譲った方が無難です。 そんなわけで衝突を避けるための手段があります。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript"> 
    jQuery.noConflict(); 
    //var j$ = jQuery; 
</script>
という感じ。jQuery.noConflict();という特殊な関数といいますかAPIがあって、通常我々がみかける$マークをjQueryという文字列に置き換えて作動させます。ここではコメントアウトしていますが、$を特定の自分の好きな文字列に置き換えることもできます。
コメントアウト部分ではj$ということにしています。これを有効化すればj$でもきちんと作動します。何も設定しなければ、デフォルトでjQueryに置き換わったことを前提に作動します。
 最近のプラグインなんかの使用例なんか見ててもわりとjQueryでやっているのが多かったりするので、ちょっと未来にはこの形がデフォルトになるかもしれませんねぇ。形的には、
$(document).ready(function(){
    $("div").css("background-color","#00ff00");
});

jQuery(document).ready(function(){
    jQuery("div").css("background-color","#00ff00");
});
となります。結構これで衝突を避けられるんだったら、まあまあな感じです。








プロフィール



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