noConflict()を使って、「$」という関数名が名前衝突するのを避ける


スポンサーリンク

「$」というのは、jQueryではjQueryエイリアスとして使われます。
jQuery関数を呼び出すものとして、「$」を使うわけです。

この「$」という文字を、jQuery関数とは別の関数にひもづけるためにはどうしたらいいでしょうか。

それは、noConflict関数を使います。
これはjQueryコードを名前衝突することなしに使う方法です。

この関数を実行すると、$関数の動作が先に定義されている動作に戻る。

$関数はprototype.jsなどをはじめ、多くのライブラリがそれぞれ拡張している関数である。
jQueryでも、核となるjQueryオブジェクトのショートカットして極めて頻繁に利用される。
このコマンドは、そのような$関数を定義する複数のライブラリを用いた際に衝突することを防ぐものである。
noConflictを使った場合、jQueryオブジェクトの呼び出しには明確に'jQuery'と書く必要がある。
例えば$(“div p”)と書いていたものも、jQuery(“div p”)と書かなければならない。

http://semooh.jp/jquery/api/core/jQuery.noConflict/_/

サンプルは、以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>$を別の関数として使ってみる</title>

<script src="js/jquery-1.11.1.js"></script>
<script>

$(document).ready(function() {
$.noConflict();

	$ = function(name) {
		alert('Hello ' + name + ' are non jQuery!');
	};

	var clickHandler = function() {
		$('TEST');
	};

	(function($) {
		$('p').click(clickHandler);
	})(jQuery);

});

</script>

</head>
<body>
<p>jQueryのコードとjQuery以外のコードを一緒に使ってみよう!この文字をクリックしてね</p>


</body>