어떻게 jQuery와 다른 JS 라이브러리의 충돌을 해결합니까

4427 단어 jQueryJS 라이브러리충돌
jQuery 라이브러리에서는 거의 모든 플러그인이 이름 공간에 제한되어 있습니다.일반적으로 전역 대상은 jQuery 이름 공간에 잘 저장되어 있기 때문에 jQuery를 다른 JavaScript 라이브러리(예를 들어 Prototype, MooTools 또는 YUI)와 함께 사용할 때 충돌을 일으키지 않습니다.
참고: 기본적으로 jQuery는 $를 자신의 단축키로 사용합니다.
1.jQuery 라이브러리는 다른 라이브러리 다음에 가져옵니다.
다른 라이브러리와 jQuery 라이브러리가 불러오면 언제든지 jQuery를 호출할 수 있습니다.noConflict() 함수를 사용하여 변수 $의 제어권을 다른 JavaScript 라이브러리로 전달합니다.예는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 1</title>
<!--   prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!--   jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype( )</p>
<p >Test-jQuery( )</p>
<script type="text/javascript">
jQuery.noConflict();     // $ prototype.js
jQuery(function(){     // jQuery
 jQuery("p").click(function(){
  alert( jQuery(this).text() );
 });
});

$("pp").style.display = 'none';  // prototype.js 
</script>

</body>
</html>
그리고 프로그램에서 jQuery () 함수를 jQuery 대상의 제조 공장으로 사용할 수 있습니다.
또 다른 선택이 있다.jQuery가 다른 라이브러리와 충돌하지 않지만, 단축키를 사용자 정의하려면 다음과 같이 하십시오.

<script type="text/javascript">
var $j = jQuery.noConflict();   // 
$j(function(){      // jQuery
 $j("p").click(function(){
  alert( $j(this).text() );
 });
});

$("pp").style.display = 'none';  // prototype.js 
</script>
jq, $J, awesomequery 등 대체 이름을 사용자 정의할 수 있습니다.
이 대체 이름을 jQuery에 사용자 정의하지 않으려면 $를 사용하고 다른 라이브러리의 $() 방법을 막론하고 다른 라이브러리와 충돌하고 싶지 않으면 다음 두 가지 해결 방법을 사용할 수 있습니다.
하나:

<script type="text/javascript">
jQuery.noConflict();    // $ prototype.js
jQuery(function($){     // jQuery
 $("p").click(function(){  //  $  
  alert( $(this).text() );
 });
});

$("pp").style.display = 'none';  // prototype
</script>
둘째:

<script type="text/javascript">
jQuery.noConflict();     // $ prototype.js
(function($){      // $
 $(function(){     // $ jQuery
  $("p").click(function(){  //  $  
   alert($(this).text());
  });
 });
})(jQuery);       // jQuery

$("pp").style.display = 'none';  // prototype
</script>
최소한의 코드를 바꾸어 전면적인 호환성을 실현할 수 있기 때문에 가장 이상적인 방식이어야 한다.
2.jQuery 라이브러리는 다른 라이브러리 이전에 가져오기
만약 jQuery 라이브러리가 다른 라이브러리 이전에 가져왔다면, jQuery를 사용하여 jQuery 작업을 할 수 있습니다. 또한 $() 방법을 다른 라이브러리의 단축키로 사용할 수 있습니다. jQuery.noconflict () 함수를 호출할 필요가 없습니다. 예는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 5</title>
<!--   jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!--   prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype( )</p>
<p >Test-jQuery( )</p>

<script type="text/javascript">
jQuery(function(){ //  jQuery , "jQuery.noConflict()" 。
 jQuery("p").click(function(){  
  alert( jQuery(this).text() );
 });
});

$("pp").style.display = 'none'; // prototype
</script>
</body>
</html>
이러한 방법으로 충돌을 해결하면 프로젝트에서 jQuery를 안심하고 인용할 수 있습니다.
이상은 jQuery와 다른 JS 라이브러리의 충돌을 어떻게 해결하는지에 대한 상세한 내용입니다. jQuery JS 라이브러리의 충돌 해결에 관한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!
자바스크립트의 객체 생성 방법
백준 1978번: 소수 찾기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage