[jQuery] jQuery $ 식별자 중복으로 충돌 방지하기

jQuery $ 식별자 충돌 방지하기

jQuery는 $.each()와 같이 $ 식별자를 주로 사용합니다. 그런데 여러 자바스크립트 라이브러리를 사용하다 보면 이 $ 식별자를 사용하는 다른 라이브러리와 겹칠 수가 있습니다.

예를 들어 PrototypeJS 라이브러리도 jQuery와 같이 $ 식별자를 사용하는데 둘 중 하나는 $ 식별자를 사용할 수 없게되는 문제가 있습니다.

다음과 같이 jQuery를 먼저 불러오고 prototype.js를 나중에 불러오면 prototype.js가 $ 식별자를 점유하게 되면서 jQuery의 함수였던 $.each()를 존재하지 않는 함수가 되어버립니다.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="prototype.js"></script> //prototype.js가 jQuery의 $를 겹쳐쓴다.

<script>
  var arr = ['a', 'b', 'c', 'd', 'e'];

  $.each(arr, function(k, v){ //$.each is not a function (jQuery의 $.each 사라짐)
    console.log(v);
  });
</script>

반대로 jQuery가 $를 점유하게 되면 jQuery를 사용하는데에는 문제가 없지만 prototype.js의 $ 식별자를 사용할 수 없게됩니다.

<script src="prototype.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
  var arr = ['a', 'b', 'c', 'd', 'e'];
  $.each(arr, function(k, v){
    console.log(v);
  });
</script>

jQuery의 noConflict() 함수로 충돌 제거하기

jQuery는 이런 사태를 대비해 noConflict() 함수를 제공합니다. 아래와 같이 $.noConflict()를 실행하면 그 이후로부터는 $ 식별자를 대신해서 jQuery라는 식별자를 사용하게 됩니다.

이렇게 되면 prototype.js는 그대로 $ 식별자를 사용하면서 jQuery는 jQuery 식별자를 통해 사용 가능합니다.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
  $.noConflict(); //이때부터 jQuery는 $ 식별자를 포기하고 jQuery() 를 사용함
</script>

<script src="prototype.js"></script>

<script>
  var arr = ['a', 'b', 'c', 'd', 'e'];

  jQuery.each(arr, function(k, v){ //jQuery 식별자 사용
    console.log(v);
  });
</script>

jQuery 식별자 $ 대신 다른 것 사용하기

식별자 충돌을 방지하고자 jQuery의 식별자를 $를 포기하게 되면 jQuery라는 식별자를 사용해야 하는데 함수를 호출할때마다 jQuery를 모두 써줘야 하므로 불편할 수 있습니다.

jQuery.each(...);
jQuery('#myInput').val(...);

이럴때는 식별자를 변경해주어 사용하도록 합니다. $.noConflict() 선언 이후에 식별자를 _$로 할당했습니다. 이후에는 _$를 통해 jQuery 함수를 사용하고 $ 식별자를 통해 prototype.js 함수를 사용할 수 있습니다.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
  $.noConflict();
  var _$ = jQuery //식별자 변경
</script>

<script src="prototype.js"></script>

<script>
  var arr = ['a', 'b', 'c', 'd', 'e'];

  _$.each(arr, function(k, v){ //변경한 식별자로 jQuery 함수 사용
    console.log(v);
  });
</script>