Avoiding Conflicts with Other Libraries(다른 라이브러리와 충돌 피하기)

기본적으로 jQuery는 $를 jQuery의 단축키로 사용합니다. 따라서 $ 변수를 사용하는 다른 JavaScript 라이브러리를 사용하고 있는 경우 jQuery와 충돌할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jib e gago sibda</title>
  <style>
  </style>
  <!-- prototype -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js" integrity="sha512-9Sxlz9DC2Z4SewnMV2jzeYr/N0psEmZRQAUk5cUpE3fLY2Ml32VsprA9PsKj+kT7OGUn+VZRstS+Z0bbtpH46g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- jquery -->
  <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
        alert("hello!!!");
    })

    window.onload = function(){
        var mainDiv = $("main");
    }
  </script>
</head>
<body>
  <div>hello</div>
</body>
</html>

오류 발생 : Uncaught TypeError: $(...).ready is not a function at ...

이러한 충돌을 피하려면 페이지에 로드된 jQuery를 사용하기 전에 jQuery를 논-컨플릭트 모드로 설정해야 합니다.

Putting jQuery Into No-Conflict Mode(논-컨플릭트 모드로 jQuery 설정하기)

jQuery를 논-컨플릭트 모드로 설정할 때는 $ 별칭을 대체할 새 변수 이름을 할당할 수 있습니다. 새 별칭은 jq, $J, awesomeQuery 등과 같이 원하는 대로 지정할 수 있습니다.

var $j = jQuery.noConflict();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jib e gago sibda</title>
  <style>
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js" integrity="sha512-9Sxlz9DC2Z4SewnMV2jzeYr/N0psEmZRQAUk5cUpE3fLY2Ml32VsprA9PsKj+kT7OGUn+VZRstS+Z0bbtpH46g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
  <script>
    var $j = jQuery.noConflict();

    $j(document).ready(function() {
      $j("div").hide();
    })

    // $ 변수는 이제 원래 라이브러리에서의 의미로 되돌아갑니다. 아래 mainDiv는 jQuery 객체가 아닌 DOM 요소입니다.
    window.onload = function(){
      var mainDiv = $("main");
      mainDiv.textContent = "bye~~";
    }
  </script>
</head>
<body>
  <div id="main">hello</div>
</body>
</html>

마지막으로, 전체 jQuery 함수 이름에 대한 다른 대안을 정의하지 않고 싶은 경우($를 사용하는 것을 좋아하고 다른 라이브러리의 $ 메서드를 사용하는 것을 신경 쓰지 않는 경우), 단순히 jQuery(document).ready() 함수에 전달된 인수로 $를 추가하면 됩니다. 이 방법은 여전히 매우 간결한 jQuery 코드의 이점을 원하지만 다른 라이브러리와의 충돌을 일으키고 싶지 않은 경우에 가장 자주 사용됩니다.

jQuery( document ).ready(function( $ ) {
    // ...
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jib e gago sibda</title>
  <style>
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js" integrity="sha512-9Sxlz9DC2Z4SewnMV2jzeYr/N0psEmZRQAUk5cUpE3fLY2Ml32VsprA9PsKj+kT7OGUn+VZRstS+Z0bbtpH46g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
  <script>
    jQuery.noConflict();

    jQuery(document).ready(function($) {
      // 여기서 지역 범위의 $를 jQuery의 별칭으로 사용할 수 있습니다.
      $("div").append("<div>sub content!!!</div>")
    })

    // 전역 범위의 $ 변수는 prototype.js의 의미를 갖습니다.
    window.onload = function(){
      var mainDiv = $("main");
      var newDiv = new Element("div", {id: "newDiv", class: "content"});
      newDiv.textContent = "prototype 예제얌"
      mainDiv.appendChild(newDiv);
    }
  </script>
</head>
<body>
  <div id="main">hello</div>
</body>
</html>

linkIncluding jQuery Before Other Libraries(jQuery를 다른 라이브러리보다 먼저 포함시키기)

지금까지 나온 예시 코드들은 prototype.js가 로드된 후에 jQuery가 로드되었다고 가정합니다. 반대로 다른 라이브러리보다 먼저 jQuery를 포함하는 경우, jQuery를 사용하여 jQuery 작업을 수행할 수 있지만 $는 다른 라이브러리에서 정의된 의미를 갖게 됩니다. jQuery.noConflict()를 호출하여 $ 별칭을 포기할 필요가 없습니다.

<!-- 다른 라이브러리보다 먼저 jQuery를 로드하는 방법 -->
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>

// jQuery 함수의 전체 이름을 사용하여 jQuery를 참조합니다.
jQuery( document ).ready(function() {
    jQuery( "div" ).hide();
});

// prototype.js에서 정의된 $ 변수 사용
window.onload = function() {
    var mainDiv = $( "main" );
};

</script>

Summary of Ways to Reference the jQuery Function(jQuery 함수를 참조하는 방법 요약)

다른 라이브러리가 $ 변수의 사용으로 인해 충돌을 일으킬 때 jQuery 함수를 참조하는 방법

linkCreate a New Alias(새로운 별칭 생성하기)

jQuery.noConflict() 메서드는 jQuery 함수에 대한 참조를 반환하므로 원하는 변수에 캡처할 수 있습니다:

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

// $를 prototype.js로 다시 돌려주고 jQuery에 대한 새 별칭을 만듭니다.
var $jq = jQuery.noConflict();

</script>

linkUse an Immediately Invoked Function Expression(즉시 호출 함수 표현식 사용하기)

표준 $를 계속 사용하려면 코드를 즉시 호출 함수 표현식으로 래핑할 수 있습니다. 이는 jQuery 플러그인 작성시 표준 패턴이기도 하며, 다른 라이브러리가 $를 사용하고 있는지 여부를 알 수 없는 상황에서 유용합니다.

<!-- 즉시 호출 함수 표현식 내에서 $ 사용 -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>

jQuery.noConflict();

(function( $ ) {
    // 여기에 jQuery 코드 작성, $ 사용
})( jQuery );

</script>

이 기술을 사용하는 경우 즉시 호출 함수 내에서 prototype.js 메서드를 사용할 수 없음에 주의하십시오. $는 jQuery를 참조하고 있으며 prototype.js가 아닙니다!

Use the Argument That's Passed to the jQuery( document ).ready() Function(jQuery( document ).ready() 함수에 전달된 인수 사용하기)

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

jQuery(document).ready(function( $ ) {
    // $를 사용하여 jQuery를 참조하는 여러분의 jQuery 코드 작성
});

</script>

또는 더 간결한 구문을 사용하여 DOM 준비 함수를 사용할 수 있습니다

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

jQuery(function($){
    // $를 사용하여 여러분의 jQuery 코드 작성
});

</script>

'Frontend > jQuery' 카테고리의 다른 글

The jQuery Object (1)	2024.03.29
Manipulating Elements(요소 조작) (0)	2024.03.26
Selecting Elements(요소 선택) & Working with Selections (0)	2024.03.20
Attributes (0)	2024.03.20