jQuery에서 모든 선택자에 [name = X]를 사용하는 것은 나쁜 생각입니까?

Question

백본을 사용하고 있으며 바인딩 된 HTML 요소와 그렇지 않은 HTML 요소를 구별하는 방법을 원한다고 결정했습니다.

그래서 (HAML에) 작성합니다

.container 
    .title(name='title') 
    .separator 

을 당신이 동적 요소는 제목입니다 분명하다 볼 수 있듯이.

이유는 스타일을 바꾸고 클래스 이름을 변경하고 앱을 깨뜨리지 않아도된다는 것입니다. 또한 템플릿에서 백본보기로 앞뒤로 이동할 필요없이 동적 요소가 무엇인지 알 수 있습니다.

코드에서이 요소를 참조하려면 $('[name=title]', this.el)을 사용합니다. 나는 이것이 느리고 모든 곳에서 사용된다면 눈에 띄는 문제가 될지 궁금합니다. 나는 id이 가장 빠릅니다. id이 비현실적인 항목 목록을 사용하고 있습니다. class은 (는) name과 어떻게 다릅니 까?

또한 HTML 템플릿의 동적 요소를 추적하는 방법에 대한 제안이 있으면 듣고 싶습니다. 참고로

---

:

• 내가 원래 동적 요소에 대한 data-bind 속성을 사용 Backbone.ModelBinding 플러그인을 사용했기 때문에 나는 아이디어를 얻었으나, 지금은 그것에서 멀리 이동하고있다.

• 저는 CoffeeScript, Backbone 및 haml_ 커피 템플릿을 사용하고 있습니다.

• 또한 $(this.el).find('[name=title]')은 선택기에 컨텍스트를 제공하는 것보다 빠릅니다.

---

후속 질문 :

A convention for indicating whether an HTML element is referenced from JS code

업데이트 jsperf 모든 제안을 테스트합니다 :

http://jsperf.com/class-or-name-attr-lookup/3

Answer 1

댄 조금 느려질 수 있습니다

(나는 일부 브라우저는 DOM 노드의 부분 집합 만 문서의 일부에 getElementsByTagName를 호출 할 수 있다고 생각하기 때문에 나는 가능한 경우 말) JQuery가 사용하는 선택기 엔진 인 Sizzle의 필요성 때문에 - 셀렉터를 구문 분석하여 정확히 무엇을 찾아야할지 결정해야합니다. Sizzle은 "[name = title]"문자열에서 우선 검색 할 모든 요소의 "name"속성을 살펴볼 필요가 있고 해당 속성의 값은 정확하게 "title"이라고 판단해야합니다. 나는 Sizzle이 매우 빠르다는 것을 읽었지 만 DOM 엘리먼트 속성 (class.className) 값에 대한 네이티브 자바 스크립트 호출보다 느릴 것이라고 추측 할 수있다.

나는 의심을 확인하기 위해 perf : http://jsperf.com/class-or-name-attr-lookup을 만들었습니다. 결과는 .find 및 .children 호출에서 의심되는 것이 아니지만 위에서 언급 한 내용은 처음 두 예제에서 지원되는 것으로 보입니다. 그러나 가장 구체적인 선택기를 사용할 때 프로덕션 코드에서 성능이 향상되는 것을 보았습니다. .find 대신 .children - 불필요한 요소를 반복하지 않으므로.

또한 간단한 선택기 구문과 좀 더 애매한 및/또는 jQuery-ish 구문을 사용하여 흥미로운 것으로 생각되는 성능을 비교하는 데 몇 가지 차이점을 밝히기 전에 테스트했습니다. http://jsperf.com/id-id-vs-id-class/2.

나는 누군가의 도움이 되었기를 바랍니다.

Answer 2

이름 조회 아마 클래스 조회보다 더 나쁜 없습니다, 하지만 셀렉터와 함께 생각해보십시오. 지정된 모든 DOM 요소를 찾아야합니다. 내가 너라면 최소한 필요한 유형을 지정해야한다.

this.$("div[name=title]") 

또한 백본보기에서 사용할 수있는 약자에 유의하십시오. 이. $ 기능적 이유에 대한 사용자의 추가 질문에 대답하려면 $ (선택, this.el)

편집

과 동일한 $ (this.el) .find, 대한 바로 가기입니다 DOM에 특정 클래스 이름을 가진 모든 요소를 ​​반환하는 함수가 없습니다. 그것은 내가 알지 못하는 새로운 것이있을 수도 있지만, 빠른 Google 검색은 그럴 경우에는 표시하지 않습니다.finding DOM nodes with a specific class의 샘플 구현을 여기서 볼 수 있습니다.

알고리즘은 집합의 모든 요소를 ​​반복해야하므로 클래스 속성을 확인하는 것보다 name 속성을 확인하는 것이 더 이상 비용이 들지 않습니다. (실제로 벤치마킹을 한 적은 없지만 다르게 의심할만한 이유는 모르겠습니다.)

이것은 적어도 DOM 요소의 유형을 지정하는 것이 좋습니다. $ ("[name = title]")과 같은 선택기를 사용하면 jquery는 DOM에있는 모든 단일 요소을 열거하여 찾고있는 것을 찾습니다. 이 경우에는 DOM의 작은 하위 집합 (보기의 자식) 만 검색하므로 큰 문제는 아니지만 $ ("div [name = title] ") 가능한 경우 getElementsByTagName을 사용하여 최적화를 수행 할 수 있습니다. DOM 요소의 이름 속성을 검색