Vanilla JavaScript vs. jQuery를 사용하는 경우

Vanilla JavaScript vs. jQuery를 사용하는 경우

일반적인 jQuery 질문을 감시/답변하면서 jQuery가 아닌 javascript를 사용하여 실제로 적은 양의 글을 쓸 수 있고 ...을 할 수 있는 특정 연습이 있다는 것을 알게 되었습니다.또, 퍼포먼스의 메리트를 얻을 수도 있습니다.

구체적인 예

$(this) »this

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

j쿼리

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

자바스크립트

this.id;

이와 같은 일반적인 관행은 또 있습니까?jQuery를 혼합하지 않고 특정 Javascript 작업을 쉽게 수행할 수 있습니다.아니면 드문 경우인가요?(실제로 더 많은 코드가 필요한 jQuery "바로 가기"에 대해)

편집 : jQuery vs 플레인 javascript 퍼포먼스에 대한 답변은 감사하지만, 실제로는 더 많은 양의 답변을 찾고 있습니다.jQuery를 사용하는 동안, 사용하는 대신 플레인 Javascript를 사용하는 것이 실제로 더 나은 경우(가독성/컴팩트성)$()★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

• this.id)
• this.value(일부러)「IE」의 , 가 알고 입니다.<select>value 「」에 된 속성<option>Safari safari safari safari safari safari safari safari safari safari safari safari safari 。
• this.className
• this.selectedIndex 대항해서<select>된
• this.options 대항해서<select>을 <option>
• this.text 대항해서<option>
• this.rows 대항해서<table><tr>
• this.cells 대항해서<tr>contract & 를
• this.parentNode 부모를
• this.checked를 checkbox Down @Tim Down
• this.selected된 option Down @Tim Down
• this.disabled가 되다input Down @Tim Down
• this.readOnly"readOnly"의 input Down @Tim Down
• this.href 대항해서<a>를 요소href
• this.hostname 대항해서<a>을 요소href
• this.pathname 대항해서<a> 그 가 됩니다.href
• this.search 대항해서<a>을 href
• this.src, 「 」를 .src

감이 잡히실 겁니다

퍼포먼스가 중요할 때가 있습니다.예를 들어 루프에서 여러 번 작업을 수행하는 경우 jQuery를 폐기할 수 있습니다.

일반적으로 다음 항목을 교체할 수 있습니다.

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

포함:

위는 표현이 서툴렀다. getAttribute과 대응하는 Atribute의 Atribute의 Atribute의 Atribute의 Atribute의 Atribute의 을 취득합니다.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]);이것은 어레이(또는 어레이와 같은 오브젝트)를 사용할 때 놓칠 수 없는 매우 유용한 기능입니다.

정답은 기본 JavaScript 대신 jQuery를 사용할 경우 항상 성능 저하를 감수해야 한다는 것입니다.jQuery는 JavaScript 라이브러리이기 때문입니다.이것은 자바스크립트의 멋진 새로운 버전이 아니다.

jQuery가 강력한 이유는 크로스브라우저 상황에서 너무 지루하고(AJAX가 가장 좋은 예 중 하나) 무수한 브라우저 간의 불일치를 해소하고 일관된 API를 제공하기 때문입니다.또한 체인 연결, 암시적 반복 등의 개념을 쉽게 사용할 수 있으므로 요소 그룹 작업을 단순화할 수 있습니다.

jQuery를 배우는 것은 JavaScript를 배우는 것을 대신할 수 없습니다.당신은 후자에 대한 확실한 근거를 가지고 있어야만 전자를 아는 것이 당신을 더 쉽게 만드는 것에 대해 충분히 이해할 수 있다.

-- 코멘트를 포함하도록 편집 --

코멘트가 재빠르게 지적되기 때문에 (100% 동의합니다) 상기 문장은 벤치마크 코드를 참조하고 있습니다.네이티브 JavaScript 솔루션(잘 작성되었다고 가정)은 거의 모든 경우에서 동일한 작업을 수행하는 jQuery 솔루션보다 성능이 우수합니다(그렇지 않으면 예를 보고 싶습니다).jQuery는 개발 시간을 단축합니다.이것은 중요한 장점입니다.이를 경시하고 싶지는 않습니다.읽기 쉽고 코드 팔로잉이 용이하며, 이는 일부 개발자가 직접 만들 수 있는 것보다 더 많은 것입니다.

제 생각에는, 그 답은 여러분이 무엇을 달성하려고 노력하느냐에 달려 있습니다.메리트를 jQuery를 하면, 할 때마다 가 발생합니다.$()가독성, 일관성, 크로스 브라우저 호환성 등을 원한다면 '네이티브' JavaScript보다 jQuery를 선호하는 이유가 분명히 있습니다.

그 틀은...오, 그거 알아요? - 농담은 이해하셨으면 좋겠네요.:D 퍼포먼스를 위해 코드 판독성을 희생합니다.와의 비교하다jQuery는 벨로우를 회수하는 을 볼 수.DOM로 하다ID거의 35배 빠른 속도입니다.:)

따라서 성능을 원한다면 Vanilla JS를 사용해보고 자신만의 결론을 내리는 것이 좋습니다.GUI를 일은.GUI의 처럼 부하가 에는 UI 스레드를 잠그는 일은 .forloopsyslog.syslog..syslog.

Vanilla JS는 놀랍고 강력한 JavaScript 애플리케이션을 구축하기 위한 빠르고 가벼운 크로스 플랫폼 프레임워크입니다.

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

이미 승인된 답변이 있지만, 여기에 직접 입력된 답변은 크로스 브라우저 지원을 실질적으로 보장하는 네이티브 자바스크립트 메서드/속성 목록에 포괄적일 수 없다고 생각합니다.이를 위해 퀴즈모드로 리다이렉트 하겠습니다.

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

이것은 아마도 어떤 브라우저에서도 무엇이 작동하고 무엇이 작동하지 않는지에 대한 가장 포괄적인 목록일 것입니다.특히 DOM 섹션에 주의하십시오.읽을 것은 많지만 다 읽는 것이 아니라 참고 자료로 삼는 것이 포인트입니다.

웹 어플리케이션을 본격적으로 작성하기 시작했을 때 DOM 테이블을 모두 인쇄하여 벽에 걸어두었기 때문에 어떤 것이 안전한지, 어떤 것이 필요한지를 한눈에 알 수 있었습니다.요즘 나는 그냥 구글에서 뭐랄까quirksmode parentNode compatibility의심스러울 때.

다른 어떤 것과 마찬가지로, 판단은 대부분 경험의 문제이다.jQuery를 사용할 때와 플레인 JS를 사용할 때를 결정하기 위해 사이트 전체를 읽고 모든 이슈를 암기하는 것은 별로 추천하지 않습니다.그냥 리스트에 유의하세요.충분히 쉽게 검색할 수 있습니다.시간이 지남에 따라 플레인 JS가 언제 더 좋은지에 대한 본능이 생깁니다.

---

추신: PPK(사이트의 저자)도 아주 좋은 책을 가지고 있어서 꼭 읽어보시길 권합니다.

언제:

1. 당신은 당신이 하고 있는 일에 대해 변함없는 교차 지원이 있다는 것을 알고 있다.
2. 입력하는 코드가 그다지 많지 않습니다.
3. 가독성이 현저하게 떨어지는 것은 아닙니다.
4. jQuery가 더 나은 성능을 얻기 위해 브라우저에 따라 다른 구현을 선택하지 않을 것이라고 확신합니다.

JavaScript를 사용합니다.그렇지 않으면 jQuery를 사용합니다(가능한 경우).

편집: 이 답변은 jQuery를 전체적으로 사용할지 생략할지를 선택할 때뿐만 아니라 jQuery 내에서 vanilla JS를 사용할지 여부를 선택할 때 모두 적용됩니다.어느쪽인가를 선택하다attr('id') ★★★★★★★★★★★★★★★★★」.idJS를 .removeClass('foo')vs 대 .className = .className.replace( new Regexp("(?:^|\\s+)"+foo+"(?:\\s+|$)",'g'), '' )j에 쿼리하다

다른 사람들은 "jQuery vs. plain JS"라는 광범위한 질문에 초점을 맞추고 있습니다. 당신의 OP로 미루어 볼 때, 이미 jQuery를 사용하기로 선택했다면 바닐라 JS를 언제 사용하는 것이 더 좋을지 궁금했을 뿐입니다.이 예는 바닐라 JS를 사용해야 하는 완벽한 예입니다.

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

(내 생각에) 둘 다 다음보다 느리고 읽기 어렵습니까?

this.id.

wayj 하기 위해서는 때문에.Query 방식으로 속성을 가져오려면 새 JS 개체를 스핀업해야 하므로 속도가 느립니다. 그럼 이제 ,, 제, 약, 약, 러, 러, 러, 러, 러, 러, 러, 러, 러, now, now를 사용할$(this)를 변수에 쿼리합니다.를 들면, 「아트리뷰트」)이id ★★★★★★★★★★★★★★★★★」src를 참조해 주세요.

이와 같은 일반적인 관행은 또 있습니까?jQuery를 혼합하지 않고 특정 Javascript 작업을 쉽게 수행할 수 있습니다.아니면 드문 경우인가요?(실제로 더 많은 코드가 필요한 jQuery "바로 가기"에 대해)

투고에 되어 있는 하고 있는 것은, 「포장하고 있는 사람」입니다.$(this)jQuery 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이기 때문에 이론적으로는 banilla JS보다 뛰어난 성능을 발휘할 수 없다고 생각합니다.

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

결론부터 말하자면, 저는 작은 것에 대해 바닐라 JS를 사용하는 경향이 있습니다.JS 집약적인 프로젝트에서는 jQuery를 사용하고 바퀴를 재창조하지 않습니다.또한 생산성이 향상됩니다.

번째 답변의 입니다.thisDOM ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」

다른 사람들을 알아보는 것도 재미있을지도 모른다.

이것이 문서인 경우:

• this.forms를 HTMLCollection 중 하나
• this.anchors를 HTMLCollectionHTMLAnchorElementsname 설정중,
• this.links를 HTMLCollectionHTMLAnchorElement는 을 shref 설정중,
• this.images를 HTMLCollectionHTMLImageElements
• 그리고 더 이상 사용되지 않는 애플릿도 마찬가지입니다.this.applets

을(를) 하는 document.forms,document.forms[formNameOrId]이름이 지정되거나 식별된 양식을 가져옵니다.

이것이 폼일 경우:

• this[inputNameOrId]된 필드를 .

폼 필드인 경우:

• this.type 타입을

jQuery 실렉터를 학습할 때 기존 HTML 요소 속성 학습은 생략하는 경우가 많습니다.이 속성은 접근 속도가 매우 빠릅니다.

여느 때처럼 나는 이 파티에 늦게 온다.

jQuery를 사용하기로 결심한 것은 그다지 매력적인 기능이 아니었습니다.결국, 어떤 것도 당신이 자신의 기능을 쓰는 것을 막을 수 없습니다.

메모리 누설을 피하기 위해 DOM을 수정할 때 배워야 할 요령이 매우 많다는 것이 사실입니다(IE에 대해 말하는 것입니다).이러한 모든 문제를 관리할 수 있는 일원화된 자원을 가지고 있는 것은, 지금까지보다 훨씬 뛰어난 JS 코더에 의해서 작성되어, 계속적으로 검토, 수정, 테스트를 받고 있는 것입니다.

이것은 크로스 브라우저 지원/추상 논거에 해당한다고 생각합니다.

물론 jQuery는 필요할 때 스트레이트 JS를 사용할 수 있습니다.나는 항상 두 사람이 원활하게 함께 일하는 것처럼 느껴졌다.

물론 브라우저가 jQuery에서 지원되지 않거나 로우엔드 환경(오래된 전화기?)을 지원하는 경우에는 큰 .js 파일이 문제가 될 수 있습니다.jQuery가 어렸을 때 기억나?

그러나 일반적으로 성능 차이는 문제가 되지 않습니다.충분히 빠르면 돼1초마다 기가헤르츠의 CPU 사이클이 낭비되기 때문에 18개월마다 전력이 2배로 증가하지 않는 유일한 개발 자원인 코더의 퍼포먼스가 더욱 걱정됩니다.

즉, 현재 접근성 문제에 대해 알아보고 있으며, 이너에 대해서도 알고 있습니다.HTML은 약간 no입니다.jQuery는 물론 .inner에 의존합니다.HTML, 그래서 저는 지금 허용되는 다소 지루한 방법에 의존할 프레임워크를 찾고 있습니다.그리고 이러한 프레임워크는 jQuery보다 느리게 실행되지만, 충분히 잘 실행된다면 저는 행복할 것입니다.

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

사실 구글은 어떤 코드에도 jQuery를 허용하지 않는다(Facebook 소유이기 때문에 리액트도 마찬가지). 인터뷰 진행자가 "죄송합니다만, jQuery를 사용할 수 없습니다. XYZ Corporation의 승인 목록에 없습니다."라고 말하기 전까지는 몰랐을 수도 있다.Vanilla JavaScript는 언제 어디서나 작동하며 이 문제를 발생시키지 않습니다.도서관에 의존하면 속도와 편의성은 얻을 수 있지만 보편성은 상실됩니다.

또, 인터뷰에 대해서 말하자면, 또 다른 단점은, 코드 퀴즈중에 JavaScript 문제를 해결하기 위해서 라이브러리를 사용할 필요가 있다고 하면, 실제로 문제를 이해하지 못하고 있는 것처럼 보이는 것입니다.반면 바닐라 자바스크립트로 문제를 해결하면 실제로 문제를 이해하고 해결할 수 있습니다.

$(this)this

「」를 사용해 .$(this)jQuery 쿼리

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