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

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.cellsa <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것이 거의 35 배 빠릅니다. :)

따라서 성능을 원한다면 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();

---

JS와 JQ가 확실히 겹치는 것을 발견했습니다. 당신이 보여준 코드는 그 좋은 예입니다. 솔직히 JS를 통해 JQ를 사용하는 가장 좋은 이유는 단순히 브라우저 호환성입니다. JS에서 무언가를 달성 할 수는 있지만 항상 JQ에 의존합니다.

---

이것은 내 개인적인 견해이지만 jQuery는 JavaScript이므로 이론적으로는 바닐라 JS보다 성능이 뛰어나다 고 생각합니다.

그러나 실제로는 손으로 쓴 코드가 jQuery만큼 효율적이지 않기 때문에 손으로 쓴 JS보다 성능이 우수 할 수 있습니다.

결론-작은 물건의 경우 바닐라 JS를 사용하는 경향이 있습니다 .JS 집중 프로젝트의 경우 jQuery를 사용하고 바퀴를 재발 명하지 않는 것이 좋습니다-생산성도 향상되었습니다.

---

thisDOM 요소로서의 첫 번째 답변의 라이브 속성 목록 은 매우 완전합니다.

다른 사람들을 아는 것도 흥미로울 것입니다.

이것이 문서 인 경우 :

• this.formsHTMLCollection현재 문서 양식 중 하나를 얻기 위해
• this.anchors얻기 위해 HTMLCollection모든의를 HTMLAnchorElements로 name설정되고,
• this.links얻기 위해 HTMLCollection모든의 HTMLAnchorElement와의를 href설정되고,
• this.images얻을 수 HTMLCollection있는 모든의 HTMLImageElement들
• 더 이상 사용되지 않는 애플릿과 동일 this.applets

당신이 작업 할 때 document.forms, document.forms[formNameOrId]이렇게 이름 또는 확인 양식을 가져옵니다.

이것이 양식 일 때 :

• this[inputNameOrId] 그렇게 명명되거나 식별 된 필드를 얻기 위해

이것이 양식 필드 인 경우 :

• this.type 필드 유형을 얻으려면

jQuery 선택기를 학습 할 때 기존 HTML 요소 속성 학습을 건너 뛰는 경우가 종종 있습니다.

---

평소와 같이 나는이 파티에 늦게오고있다.

jQuery를 사용하기로 결정한 것은 추가 기능이 아니 었습니다. 결국 아무것도 당신이 당신의 자신의 함수를 작성하는 것을 막을 수 있습니다.

메모리 누수를 피하기 위해 DOM을 수정할 때 배워야 할 많은 트릭이 있다는 사실이었습니다 (IE에 대해 이야기하고 있습니다). 저보다 더 나은 JS 코더 인 사람들이 저를 위해 모든 종류의 문제를 관리 할 수있는 하나의 중앙 리소스를 확보하려면 지속적으로 검토하고 수정하고 테스트 한 것이 신의 보냈습니다.

나는 이런 종류의 브라우저 간 지원 / 추상적 주장에 해당한다고 생각합니다.

물론 jQuery는 필요할 때 스트레이트 JS의 사용을 배제하지 않습니다. 나는 항상 두 사람이 완벽하게 협력하는 것처럼 느껴졌다.

물론 jQuery에서 브라우저를 지원하지 않거나 저사양 환경 (이전 전화?)을 지원하는 경우 큰 .js 파일이 문제 일 수 있습니다. jQuery가 작 았던 때를 기억하십니까?

그러나 일반적으로 성능 차이는 문제가되지 않습니다. 충분히 빠르면됩니다. 기가 헤르츠의 CPU 사이클이 1 초마다 낭비됨에 따라 18 개월마다 두 배가되지 않는 유일한 개발 리소스 인 코더의 성능에 더 관심이 있습니다.

그것은 현재 접근성 문제를 조사 중이며 분명히 .innerHTML은 그다지 중요하지 않습니다. jQuery는 물론 .innerHTML에 의존하므로 허용되는 다소 지루한 메소드에 의존하는 프레임 워크를 찾고 있습니다. 그리고 그러한 프레임 워크가 jQuery보다 느리게 실행될 것이라고 생각할 수 있지만 성능이 충분하다면 행복 할 것입니다.

---

기술적이지 않은 답변이 있습니다. 많은 작업이 jQuery와 같은 특정 라이브러리를 허용하지 않을 수 있습니다.

사실, 구글은 인터뷰어가 "죄송 합니다만 jQuery를 사용할 수는 없습니다. XYZ Corporation의 승인 된 목록 "을 참조하십시오. 바닐라 자바 ​​스크립트는 언제 어디서나 완벽하게 작동하며이 문제를 결코 일으키지 않습니다. 당신이 도서관에 의지한다면, 당신은 속도와 편의를 얻지 만 보편성을 잃습니다.

또한 인터뷰에 관해 말하면, 다른 단점은 코드 퀴즈 중에 JavaScript 문제를 해결하기 위해 라이브러리를 사용해야한다고 말하면 실제로 문제를 이해하지 못하는 것처럼 나타납니다. 원시 바닐라 JavaScript로 해결하면 실제로 문제가 발생하기 전에 모든 부분을 이해하고 해결할 수 있음을 보여줍니다.

---

$(this)와 다릅니다 this:

를 사용 $(this)하면 jQuery 프로토 타입이 객체로 전달됩니다.

참고 URL : https://stackoverflow.com/questions/4651923/when-to-use-vanilla-javascript-vs-jquery