일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- mssql
- spring
- 자동빌드
- java
- DevOps
- poi
- 대용량 업로드
- ORM
- jqGrid
- rabbitmq
- sqlserver
- 자바8
- 스트림
- docker
- 보안
- JPA
- mom
- 엑셀 업로드
- Stream
- stream api
- 제이쿼리그리드
- JQuery
- Jenkins
- apache.poi
- 자동배포
- Javascript
- ci/cd
- MessageQueue
- QueryDSL
- 그리드
- Today
- Total
개발 메모장
[jQuery] noConflict - 식별자 중복, 이중 jQuery 충돌 방지 본문
#. 개발한 내용이 jQuery 3 버전대에서만 처리되는 것이 있었습니다.
#. 그러나 기존 개발베이스는 jQuert 1 버전대를 사용하고 있었고 이미 개발되어있는 것이었기에 3 버전대로 변경하면 문법 및 존재하지 않는 기능 오류를 뱉어대는 것이었습니다.
#. 확인해 보니 새로 개발한 내용이 1 버전대에선 정상적으로 처리되지 않았습니다.
#. 그래서 찾아보던 중 이중으로 사용이 가능하다고 하여 noConflict 기능을 사용해 봤습니다.
#. noConflict()
- 기본 jQuery의 식별자는 $ 기호로 $("#ID") , $.ajax, $.each() 등과 같이 사용하게 됩니다.
- 그러나 식별자가 $인 다른 라이브러리를 같이 사용하고자 할 때 덮어 써지면서 기존 라이브러리 기능을 온전히 사용할 수 없게 됩니다.
(대표적으로 jQuery와 protoType.js가 동일 식별자를 사용 - $)
<script type="text/javascript" src="경로/jquery-3.6.0.min.js"></script>
<script src="prototype.js"></script>
<script>
$.ajax({
url : 'test.do'
})
</script>
- 위와 같이 jQuery가 먼저 선언됐고 protoType.js가 이후 선언됐다면 jQuery에서 사용하는 기능들을 제대로 실행할 수 없습니다.
#. noConflict()로 구분할 식별자 설정하기
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<script>
$.noConflict(true);
</script>
<script src="prototype.js"></script>
<script>
jQuery.ajax({
url : 'test.do',
dataType : 'JSON',
...
})
</script>
- 이렇게 작성하면 jQuery를 충돌되지 않게 설정하였고 이로 인해 디폴트 값인 jQuery가 $ 대신 식별자로 사용됩니다.
#. jQuery를 상이한 버전으로 사용해야 할 때
- 이때에도 사용방법은 동일합니다.
- 나의 경우 임포트한 페이지에서 1 버전대를 선언해 두었고 실제 사용할 페이지에서 3 버전대를 선언하였습니다.
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<script>
var $test = jQuery.noConflict(true);
$test.ajax({
url : 'test.do'
});
</script>
- 이렇게 작성하면 기존의 1 버전대 jQuery는 $ 식별자를 그대로 사용하게 되고 3 버전대는 $test를 $ 대신 붙여 사용할 수 있습니다.
===========================================================
틀린 내용이 있거나 이견 있으시면 언제든 가감 없이 말씀 부탁드립니다!
===========================================================
'Java Script' 카테고리의 다른 글
[jQuery] jqGrid 사용방법(정의 및 속성)(1/2) (1) | 2023.12.29 |
---|---|
[React] React 연동(VS Code) 및 Spring Tools Suite 연동 (1) | 2023.12.21 |
[React] Node.js 및 React 설치하기 (0) | 2023.12.20 |
[Ajax] 발생시킨 예외 처리 문구로 Alert 띄우기 (0) | 2023.11.24 |
[JavaScript] 비밀번호 정규식 및 유효성 검사 (0) | 2023.11.22 |