【Javascript】他のコードとの衝突を避けるテクニック

ネームスペースを変えるテクニック

では、次にjQuery.noConflict()によるネームスペースの変更例を紹介します。

 

• 1 jQueryのみを使う(jQuery用$を使わない)
• 2 jQueryと新しいショートカット作成($jや$hogeなど)
• 3 DOM構築待機関数を利用したローカル処理(jQueryと関数内で$)
• 4 jQueryという名前自体を取り替える(hogeなど)
• 5 他のライブラリ内へ組み込む

 

【jQueryのみを使う(jQuery用$を使わない)】

<div>About noConflict</div>

<script type="text/javascript">

  jQuery.noConflict();

  //jQueryコード
  jQuery("div").css("color","gold");

</script>

→サンプル

noConflict()した場合

noConflict()を実行した結果、jQueryオブジェクトのみがjQueryのために使える状態になっています。

ただ、毎回jQueryと書くのは手間なので、次に、$に代わる短めの新しいショートカットを作成する方法です。

【jQueryと新しいショートカット作成($jや$hogeなど)】

<div>About noConflict</div>

<script type="text/javascript">

  $j=jQuery.noConflict();

  //jQueryコード
  $j("div").css("color","gold");

</script>

→サンプル

jQueryと新しいショートカット作成

好きな変数名(ここでは$j)へjQuery.noConflict()の戻り値(つまりjQueryオブジェクト)を代入することで、 新しいショートカットを作ります。

FireBugでDOM構成をみると、「jQuery」の他に新しいオブジェクト「$j」が生成されていることがわかります。 この名前は、「$hoge」でも「jq」でも構いません。

次に、jQuery( callback ) などの callback関数内でローカルオブジェクトとして$などのショートカットを利用するケースです。

【DOM構築待機関数を利用したローカル処理1】

<div>About noConflict</div>

<script type="text/javascript">

  jQuery.noConflict();

  //jQueryコード
  jQuery(function($){

    //このfunctionの第一引数はjQueryオブジェクトが
    //渡されますので引数名を利用した
    //ローカルなjQueryショートカットを使えます
    $("div").css("color","gold");

  });

</script>

→サンプル

DOM構築待機関数を利用したローカル処理1

DOM構築待ちのコールバック関数内で引数に書いた文字をローカルなショートカットとして自由に使えますが、ただし、 引数ですからこのメソッドの外では使えません。

このコールバックの外では、他のライブラリの「$」とぶつかりますので注意が必要です。

ここでは、引数に「$」を与えているので$("div")という具合に使えていますが、もし「$j」を与えれば $j("div")などと書くこともできます。

【DOM構築待関数を利用したローカル処理2】

<div>About noConflict</div>

<script type="text/javascript">

  jQuery.noConflict();

  //jQueryコード
  jQuery(document).ready(function($){

    //上のサンプルと同様です
    $("div").css("color","gold");

  });

</script>

→サンプル

DOM構築待機関数を利用したローカル処理2

前項の jQuery(function($){})は、この jQuery(document).ready(function(){}) の新しい書き方です。

注意点も、前項と同様です。

次に、「$」も「jQuery」も使わずに、jQueryをまったく新しい名前に変えてしまう方法です。

【jQueryという名前自体を取り替える(hogeなど)】

<div>About noConflict</div>

<script type="text/javascript">

  var newJq =jQuery.noConflict(true);

  //jQueryコード
  newJq("div").css("color","gold");

</script>

→サンプル

jQueryという名前自体を取り替える

jQueryも$もundefinedとなり、代わりにnewJqという名前でjQueryが動作しています。ただし、本来の名称jQuery を前提として製作されたプラグインなどが動作しなくなる恐れがありますから、使う場合は注意が必要です。

次に、他のライブラリのネームスペース内へ、jQueryを組み込んでしまう方法です。

【他のライブラリ内へ組み込む】

<script src="./yahoo.js">
<script src="./jquery.js">

<div>About noConflict</div>

<script type="text/javascript">

  //YUIのネームスペースを作成
  YAHOO.namespace("$");

  //YUIのネームスペース内へ新しいショートカットを作成
  YAHOO.$ =jQuery.noConflict(true);

  //jQueryコード
  YAHOO.$(function(){
    YAHOO.$("div").css("color","gold");
  });

</script>

→サンプル

他のライブラリ内へ組み込む

「$」と「jQuery」は未定義となり、YAHOOオブジェクトができています。

このYAHOOオブジェクトのツリーを開くと、右図のように 新しいショートカット「$」が、YAHOOオブジェクト直下に組み込まれていることがわかります。

このjQueryショートカットへは、「YAHOO.$」でアクセスすることができます。

なお、上のサンプルで説明したように、noConflictの引数は、 プラグイン利用時はtrueを書かず、「jQuery」のオブジェクト名だけは生かした方が安全かもしれません。