원본 js 코드와 jquery_기본 지식 간의 비교 경험

WBOY
풀어 주다: 2016-05-16 17:23:00
원래의
1043명이 탐색했습니다.

이렇게 간단한 작업이라도 jQuery가 없으면 복잡해질 수 있습니다. 일반 JavaScript에서는 다음 코드 조각에 표시된 대로 강조 표시된 클래스를 추가할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

window.onload = function() {
var divs = document.getElementsByTagName('div')
for (var i = 0; i < divs.length; i ) {
if (hasClass(divs[i], 'poem-stanza') && !hasClass(divs[i], 'highlight')) {
divs[i].className = ' 하이라이트';

}
}
function hasClass( elem, cls ) {
var reClass = new RegExp(' ' cls ' ' );
reClass.test(' ' elem.className ' ');
}
}

저희가 직접 처리하면 이렇게 간단한 작업도 되지 않습니다. jquery를 사용하면 복잡해집니다. 원시 js를 사용하면 다음 코드 조각을 사용하여 강조 표시된 클래스를 추가할 수 있습니다.

길이에도 불구하고 이 솔루션은 다음과 같이 jQuery가 목록 1.2에서 처리하는 많은 상황을 처리하지 않습니다. :
• 다른 window.onloadevent 핸들러를 적절하게 존중
• DOM이 준비되는 즉시 작동
• 최신 DOM 방법으로 요소 검색 및 기타 작업 최적화
길지만 이 솔루션은 여전히 ​​유효합니다. 다음과 같이 목록 1.2에서 jquery가 수행하는 많은 작업을 처리하지 않습니다.
1. 다른 window.load 이벤트를 적절하게 처리합니다.
2. DOM 구조가 준비되면 작업을 시작합니다.
3. 최신 DOM 방법을 사용하여 요소 검색 및 기타 작업을 최적화합니다.

jQuery 기반 코드가 일반 JavaScript 코드보다 작성하기 쉽고, 읽기 쉽고, 실행 속도가 더 빠르다는 것을 알 수 있습니다.

쿼리 사용을 확실히 알 수 있습니다. 코드는 기본 js 코드보다 작성하기 쉽고, 읽기 쉽고, 실행하기 더 빠릅니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿