jQuery는 $ 기호를 jQuery의 약어로 사용합니다.
다른 JavaScript 프레임워크에서도 $ 기호를 약어로 사용하면 어떻게 되나요?
다른 JavaScript 프레임워크에는 MooTools, Backbone, Sammy, Cappuccino, Knockout, JavaScript MVC, Google Web Toolkit, Google Closure, Ember, Batman 및 Ext JS가 포함됩니다.
이러한 프레임워크 중 일부는 $ 기호를 단축 기호로 사용합니다(jQuery와 마찬가지로). 동일한 단축 기호를 사용하는 두 개의 서로 다른 프레임워크를 사용하는 경우 스크립트 실행이 중지될 수 있습니다.
jQuery 팀은 이 문제를 고려하여 noContribute() 메서드를 구현했습니다.
noConstrict()의 역할
noConstrict()의 역할은 단 하나의 목적으로만 존재합니다. 즉, 동일한 페이지에 여러 jQuery 인스턴스, 특히 다양한 버전의 jQuery를 로드할 수 있도록 해줍니다. 한 페이지에 여러 다른 버전의 jQuery 객체를 로드/사용해야 하는 이유가 무엇인지 궁금할 것입니다. 일반적으로 두 가지 상황이 있습니다. 첫 번째 경우에는 비즈니스 코드가 최신 버전의 jQuery 라이브러리를 사용하고, 선택한 타사 플러그인은 이전 버전의 jQuery 라이브러리에 의존합니다. 두 번째 경우에는 이미 있는 시스템을 유지 관리하고 있습니다. 비즈니스 여러 가지 이유로 코드는 이전 버전의 jQuery 라이브러리를 참조하고 새로 개발된 모듈은 다른 버전의 jQuery 라이브러리를 사용합니다. 두 경우 모두 jQuery 개체/메서드 충돌 문제에 직면해야 합니다. 다행스럽게도 jQuery.noConstrict()는 이 문제를 해결하는 데 도움이 됩니다.
jQuery noConstrict() 메서드
noConstrict() 메서드는 $ 식별자에 대한 제어를 해제하여 다른 스크립트에서 사용할 수 있도록 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery在工作!");
});
});
</script>
</head>
<body>
<p>看我的变化</p>
<button>点我</button>
</body>
</html>약어를 전체 이름으로 바꿔 jQuery를 사용하세요.
자신만의 약어를 만들 수 있습니다:
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});jQuery 코드 블록이 $ 단축키를 사용하고 이 단축키를 변경하고 싶지 않은 경우 $ 기호를 Ready 메소드에 변수로 전달할 수 있습니다. 이 방법으로 함수 내부에서 $ 기호를 사용할 수 있지만 함수 외부에서는 여전히 "jQuery"를 사용해야 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("这是覆盖的文字");
});
});
</script>
</head>
<body>
<p>这是一段文字</p>
<button>点击显示</button>
</body>
</html>
