조회 수 9724 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

주로 오래된 프로젝트인 경우, 요즘의 자바스크립 대세인 jquery가 아니라 prototype.js라는 라이브러리로 작성된 경우가 많다. 

jQuery 이전의 대세는 단연 프로토타입이었다. 지금이야 대세허세 jQuery에 탈탈탈 털려버려 불쌍한 신세가 됐지만 불과 4년쯤 전까지는 왕좌에 앉아계셨다. ㅠㅠ

똑같이 $라는 함수를 사용하고, 셀렉터 사용이 제법 닮은 형태를 하고 있지만 당연히 둘의 내부구조가 다른 관계상 그냥 같이 쓰면 충돌이 난다.


prototypeVSjquery.jpg 

가일이 개털렸답니다


jQuery 공홈에서는 이 문제의 해결법을 제시해주고 있다

http://api.jquery.com/jQuery.noConflict/


<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

이전에 쓰던 라이브러리를 위에 놓고 바로 밑에다 $.noConflict();를 작성해주면 jQuery에서 $함수를 사용하지 않게 되며,

$의 사용은 먼저 불렀던 다른 라이브러리로 대체하게된다. 프로토타입의 $는 프로토타입으로 작동하고, jQuery의 $는 jQuery라고 다 써야만 동작한다는 것이다.

다시 말하자면 jQuery로 만들어져 $(“div p”)라고 쓰인건 다 jQuery(“div p”)라고 써야 한다는 이야기다.

기존에 작성된 jQuery의 플러그인을 저런 환경에서 가져와서 쓰고싶을 경우 소스의 $를 죄다 jQuery로 변환해줄 필요가 있을 것이다.


jQuery.noConflict();
// jQuery라고 쓰면 그대로 동작한다.
jQuery("div p").hide();
// $함수는 jQuery가 아닌 다른 라이브러리에 정의된 $로 동작된다.
$("content").style.display = 'none';





사실 XE의 공홈에서 글을 읽으며 놀고있던 중에 XE에서 jQuery의 $를 쓸 때에 대한 문제 란 글을 읽고 새삼스레 적게된 글이다. 


지금까지 왜 애드온랑 스킨이랑 위젯이 충돌나서 난리 부르스를 치는지 이걸 보고 겨우 깨달았다. 설마했는데...

XE도 jQuery보다 역사가 쪼끔 더된 물건인지라 $를 딴데서 쓰는 경우가 있나보다.... 

XE는 $로 쓰면 jQuery로 인식하지 못한다. 근데 지금까지 이걸 난 모르고 있었다! ㅋㅋㅋ

덕분에 그동안 XE에서 모듈이나 스킨 js 꼬이는 현상을 발견하고 고칠 수가 있었다....$.noConflict(); !


XE core의 jQuery.js를 불러와서 jQuery를 사용하여 만들어진 것과 그냥 jQuery.js를 따로 넣어서 $를 사용해 만들어 버린걸 한페이지에서 불러왔을때 양쪽에서 충돌이 터진건 당연한 것이었다. 맙소사! 

잘 보고 자기 편한쪽으로 고쳐야한다ㅋㅋ 내 경우는 jQuery를 두개나 부르는 짓이 잉여스러워서 $를 보고 jQuery로 바꾸는 작업을 하지만

반대로 하더라도 해결되므로 상관없다. (근데 XE에서 $가 뭐로 쓰이고 있길래 아직도 막아놓는거지? 설마 멸종당하고 있는 프로토타입이 나타날까봐 겁나서인가?)


이상.


List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
61 Zabbix Zabbix 아이템의 패시브와 액티브의 이해 JONG 2017.03.22 2230
60 Zabbix Zabbix 3.0에서 3.2로 업데이트하기 JONG 2016.10.03 2961
59 XpressEngine Rhymix에서 설치 화면이 나오지 않을 때 (CentOS7) 1 JONG 2016.03.25 3549
58 Zabbix CentOS7에 Zabbix 3.0.1 설치하기 JONG 2016.03.12 7491
57 Zabbix Zabbix의 각 프로세스가 하는 일 file JONG 2016.03.10 6670
56 Web 윈10에서 spartan이 localhost를 씹을때 JONG 2015.06.04 3869
55 Web animate의 속도를 빠르게 해주시는 Velocity.js 소개 1 file JONG 2014.08.27 7810
54 Web jQuery를 이용한 테이블 셀병합 JONG 2013.11.01 18721
53 XpressEngine XE 1.5.4.2 BlogAPI 안되는거 수정하는 코드 2 JONG 2013.10.29 7819
52 Web Youtube 동영상 자동재생으로 퍼담기 & 파라메터 JONG 2013.03.19 11625
51 XpressEngine XE 1.5.4.2 추천 & 비추천 기능을 비회원도 사용가능하게 하기 1 file JONG 2013.03.06 10741
50 Web 문서의 앵커 이동을 Smooth하게 스크롤 해주는 jQuery의 animate함수 사용법 JONG 2012.12.26 18620
49 Web Google Maps API v3에서 기본 infowindow 정보 없애기 (poi) JONG 2012.12.26 11124
48 Web 셀렉트 태그 관련 jQuery코드 정리 1 JONG 2012.11.17 10201
47 Web 화면 최상단으로 움직이는 JS 소스 JONG 2012.10.15 10414
46 XpressEngine XE 모바일에서 유투브 동영상크기 고정하기 3 JONG 2012.09.07 10768
» Web jQuery와 다른 라이브러리 (prototype 등) 를 함께 쓰는 방법 file JONG 2012.09.02 9724
44 Database MSSQL 스키마 비교 프로그램 Open DBDiff file JONG 2012.08.15 15198
43 XpressEngine Social XE 로그인을 모바일 레이아웃에 추가 file JONG 2012.08.15 9995
42 Web .htaccess 작성을 통한 이미지 펌 방지 file JONG 2012.05.04 13016
Board Pagination Prev 1 2 3 4 Next
/ 4