다른 라이브러리와의 충돌을 피하기 위해 jQuery에서 $를 사용하는 방법_jquery

Jquery에서 $는 JQuery의 별칭입니다. $가 사용되는 모든 위치는 JQuery로 대체될 수도 있습니다. 예를 들어 $('#msg')는 JQuery('#msg')와 동일합니다. 그러나 여러 js 라이브러리를 도입하고 $ 기호가 다른 js 라이브러리에도 정의되어 있으면 $ 기호를 사용할 때 충돌이 발생합니다. 다음은 jquery.js와 Prototype.js라는 두 개의 라이브러리 파일을 도입한 예입니다.
첫 번째 경우: jquery.js는 다음과 같이 프로토타입.js 다음에 도입됩니다.

adf3c3edb2b5b3fb3dba6da0f754db51c07feab95c3a7303446b1b85f12feab6 이 경우 js 코드에 다음을 작성합니다.

$('#msg').hide(); 

$는 항상 jquery에 정의된 $ 기호를 나타내며 JQuery('#msg').hide();로 작성할 수도 있습니다. 프로토타입.js에 정의된 $를 사용하려면 나중에 소개하겠습니다.

두 번째 경우: jquery.js는 다음과 같이 프로토타입.js보다 먼저 도입됩니다.

<script src="jquery.js" type="text/javascript"/>
 <script src="prototype.js" type="text/javascript"/> 

이 경우 js 코드에 다음을 작성합니다.

$('#msg').hide(); 

$는 이때 프로토타입.js에 정의된 $ 기호를 나타냅니다. jquery.js에서 팩토리 선택 함수를 호출하려면 JQuery('#msg').hide()라는 전체 이름만 사용할 수 있습니다.

다음에서는 js 라이브러리 파일을 도입하는 첫 번째 경우, 서로 다른 js 라이브러리에 정의된 $ 기호를 올바르게 사용하는 방법을 먼저 소개합니다.

1. JQuery.noContribute()를 사용하세요
이 메서드의 기능은 Jquery가 $의 소유권을 포기하고 $의 제어권을 프로토타입.js에 반환하도록 하는 것입니다. jquery.js가 나중에 도입되었기 때문에 최종적으로 $에 대한 제어권을 갖게 되는 것은 jquery입니다. 반환 값은 JQuery입니다. 코드에서 이 메서드를 호출한 후에는 $를 사용하여 jquery 메서드를 호출할 수 없습니다. 이때 $는 프로토타입.js 라이브러리에 정의된 $를 나타냅니다. 다음과 같습니다:

JQuery.noConflect();//여기서 $('#msg').hide()를 더 이상 작성할 수 없습니다. 이때 $는 프로토타입.js에 정의된 $ 기호를 나타냅니다. JQuey('#msg').hide()

이후부터 $는 프로토타입.js에 정의된 $를 나타냅니다. jquery.js의 $는 더 이상 jquery.js, JQuery에서 $의 전체 이름만 사용할 수 있습니다.
jQuery를 충돌 없음 모드로 설정한 후 $에 대한 별칭을 설정할 수 있습니다:

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>

여전히 jQuery의 $를 계속 사용하려면 자체 실행 함수에 코드를 포함해야 합니다. 이는 일부 jQuery 플러그인 작성자 사이에서도 일반적인 관행입니다. 왜냐하면 이러한 작성자는 다른 라이브러리가 작동하는지 모르기 때문입니다. 프로젝트에서 참조:

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();

(function($) {
  // 这里依然可以继续使用 jQuery 的 $
})(jQuery);
</script>

2. JQuery 별칭 사용자 정의 첫 번째 방법에서 JQuery.noConstrict() 메서드를 사용한 후 JQuery의 전체 이름만 사용하는 것이 번거롭다면 JQuery의 별칭을 재정의할 수도 있습니다. 다음과 같습니다:

var $j=JQuery.noConflict(); $j('#msg').hide();//此处$j就代表JQuery 

이제부터 $는 프로토타입.js에 정의된 $를 나타냅니다. jquey.js의 $는 더 이상 jquey.js의 JQuery 별칭으로 사용할 수 없습니다.

3. 명령문 블록을 사용하고 다음과 같이 명령문 블록의 jquery.js에 정의된 $를 계속 사용합니다.

JQuery.noConflict(); JQuery(document).ready(function($){ $('#msg').hide();
//此时在整个ready事件的方法中使用的$都是jquery.js中定义的$. }); 

또는 다음 명령문 블록을 사용하세요.

(function($){ ..... $('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) 

js 라이브러리 파일 순서를 도입하는 두 번째 경우인 jquery.js에서 $를 사용하는 방법은 위에서 소개한 다음과 같은 명령문 블록 방법을 계속 사용할 수 있습니다.

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> 

(function($){ 
..... 
$('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. 
})(JQuery) 
</script>

코드

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> (function($){ ..... $('#msg').hide();
//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) </script>

이런 문장 블록 활용 방법은 우리가 직접 jquery 플러그인을 작성할 때, 특정 작업 과정에서 다양한 js 라이브러리를 순차적으로 도입하는 방법을 모르기 때문에 이 작성 방법을 사용해야 합니다. 이런 종류의 진술 블록 쓰기 방법은 충돌을 막을 수 있습니다.