[javascript] Vanilla JavaScript와 jQuery를 언제 사용해야합니까?

일반적인 jQuery 질문을 모니터링 / 시도하는 동안 jQuery 대신 javascript를 사용하는 특정 사례가 실제로 적은 양으로 작성하고 동일한 양 을 할 수 있음을 알았습니다 . 또한 성능상의 이점을 얻을 수 있습니다.

구체적인 예

$(this) vs this

클릭 한 객체 ID를 참조하는 클릭 이벤트 내부

jQuery

$(this).attr("id");

자바 스크립트

this.id;

이와 같은 다른 일반적인 관행이 있습니까? jQuery를 혼합하지 않고 특정 Javascript 조작을보다 쉽게 ​​수행 할 수있는 위치. 아니면 드문 경우입니까? (실제로 더 많은 코드가 필요한 jQuery “바로 가기”)

편집 : jQuery 대 일반 자바 스크립트 성능에 대한 답변을 주셔서 감사하지만 실제로 훨씬 더 정량적 인 답변을 찾고 있습니다. jQuery를 사용하는 동안을 사용하는 대신 일반 자바 스크립트를 사용하는 것이 실제로 더 나은 인스턴스 (가독성 / 소형) $()입니다. 예를 들어 원래의 질문에 답했습니다.



답변

  • this.id (알다시피)
  • this.value(대부분의 입력 유형. 내가 아는 문제 는 요소 에 속성이 설정되어 <select>있지 않거나 Safari에 라디오 입력 이없는 경우 IE 입니다.)value<option>
  • this.className 전체 “클래스”속성을 가져 오거나 설정
  • this.selectedIndex에 대해 <select>선택된 인덱스를 얻을 수 있습니다
  • this.options에 대한 요소 <select>목록을 얻기 위해<option>
  • this.text에 대해 <option>해당 텍스트 내용을 얻을 수 있습니다
  • this.rows에 대한 요소 <table>의 컬렉션을 얻기 위해<tr>
  • this.cells에 대해 <tr>세포를 얻는 데 (td & th)
  • this.parentNode 직접적인 부모를 얻기 위해
  • this.checked감사 @Tim Down 상태를 확인하려면checkbox
  • this.selectedThanks @Tim Down 의 선택된 상태를 얻으려면option
  • this.disabledThanks @Tim Down 의 비활성화 상태를 얻는 방법input
  • this.readOnlyThanks @Tim Down 의 readOnly 상태를 얻으려면input
  • this.href<a>요소에 대해href
  • this.hostname<a>의 도메인을 얻기 위해 요소에 대해href
  • this.pathname에 대해 <a>요소의 경로를 얻기 위해 그href
  • this.search<a>쿼리 문자열을 얻기 위해 요소에 대해href
  • this.src 유효한 요소에 대해 src

… 아이디어를 얻는 것 같아요.

성능이 중요한 경우가 있습니다. 루프에서 여러 번 반복해서 무언가를 수행하는 것처럼 jQuery를 버리고 싶을 수도 있습니다.

일반적으로 다음을 대체 할 수 있습니다.

$(el).attr('someName');

와:

위의 말은 잘못되었다. getAttribute대체는 아니지만 서버에서 전송 된 속성 값을 검색하면 해당 속성 setAttribute이 설정됩니다. 어떤 경우에는 필요합니다.

아래의 문장은 그것을 덮었습니다. 더 나은 치료를 위해이 답변참조하십시오 .

el.getAttribute('someName');

… 속성에 직접 액세스하기 위해. 속성은 속성과 동일하지 않습니다 (때로는 서로 미러링하지만). 물론 setAttribute있습니다.

특정 유형의 모든 태그를 풀어야하는 페이지를받은 상황이 있다고 가정 해보십시오. jQuery를 사용하면 간단하고 쉽습니다.

$('span').unwrap();  // unwrap all span elements

그러나 많은 것이 있다면 약간의 원시 DOM API를 원할 수 있습니다.

var spans = document.getElementsByTagName('span');

while( spans[0] ) {
    var parent = spans[0].parentNode;
    while( spans[0].firstChild ) {
        parent.insertBefore( spans[0].firstChild, spans[0]);
    }
    parent.removeChild( spans[0] );
}

이 코드는 매우 짧으며 jQuery 버전보다 성능이 우수하며 개인 라이브러리에서 재사용 가능한 함수로 쉽게 만들 수 있습니다.

while때문에 외부에 무한 루프가있는 것처럼 보이지만 while(spans[0])“라이브 목록”을 처리하기 때문에를 수행 할 때 업데이트됩니다 parent.removeChild(span[0]);. 이것은 Array (또는 Array-like object) 대신 작업 할 때 그리워하는 아주 멋진 기능입니다.


답변

정답은 ‘일반 오래된’기본 JavaScript 대신 jQuery를 사용할 때 항상 성능 저하 가 발생한다는 것 입니다. jQuery는 JavaScript 라이브러리이기 때문입니다. 멋진 새 버전의 JavaScript가 아닙니다.

jQuery가 강력한 이유는 브라우저 간 상황에서 지나치게 지루한 작업을 수행하고 (AJAX가 가장 좋은 예 중 하나임) 무수한 사용 가능한 브라우저 간의 불일치를 매끄럽게하고 일관된 API를 제공하기 때문입니다. 또한 체인, 암시 적 반복 등과 같은 개념을 쉽게 촉진하여 요소 그룹에 대한 작업을 단순화합니다.

jQuery 학습은 JavaScript 학습을 대신 할 수 없습니다. 당신은 전자를 아는 것이 당신을 더 편하게한다는 것을 완전히 이해하도록 후자에 확고한 근거를 가져야한다.

-주석을 포함하도록 편집 됨-

의견이 빨리 지적되고 100 %에 동의하면 위의 진술은 벤치마킹 코드를 나타냅니다. ‘네이티브’JavaScript 솔루션 (잘 작성되었다고 가정)은 거의 모든 경우에 동일한 것을 수행하는 jQuery 솔루션보다 성능이 우수합니다 (그렇지 않으면 예제를보고 싶습니다). jQuery는 개발 시간을 단축 시키므로 다운 플레이를 의미하지는 않습니다. 쉽게 읽고 따르기 쉬운 코드를 사용하기 때문에 일부 개발자가 독자적으로 만들 수있는 것 이상입니다.

내 의견으로는, 대답은 당신이 달성하려는 것에 달려 있습니다. 성능상의 이점에 대한 귀하의 참조를 바탕으로 추정 한 것처럼 응용 프로그램에서 최상의 속도를 냈다면 jQuery를 사용하면 호출 할 때마다 오버 헤드가 발생합니다 $(). 가독성, 일관성, 크로스 브라우저 호환성 등을 원한다면 ‘네이티브’JavaScript보다 jQuery를 선호하는 이유가 있습니다.


답변

라는 프레임 워크가 있습니다. Vanilla JS. 당신이 농담을 얻을 수 있기를 바랍니다 … : D 성능에 대한 코드 가독성을 희생합니다 … jQuery벨로우즈를 비교하면 DOM요소 를 검색하는 ID것이 거의 35X 라는 것을 알 수 있습니다 빠릅니다. 🙂

따라서 성능을 원한다면 Vanilla JS를 사용하여 자신의 결론을 내리는 것이 좋습니다. for루프 내부와 같이 집중적 인 코드 중에는 JavaScript가 브라우저의 GUI를 중단하거나 UI 스레드를 잠그는 경험이 없을 수도 있습니다 .

Vanilla JS는 믿을 수 없을만큼 강력한 JavaScript 응용 프로그램을 구축하기위한 빠르고 가벼운 크로스 플랫폼 프레임 워크입니다.

그들의 홈페이지에는 성능 비교가 있습니다 :

여기에 이미지 설명을 입력하십시오


답변

이미 받아 들여진 답변이 있지만 여기에 직접 입력 한 답변이 브라우저 간 지원을 실질적으로 보장하는 기본 자바 스크립트 메소드 / 속성 목록에 포괄적 일 수는 없습니다. 이를 위해 quirksmode로 리디렉션 할 수 있습니다.

http://www.quirksmode.org/compatibility.html

아마도 어떤 브라우저에서 작동하고 작동하지 않는 항목에 대한 가장 포괄적 인 목록 일 것입니다. DOM 섹션에 특히주의하십시오. 읽을 것이 많지만 요점은 모든 것을 읽지 않고 참조로 사용하는 것입니다.

웹 응용 프로그램을 심각하게 작성하기 시작했을 때 모든 DOM 테이블을 인쇄하고 벽에 매달아 사용하기 안전하고 해킹이 필요한 항목을 한눈에 알 수있었습니다. 요즘 나는 quirksmode parentNode compatibility의심이있을 때 와 같은 것을 구글에 보냅니다.

다른 것들과 마찬가지로, 판단은 대부분 경험의 문제입니다. 나는 전체 사이트를 읽고 jQuery를 사용할 때와 일반 JS를 사용할 때를 알아 내기 위해 모든 문제를 암기하는 것을 권장하지 않습니다. 목록 만 알아 두십시오. 검색하기가 쉽습니다. 시간이 지나면 평범한 JS가 선호 될 때의 본능을 개발하게됩니다.


추신 : PPK (사이트의 저자)도 읽는 것이 좋습니다 아주 좋은 책이 있습니다


답변

언제:

  1. 현재하고있는 일에 대해 브라우저 간 지원이 제공된다는 것을 알고 있습니다.
  2. 타이핑하기에는 더 많은 코드가 아니며
  3. 눈에 잘 띄지 않으며
  4. jQuery가 더 나은 성능을 달성하기 위해 브라우저를 기반으로 다른 구현을 선택하지 않을 것이라고 확신합니다.

JavaScript를 사용하십시오. 그렇지 않으면 jQuery를 사용하십시오 (가능한 경우).

편집 :이 답변은 jQuery를 전반적으로 사용하거나 제외 할 때뿐만 아니라 jQuery 내에서 바닐라 JS를 사용할지 여부를 선택할 때 모두 적용됩니다. 사이에 선택 attr('id').id사이에 선택하는 동안, JS 찬성 몸을 숙 removeClass('foo').className = .className.replace( new Regexp("(?:^|\\s+)"+foo+"(?:\\s+|$)",'g'), '' )jQuery를 찬성 몸을 숙.


답변

다른 사람들의 답변은 “jQuery vs. plain JS”의 광범위한 질문에 초점을 맞추 었습니다. OP에서 판단하면 이미 jQuery를 사용하기로 선택한 경우 바닐라 JS를 사용하는 것이 더 좋은지 궁금해하고 있습니다. 귀하의 예는 바닐라 JS를 사용해야 할 때의 완벽한 예입니다.

$(this).attr('id');

느리거나 내 의견으로는 읽기 쉽지 않습니다.

this.id.

jQuery 방식으로 속성을 검색하기 위해 새 JS 객체를 회전시켜야하기 때문에 속도가 느립니다. 이제 $(this)다른 작업을 수행 하는 데 사용 하려는 경우 반드시 해당 jQuery 객체를 변수에 저장하고 해당 작업을 수행하십시오. 그러나 요소의 속성 ( id또는 같은 src)이 필요한 많은 상황에 처했습니다 .

이와 같은 다른 일반적인 관행이 있습니까? jQuery를 혼합하지 않고 특정 Javascript 조작을보다 쉽게 ​​수행 할 수있는 위치. 아니면 드문 경우입니까? (실제로 더 많은 코드가 필요한 jQuery “바로 가기”)

가장 일반적인 경우는 귀하의 게시물에 설명 된 사례입니다. $(this)jQuery 객체를 불필요하게 래핑 하는 사람들 . 나는 함께이 가장 많이 참조 id하고 value(대신 사용$(this).val() ).

편집 : 여기에 jQuery를 사용 하는 것이 attr() 느린 설명하는 기사가 있습니다. 고백 : 태그 위키에서 훔 쳤지 만 질문에 대해 언급 할 가치가 있다고 생각합니다.

다시 편집 : 속성에 직접 액세스하는 가독성 / 성능 함의를 감안할 this.<attributename>때 가능한 한 일반적으로 사용하려고 시도하는 것이 좋습니다. 브라우저 불일치로 인해 작동하지 않는 경우가있을 수 있지만, 먼저 시도한 후 작동하지 않으면 jQuery를 사용하는 것이 좋습니다.


답변

주로 성능에 관심이 있다면 주요 예제가 머리에 못을 박습니다. 불필요하게 또는 중복으로 jQuery를 호출하면 IMHO는 성능 저하의 두 번째 주요 원인입니다 (첫 번째는 빈약 한 DOM 탐색).

그것은 실제로 당신이 찾고있는 것의 예는 아니지만, 나는 이것을 자주 언급합니다 : jQuery 스크립트의 성능을 향상시키는 가장 좋은 방법 중 하나는 jQuery 객체를 캐시하거나 체인을 사용하는 것입니다.

// poor
$(this).animate({'opacity':'0'}, function() { $(this).remove(); });

// excellent
var element = $(this);
element.animate({'opacity':'0'}, function() { element.remove(); });

// poor
$('.something').load('url');
$('.something').show();

// excellent
var something = $('#container').children('p.something');
something.load('url').show();


댓글 달기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다