[스크립트] Prototype + jQuery + Sly 를 적절히 섞어 쓰기

Prototype, jQuery는 뭐 다들 아실거고,
Sly는 셀렉터 엔젠 입니다.
속도가 ㅎㄷㄷ~ 하게 빠르고, Prototype이나 jQuery에 물려서 쓸 수 있습니다.
그런데 jQuery에는 이미 나름 빠른 셀렉터 엔진이 탑재되어 있습니다.
따라서 굳이 jQuery의 셀렉터 엔진을 Sly로 쓸 이유는 없습니다.

반면에 Prototype은 불만중의 하나가 셀렉터 엔진의 성능인지라
Prototype의 셀렉터 엔진으로 Sly를 사용하도록 하면
불여우에서는 대략 십여배 정도의 향상이 있습니다.


일단,

Prototype + jQuery를 동시에 쓸 수 있도록 하기

<script type="text/javascript" charset="utf-8" src="bla~bla~/prototype.js"></script>
<script type="text/javascript" charset="utf-8" src="bla~bla~/jquery.js"></script>

이런 순서로 불러온 다음,

<script type="text/javascript" charset="utf-8">
//<![CDATA[
// jQuery가 $를 포기하고 $J를 사용하도록~
var $J = jQuery.noConflict();
//]]>
</script>

끝 났습니다. Prototype을 쓸 경우엔 그냥 $를 쓰면 되고,
jQuery를 쓰려면 $대신 $J를 쓰면 되겠습니다.

근데 왜 이 두개를 같이 써야 하는가!? 라고 물으신다면 뭐... 사용하기 나름 아니겠습니까? 대체적으로 Prototype으로는 인터페이스(클래스[객체], 컨스트럭터[?])의 구조적인 구현에 중점을 두어 구성을 하고, 적용이나 구현의 부분에서는 더 가볍고 씸플한 jQuery를 쓰는 정도로 쓰고 있습니다만, 활용하기에 따라 적절하게 잘만 사용하면 양쪽의 장점을 골고루 취할 수 있겠습니다.

이후에 주의 하실 점으로는, jQuery기반의 타 라이브러리를 같이 사용할 때, 물론 jQuery의 플러그인 구성 규칙을 지치면 이 문제가 없지만 그냥 막 만든건 $의 사용으로 인해서 Prototype과의 충돌이 날 수 있으니 jQuery기반의 스크립트에 있는 $를 $J로 변환해 주는걸 잊지 않으면 아무 문제가 없"읍"니다.


이단,

Prototype의 셀렉터 엔진을 Sly로 바꿔치기.

<script type="text/javascript" charset="utf-8" src="bla~bla~/prototype.js"></script>
<script type="text/javascript" charset="utf-8" src="bla~bla~/Sly.js"></script>
<script type="text/javascript" charset="utf-8" src="bla~bla~/jquery.js"></script>

<script type="text/javascript" charset="utf-8">
//<![CDATA[
// jQuery가 $를 포기하고 $J를 사용하도록~
var $J = jQuery.noConflict();

// Overriding CSS Selector Engine. - By firejune
Sly.handlers = Selector.handlers;
Sly.prototype.findElements = Sly.prototype.search;
Sly.findElement = function(elements, expression, index){
    Object.isNumber(expression) && (index = expression) && (expression = false);
    return Sly(expression || '*').filter(elements)[index || 0];
};
Sly.findChildElements = function(element, expressions){
    return Sly(expressions.join(',')).search(element);
};
Selector = Sly;
//]]>
</script>

끝 났습니다. 이제 호롯토타입에서 $('foo'), $$('.foo') 등등등을 사용할 때 Sly 가 대신 셀렉트를 해 드립니다. 특히나 등의 DOM기반의 구조를 훑어야 할 때 나름 성능이 쭉쭉~ 올라 갑니다. 어떤 경우엔 jQuery보다 더 빠른 결과를 나타내 주기도 하네요.













[결론]
막 섞어 쓰다가 혼동이 오면 더 고생 한다.

출처 : PHPSCHOOL