[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>