2010-05-18 6 views
1

대부분의 JavaScript 프레임 워크에서 눈치 챘던 점은 DOM 요소를 찾고 액세스하는 가장 일반적인 방법은 CSS 선택기를 사용하는 것입니다.CSS 선택기를 사용하지 않는 JS 프레임 워크?

그러나 일반적으로이 프레임 워크는 CSS 선택기 파서를 포함해야합니다. 선택기를 지원해야하기 때문에 브라우저가 기본적으로 독점적 인 확장을 소유하지 않기 때문입니다.

나는이 파서가 크고 느리다 고 생각할 것이다. 파서를 필요로하지 않는 무언가를 갖는 것이 더 효율적이지 않겠는가?

일부 같은 :

id("example").children().class("test").hasAttribute("href") 

대신

$("#example > .test[href]") 

의 주위에 어떤 프레임 워크는 이런 일이 할 수 있습니까? 그리고 성능과 크기면에서 jQuery와 친구들과 어떻게 비교합니까?

편집 : 이론적 토론 주제로 간주 할 수 있습니다. 가까운 jurery에서 실제 프로젝트에서 jQuery 이외의 다른 것을 사용할 계획은 없습니다. 왜 다른 방법이 없는지 궁금 해서요.

+4

나는 propriatory *가 아니라 proprietary *를 의미한다고 생각합니다. 내 말은, 나는 아직 아무 것도 할 수없는 단일 틀을 보지 못했다. :) – Robusto

답변

3

DOM 통과 및 조작은 브라우저 간 문제를 효율적으로 처리하는 방식 때문에 현재 널리 사용되는 JavaScript 프레임 워크에서 가장 유용한 기능 중 일부입니다. DOM을 사용하여 작업하는 경우 결국에는 해당 기능이 필요하며 직접 작성하는 모든 것은 최상의 방법보다 효율적이지 않습니다.

속도면에서 볼 때 선택기를 구문 분석 할 때 약간의 성능 저하는 엔진 고유의 최적화에 의해 상쇄 될 것이라고 생각합니다. 프로그래머가 경로를 지정하여 (예 : 예를 들어) 의존한다면, 존재하지 않았던 최적화 기회를 놓칠 수 있습니다. 예를 들어, 예를 들어 오른쪽에서 왼쪽으로 궁극적으로 더 빠르다고 가정 해 봅시다 (먼저 모든 href를 찾아 부모를 확인하십시오). 이러한 최적화 단점을 외우려면 프로그래머를 의지해야합니다.

+0

크로스 브라우저가이 문제에 포함되지 않는다고 생각합니다. 내가보기에 파싱은 첫 단계 일뿐입니다. 선택기를 이해/파싱 한 후에는 요소를 찾아야하고 두 방법 모두 비슷한 (동일한?) 방법을 사용한다고 말할 수 있습니다. 가장 큰 차이점은 선택기 (한 쪽에서 문자열 파싱, 다른 쪽에서 객체와 메서드 호출)을 이해하는 것입니다. – RoToRa

+1

$ ("div span : first-child")는 CSS 의사 선택기가 구현되지 않았지만 IE6에서 작동합니다. 이것이 브라우저 간 문제를 모호하게 만드는 것을 의미합니다. 당신이 무슨 뜻인지 확실하지? – Andrew

+0

내가 말하는 것은 파서가 어떤 브라우저를 실행하든 상관없이 브라우저가 지원하는 기능과 상관없이 동일한 기능을 수행한다는 것입니다. 파이어 폭스 (예를 들어)는': first-child'를 지원하지만 셀렉터는 파서가 분석 될 때까지 브라우저가 셀렉터를 지원하는지 여부를 판단 할 방법이 없기 때문에 라이브러리가 파싱해야한다. 내 이론적 인 라이브러리에서는 대신. 아무것도 아무것도 구문 분석하지 않고도 브라우저의 기능을 즉시 활용할 수있는'.Child()'메소드를 사용합니다. – RoToRa

3

얼마나 오래인지 유의하십시오. 모든 사람들은 이유에 따라 CSS 스타일 선택기를 사용합니다.

jQuery의 Sizzle 라이브러리는 파서 속도에 최적화되어 있으므로 걱정할 필요가 없습니다.

+0

글쎄, 나는 그 부족이 항상 더 좋다고 생각하지 않는다. 제 예제가 훨씬 더 읽기 쉽다고 생각합니다. 그리고 Sizzle이 빠르다는 것을 알고 있습니다. 나는 비 파서 솔루션이 더 빨라질지를 궁금해하고 있습니다. – RoToRa

+0

jQuery 버전은 적어도 읽을 수 있어야합니다. – DisgruntledGoat

1

필자가이 라이브러리 (또는 JQuery atleast)에서 가능한 경우 브라우저의 기본 기능을 사용하고 있습니다. 즉, 가능한 경우 간단한 ID와 클래스를 사용하여 최소한의 영향으로 CSS 선택기를 사용할 수 있습니다.

개인적으로 나는이 라이브러리의 속도 문제를 전혀 눈치 채지 못했습니다. 웹 응용 프로그램을 만들 때 거의 모든 속도 문제는 네트워크 통신에서 발생하므로 응용 프로그램의 응답 속도를 향상시키는 가장 좋은 방법은 서버에 대한 쿼리 수를 줄이는 것입니다.

예를 들어 JSON을 사용하면 많은 쿼리를 작성하지 않고 한 번에 더 많은 데이터를 전달하고 저장할 수 있습니다 (일부는 필요하지 않을 수도 있음).

CSS 선택기는 코드 가독성과 장기 유지 관리를 훨씬 쉽게하고 코딩 시간을 단축시킵니다. 앤드류 (Andrew)가 말했듯이이 라이브러리는 브라우저 간 문제를 다루기 때문에 탈모 속도가 훨씬 느립니다.

관련 문제