초보자를 위한 조언: jQuery에 너무 깊이 빠져들지 마세요

Nettuts+의 편집자로서 저는 제출된 튜토리얼에서 많은 코드를 검토하게 됩니다. jQuery가 나온 지 수년이 지났지만, 여전히 가장 자주 보게 되는 실수가 하나 있습니다.

---

예 #1

다음 코드를 고려해보세요:

으아아아

위의 코드는 여러 가지 이유로 지나치게 복잡합니다. 코드가 실제로 무엇을 하는지는 걱정하지 마세요(횡설수설입니다). 대신 $(this)에 대한 모든 참고 자료를 살펴보시기 바랍니다.

DOM을 풀이라고 생각하세요.

DOM을 풀이라고 생각하세요. 어렸을 때 부모님이 지켜보는 것처럼 행동하는 동안 동전을 찾기 위해 수영장에 뛰어들었던 것을 기억하십니까? 이것이 현실 세계에서의 비교가 될 것입니다.

$('.someClass')을 사용할 때마다 jQuery는 풀(DOM)로 점프하여 해당 코인(또는 노드)을 검색합니다. 따라서 함수에서 이를 여러 번 참조하면 많은 다이빙이 필요할 것입니다. 또는 실제 비교에서 볼 때 낭비적이고 불필요합니다. 필요하지 않은 경우 jQuery를 호출하는 이유는 무엇입니까? 우리가 "캐싱"이라고 부르는 작업을 수행해야 합니다.

으아아아

이렇게 하면 훨씬 깔끔해요. 최신 브라우저 엔진은 이제 믿을 수 없을 정도로 빠르고 열악한 코딩을 보완하기 위해 최선을 다할 것이지만, 여전히 효율적인 코드를 작성하고 풀장에서 뛰어다니는 데 모든 에너지를 낭비하지 않도록 노력해야 합니다. 이제 기술적으로 말하면 this와 같은 DOM 노드에 jQuery를 전달하면 DOM을 다시 쿼리하지 않습니다. 단지 jQuery 객체를 반환합니다.

솔직히 둘 사이의 성능 차이는 미미하기 때문에 우리는 클린 코드를 직접 작성합니다.

예 2

조금 더 복잡한 예인 탭을 고려해 보겠습니다.

으아아아

이 코드는 어디에나 있습니다. 추악하고 비효율적입니다. 첫 번째 해결책은 모든 CSS를 제거하는 것입니다. 값이 동적으로 생성되는 경우에만 스타일을 JavaScript에 배치할 수 있습니다. 예를 들어 화면에서 요소의 정확한 위치를 계산해야 하는 경우 .css('left',calculatedValue)를 사용할 수 있습니다. 이 경우 외부 스타일 시트로 모두 내보낼 수 있습니다. 이로 인해 우리는 다음과 같은 결과를 얻게 됩니다:

으아아아

다음으로 .tabs li 및 .tabs li 和 $(this)？别再在泳池里跳了。让我们“缓存” .tabs li에 대해 DOM을 계속 쿼리하는 이유는 무엇입니까? 수영장에서 뛰어내리지 마세요. .tabs li의 위치를 ​​"캐시"해 보겠습니다.

으아아아

이 더 좋지만 여전히 $(this)를 두 번 호출하므로 별 문제가 되지 않습니다. 그러나 내 경험상 초기에 이를 제거하지 않으면 이 숫자가 빠르게 증가할 수 있습니다.

으아아아

필터

또 다른 (덜 최적화된) 옵션은 필터링을 사용하는 것입니다.

으아아아

이 예의 차이점은 $(this)，而是使用 filter()을 참조하는 대신 filter() 메서드를 사용하여 목록 항목의 컬렉션을 클릭한 항목으로만 줄인다는 것입니다.

---

무엇을 먹어야 하나

그렇습니다. 함수에서 $('.tabs) 여러 번 참조하면 세상이 끝나지 않습니다. 요즘 JavaScript 엔진은 매우 빠릅니다. 이 작업을 수천 번 수행하여 성능을 테스트한다면 실행 차이는 수백 밀리초가 될 수 있습니다. 하지만 질문은 여전히 ​​남아 있습니다. 왜 이런 일을 하시겠습니까?

때로는 jQuery와 같은 많은 추상화를 사용하여 작업할 때 $('.tabs')가 많은 코드를 실행하는 실제 함수라는 사실을 잊어버리기 쉽습니다. 또한 이러한 개념은 jQuery뿐만 아니라 일반적으로 JavaScript에도 적용된다는 점에 유의해야 합니다.

위의 caching 기술을 사용하여 더욱 깔끔한 코드를 작성하세요.

위 내용은 초보자를 위한 조언: jQuery에 너무 깊이 빠져들지 마세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!