Vanilla JavaScript vs. jQuery ne zaman kullanılır?

İzlerken / ortak jQuery soruları yanıtlamaya çalışırken, jQuery yerine, javascript kullanarak, aslında daha az yazmanızı ve ... aynı miktarda yapmak sağlayan bazı uygulamalar olduğunu fark ettim . Ayrıca performans avantajları da sağlayabilir.

Belirli bir örnek

$(this) vs this

Tıklanan nesneler kimliğine başvuran bir tıklama etkinliğinin içinde

jQuery

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

JavaScript

this.id;

Bunun gibi başka yaygın uygulamalar var mı? Belirli Javascript işlemlerinin jQuery'yi karışıma getirmeden daha kolay gerçekleştirilebildiği yerlerde. Yoksa bu nadir bir durum mu? (aslında daha fazla kod gerektiren bir jQuery "kısayolunun")

EDIT: jQuery vs düz javascript performansı ile ilgili cevapları takdir ederken, ben aslında çok daha niceliksel cevaplar arıyorum. JQuery kullanırken, kullanmak yerine düz javascript kullanmak için birinin gerçekten daha iyi olacağı durumlar (okunabilirlik / kompaktlık) $(). Orijinal sorumda verdiğim örneğe ek olarak.

• this.id (bildiğin gibi)
• this.value(çoğu giriş türünde. öğelerinde ayarlanmış özelliklere veya Safari'de radyo girişlerine <select>sahip olmadığında yalnızca bildiğim sorunlar IE'dir.)value<option>
• this.className "sınıf" özelliğinin tamamını almak veya ayarlamak için
• this.selectedIndexa karşı <select>seçili dizini almak için
• this.optionsBir karşı <select>bir listesini almak için <option>elemanlar
• this.textkarşı bir <option>metin içeriği almak için
• this.rowskarşı bir elemanlar <table>koleksiyonu almak için<tr>
• this.cellskarşı <tr>hücrelerini almak için (td & th)
• this.parentNode doğrudan ebeveyn olmak
• this.checkedTeşekkür @Tim Down kontrol durumunu almak içincheckbox
• this.selectedTeşekkür @Tim Down seçilen durumunu almak içinoption
• this.disabledTeşekkürler @Tim Down devre dışı durumunu almak içininput
• this.readOnlyTeşekkürler @Tim Down salt okunur durumunu almak içininput
• this.href<a>almak için bir öğeye karşıhref
• this.hostname<a>etki alanını elde etmek için bir öğeye karşıhref
• this.pathname<a>yolunu almak için bir öğeye karşıhref
• this.search<a>onun sorgu dizesini almak için bir öğeye karşıhref
• this.src geçerli olduğu bir öğeye karşı src

... sanırım bu fikri anladınız.

Performansın çok önemli olduğu zamanlar olacaktır. Bir döngüde birçok kez bir şey yapıyorsanız, jQuery'den kurtulmak isteyebilirsiniz.

Genel olarak aşağıdakileri değiştirebilirsiniz:

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

ile:

Yukarıda kötü ifade edildi. getAttributeyerine geçmez, ancak sunucudan gönderilen bir özniteliğin değerini alır ve karşılık gelen setAttributedeğeri ayarlar. Bazı durumlarda gerekli.

Aşağıdaki cümleler bir nevi örtbas etti. Daha iyi bir tedavi için bu cevaba bakınız .

el.getAttribute('someName');

... bir özelliğe doğrudan erişmek için. Niteliklerin özelliklerle aynı olmadığını unutmayın (bazen birbirlerini yansıtırlar). Tabii ki de var setAttribute.

Belirli bir türdeki tüm etiketlerin paketini açmanız gereken bir sayfa aldığınızda bir durumunuz olduğunu varsayalım. JQuery ile kısa ve kolaydır:

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

Ancak, çok fazla varsa, küçük bir yerel DOM API'si yapmak isteyebilirsiniz:

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] );
}

Bu kod oldukça kısadır, jQuery sürümünden daha iyi performans gösterir ve kişisel kütüphanenizde yeniden kullanılabilir bir işleve kolayca dönüştürülebilir.

whileÇünkü dış ile sonsuz bir döngü var gibi görünebilir while(spans[0]), ama bir "canlı liste" ile uğraştığımız için yaptığımızda güncellenir parent.removeChild(span[0]);. Bu, bir Array (veya Array benzeri nesne) ile çalışırken kaçırdığımız oldukça şık bir özelliktir.

Doğru cevap, 'düz eski' yerel JavaScript yerine jQuery kullanırken her zaman bir performans cezası almanızdır. Çünkü jQuery bir JavaScript Kütüphanesi'dir. JavaScript'in süslü yeni bir sürümü değil.

JQuery'nin güçlü olmasının nedeni, tarayıcılar arası bir durumda aşırı derecede sıkıcı olan bazı şeyleri (AJAX en iyi örneklerden biridir) ve mevcut tarayıcıların sayısının tutarsızlığını düzeltmesi ve tutarlı bir API sağlamasıdır. Ayrıca, eleman grupları üzerinde birlikte çalışmayı basitleştirmek için zincirleme, zımni yineleme vb. Kavramları kolayca kolaylaştırır.

JQuery öğrenmek, JavaScript öğrenmenin yerini tutmaz. İkincisinin sizin için daha kolay hale geldiğini bilmenin tam olarak takdir edebilmesi için ikincisinde sağlam bir temeliniz olmalıdır.

- Yorumları kapsayacak şekilde düzenlendi -

Yorumlar hızlı bir şekilde belirtildiğinden (ve% 100 katılıyorum) yukarıdaki ifadeler kıyaslama koduna atıfta bulunmaktadır. 'Yerel' bir JavaScript çözümü (iyi yazılmış olduğu varsayılarak) hemen hemen her durumda aynı şeyi gerçekleştiren bir jQuery çözümünden daha iyi performans gösterecektir (aksi halde bir örnek görmek isterim). jQuery geliştirme süresini hızlandırır, bu da önemsizden bahsetmek istemediğim önemli bir faydadır. Bazı geliştiricilerin kendi başlarına oluşturma yeteneğinden daha fazla olan, okunması kolay, takip edilmesi kolay kodları kolaylaştırır.

Benim düşünceme göre, cevap neyi başarmaya çalıştığınıza bağlıdır. Performans avantajlarına referansınıza dayanarak tahmin ettiğim gibi, uygulamanızdan mümkün olan en iyi hızın peşindeseniz, jQuery kullanmak her aradığınızda ek yük getirir $(). Okunabilirlik, tutarlılık, tarayıcılar arası uyumluluk vb. İçin kullanacaksanız, jQuery'yi 'yerel' JavaScript'e tercih etmek için kesinlikle nedenler vardır.

Adında bir çerçeve var ... Bil bakalım ne oldu? Vanilla JS. Şaka olsun umuyoruz ...: D Performans için kod okunaklılığını feda eder ... Bir jQueryferyat ile karşılaştırdığınızda, bir DOMeleman almanın IDneredeyse 35X daha hızlı olduğunu görebilirsiniz. :)

Performans istiyorsanız, Vanilla JS'yi denemeniz ve kendi sonuçlarınızı çıkarmanız daha iyi olur. Belki bir fordöngü içinde olduğu gibi yoğun kod sırasında tarayıcının GUI'sini asılı / UI iş parçacığını kilitleyen JavaScript ile karşılaşmazsınız .

Vanilla JS, inanılmaz, güçlü JavaScript uygulamaları oluşturmak için hızlı, hafif, platformlar arası bir çerçevedir.

Ana sayfalarında bazı mükemmel karşılaştırmalar var:

Kabul edilmiş bir cevap zaten var, ancak doğrudan buraya yazılan hiçbir cevabın, çapraz tarayıcı desteğini pratik olarak garanti eden yerel javascript yöntemleri / özellikleri listesinde kapsamlı olabileceğine inanıyorum. Bunun için sizi quirksmode'a yönlendirebilirim:

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

Hangi tarayıcıda neyin işe yarayıp neyin işe yaramadığına dair belki de en kapsamlı listedir. DOM bölümüne özellikle dikkat edin. Okunacak çok şey var ama asıl mesele hepsini okumak değil referans olarak kullanmak.

Web uygulamaları yazmaya ciddi şekilde başladığımda, tüm DOM tablolarını yazdırdım ve onları duvara astım, böylece bir bakışta neyin güvenli olduğunu ve neyin hack'leri gerektirdiğini biliyorum. Bu günlerde quirksmode parentNode compatibilityşüphe duyduğum gibi bir şey google .

Her şey gibi, yargı da çoğunlukla bir deneyim meselesidir. Gerçekten tüm siteyi okumanızı ve ne zaman jQuery ne zaman ve düz JS kullanacağınızı anlamak için tüm sorunları ezberlemenizi tavsiye etmem. Sadece listenin farkında ol. Arama yapmak yeterince kolay. Zamanla, düz JS'nin ne zaman tercih edileceğine dair bir içgüdü geliştireceksiniz.

Not: PPK (sitenin yazarı) da okumanızı tavsiye ettiğim çok güzel bir kitap var

Ne zaman:

1. yaptığınız şey için sınırsız çapraz tarayıcı desteği olduğunu biliyorsunuz ve
2. yazılması önemli ölçüde daha fazla kod değildir ve
3. önemli ölçüde daha az okunabilir değildir ve
4. jQuery'nin daha iyi performans elde etmek için tarayıcıya dayalı farklı uygulamalar seçmeyeceğinden eminiz, o zaman:

JavaScript kullanın. Aksi takdirde jQuery kullanın (mümkünse).

Düzenleme : Bu cevap hem dışarıda bırakmak yerine genel olarak jQuery kullanmayı seçerken hem de jQuery içinde vanilya JS kullanıp kullanmayacağınızı seçerken geçerlidir. Arasında seçim yapma attr('id')ve .idarasında tercih ederken, JS lehine idiler removeClass('foo')karşı .className = .className.replace( new Regexp("(?:^|\\s+)"+foo+"(?:\\s+|$)",'g'), '' )jQuery lehine idiler.

Başkalarının cevapları "jQuery vs. plain JS" sorusuna odaklanmıştır. OP'nizden yola çıkarak, zaten jQuery kullanmayı seçtiyseniz vanilya JS'yi kullanmanın daha iyi olduğunu merak ettiğinizi düşünüyorum. Örneğiniz vanilla JS'yi ne zaman kullanmanız gerektiğine dair mükemmel bir örnektir:

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

Hem yavaş hem de (bence) daha az okunabilir mi:

this.id.

Daha yavaştır, çünkü sadece jQuery yolunu almak için yeni bir JS nesnesini döndürmeniz gerekir. Şimdi, $(this)diğer işlemleri gerçekleştirmek için kullanacaksanız, o zaman, elbette, bu jQuery nesnesini bir değişkende saklayın ve onunla çalışın. Ancak, sadece ( idveya gibi src) öğeden bir özniteliğe ihtiyaç duyduğum birçok durumla karşılaştım .

Bunun gibi başka yaygın uygulamalar var mı? Belirli Javascript işlemlerinin jQuery'yi karışıma getirmeden daha kolay gerçekleştirilebildiği yerlerde. Yoksa bu nadir bir durum mu? (aslında daha fazla kod gerektiren bir jQuery "kısayolunun")

Bence en yaygın olay, yayınınızda tanımladığınız olaydır; $(this)gereksiz yere bir jQuery nesnesinde kaydırma insanlar . Bunu en çok idve value(yerine $(this).val()) ile görüyorum .

Düzenleme: İşte nedenattr() durumda jQuery kullanarak yavaş olduğunu açıklayan bir makale . İtiraf: wiki etiketinden çaldı, ama sanırım soru için bahsetmeye değer.

Tekrar düzenleme: Özelliklere doğrudan erişmenin okunabilirlik / performans sonuçları göz önüne alındığında, iyi bir kuralın muhtemelen this.<attributename>mümkün olduğunda kullanmaya çalışmak olduğunu söyleyebilirim . Muhtemelen tarayıcı tutarsızlıkları nedeniyle bunun işe yaramayacağı bazı durumlar vardır, ancak muhtemelen önce bunu denemek ve işe yaramazsa jQuery'ye geri dönmek daha iyidir.

Çoğunlukla performanstan endişe ediyorsanız, ana örneğiniz kafasına çiviyi vurur. Gereksiz veya gereksiz olarak jQuery'yi çağırmak, yavaş performansın ikinci ana nedeni olan IMHO'dur (ilki zayıf DOM geçişidir).

Gerçekten aradığınız şeyin bir örneği değil , ancak bunu sık sık görmekten bahsediyorum: jQuery komut dosyalarınızın performansını hızlandırmanın en iyi yollarından biri jQuery nesnelerini önbelleğe almak ve / veya zincirleme kullanmaktır:

// 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();

Ben kesinlikle JS ve JQ arasında örtüşme olduğunu buldum. Gösterdiğiniz kod buna iyi bir örnektir. Açıkçası, JS üzerinden JQ kullanmanın en iyi nedeni basitçe tarayıcı uyumluluğudur. JS'de bir şey başarabilsem bile her zaman JQ'ya yaslanıyorum.

Bu benim kişisel görüşüm, ancak jQuery zaten JavaScript olduğundan, teorik olarak vanilya JS'den daha iyi performans gösteremediğini düşünüyorum.

Ancak pratik olarak, elle yazılmış JS'den daha iyi performans gösterebilir, çünkü kişinin elle yazılmış kodu jQuery kadar verimli olmayabilir.

Alt satır - daha küçük şeyler için vanilya JS kullanma eğilimindeyim, JS yoğun projeler için jQuery kullanmayı ve tekerleği yeniden icat etmemeyi seviyorum - aynı zamanda daha üretken.

thisDOM öğesinin ilk yanıtlayıcının canlı özellikler listesi oldukça eksiksiz.

Bazılarını tanımak ilginç de olabilir.

Belge bu olduğunda:

• this.formsBir almak için HTMLCollectiongeçerli belge formlarının,
• this.anchorsBir almak için HTMLCollectiontüm HTMLAnchorElementsile nameset olmak
• this.linksBir almak için HTMLCollectiontüm HTMLAnchorElementile s hrefseti olduğu
• this.imagesHTMLCollectiontüm HTMLImageElements bir almak için
• ve aynı kullanımdan kaldırılmış uygulamalarda olduğu gibi this.applets

Çalıştığınızda document.forms, document.forms[formNameOrId]adlandırılmış veya tanımlanmış formu alır.

Bu bir form olduğunda:

• this[inputNameOrId] adlandırılmış veya tanımlanmış alanı elde etmek için

Bu form alanı olduğunda:

• this.type alan türünü almak için

JQuery seçicileri öğrenirken, erişilmesi çok hızlı olan mevcut HTML öğeleri özelliklerini öğrenmeyi atlarız.

Her zamanki gibi bu partiye geç geliyorum.

JQuery'yi bu kadar çekici kullanmaya karar vermemi sağlayan ekstra işlevsellik değildi. Sonuçta hiçbir şey kendi işlevlerinizi yazmanızı engellemez.

Bu bellek sızıntıları önlemek için DOM değiştirirken öğrenmek için pek çok hile vardı (Ben IE hakkında konuşuyorum). Benim için her türlü sorunu yöneten tek bir merkezi kaynağa sahip olmak, benden çok daha iyi JS kodlayıcıları olan insanlar tarafından yazılmış, sürekli gözden geçirilmiş, gözden geçirilmiş ve test edilmiş tanrı gönderimi oldu.

Çapraz tarayıcı desteği / soyutlama argümanı altında bu tür düşer sanırım.

Ve elbette jQuery, ihtiyacınız olduğunda düz JS kullanımını engellemez. Her zaman ikisinin birlikte sorunsuz bir şekilde çalıştığını hissettim.

Elbette tarayıcınız jQuery tarafından desteklenmiyorsa veya düşük kaliteli bir ortamı (eski telefon?) Destekliyorsanız büyük bir .js dosyası sorun olabilir. JQuery'nin ne zaman küçük olduğunu hatırlıyor musunuz?

Ancak normalde performans farkı endişe konusu değildir. Sadece yeterince hızlı olmalı. Gigahertz CPU döngüleri her saniye boşa gidecekken, 18 ayda bir iktidarı ikiye katlamayan tek geliştirme kaynakları olan kodlayıcılarımın performansı ile daha fazla ilgileniyorum.

Şu anda erişilebilirlik konularına baktığımı ve görünüşte .innerHTML bununla hayır hayır olduğunu söyledi. Elbette jQuery .innerHTML bağlıdır, bu yüzden şimdi izin verilen biraz sıkıcı yöntemlere bağlı olacak bir çerçeve arıyorum. Ve böyle bir çerçevenin jQuery'den daha yavaş çalışacağını hayal edebiliyorum, ancak yeterince iyi performans gösterdiği sürece mutlu olacağım.

İşte teknik olmayan bir yanıt - birçok iş jQuery gibi belirli kitaplıklara izin vermeyebilir.

Aslında, Google, röportajcının "Üzgünüm, ancak jQuery kullanamazsınız" diyene kadar bilmediğiniz, kodlarının hiçbirinde jQuery'ye (Facebook'a ait olduğu için React'e) izin vermez. msgstr "XYZ Corporation'daki onaylı liste". Vanilya JavaScript her yerde, her zaman kesinlikle çalışır ve size bu sorunu asla vermez. Eğer bir kütüphaneye güveniyorsanız evet hız ve rahatlık kazanırsınız, ancak evrensellik kaybedersiniz.

Ayrıca, röportajdan bahsetmek gerekirse, diğer dezavantajı, bir kod sınavı sırasında bir JavaScript sorununu çözmek için bir kütüphane kullanmanız gerektiğini söylerseniz, sorunu gerçekten anlamadığınız gibi ortaya çıkar, ki bu biraz kötü görünüyor. Ham vanilya JavaScript ile çözerseniz, aslında anladığınızı ve önünüze attıkları sorunun her parçasını çözebileceğinizi gösterir.

$(this)şunlardan farklıdır this:

Kullanarak $(this)jQuery prototipinin nesneye aktarıldığından emin olursunuz.