jQueryコンフリクト対策
他ライブラリとの併用時の衝突回避方法
jQuery
jQuery
jQuery.noConflict();
jQuery(function () {
// jQuery処理
jQuery('body').append('Hello World');
});
// 他コード処理
スコープ
jQuery
jQuery.noConflict();
(function($) {
$(function () {
// jQuery処理
$('body').append('Hello World');
});
})(jQuery);
// 他コード処理
エイリアス
jQuery
var j = jQuery.noConflict();
j(function () {
// jQuery処理
j('body').append('Hello World');
});
// 他コード処理
オブジェクト
jQuery
var dom = {};
dom.query = jQuery.noConflict(true);
dom.query(function () {
// jQuery処理
dom.query('body').append('Hello World');
});
// 他コード処理
異なるバージョンのjQueryを使う。
HTML
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script>
// バージョン
$(function () {
// 2.2.3
console.log($.fn.jquery);
});
var j = jQuery.noConflict();
j(function () {
// 1.12.3
console.log(j.fn.jquery);
});
$(function () {
// 2.2.3
console.log($.fn.jquery);
});
</script>
1つしかjQueryを読み込んでいないのに、コンフリクト回避を行うとエラーが発生する。
HTML
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script>
// TypeError: $ is undefined
$(function () {
console.log($.fn.jquery);
});
var j = jQuery.noConflict();
j(function () {
console.log(j.fn.jquery);
});
</script>
1つでも2つでもエラーを発生させない。
HTML
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script>
;(function($) {
$(function () {
// 1.12.3
console.log($.fn.jquery);
});
})(jQuery);
</script>
HTML
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script>
;(function($) {
$(function () {
// 2.2.3
console.log($.fn.jquery);
});
})(jQuery);
</script>
