jQuery vs document.querySelectorAll

Birkaç kez jQuery en güçlü varlık DOM sorgu öğeleri manipüle yolu olduğunu duydum: düzenli javascript yapmak çok zor karmaşık sorgular oluşturmak için CSS sorguları kullanabilirsiniz. Ancak, bildiğim kadarıyla , Internet Explorer 8 ve üzeri sürümlerde desteklenen document.querySelectorveya ile aynı sonucu elde edebilirsiniz document.querySelectorAll.

Yani soru şu: jQuery'nin en güçlü varlığı saf JavaScript ile elde edilebiliyorsa neden 'risk' yükü?

JQuery, çapraz tarayıcı AJAX, güzel olay ekleme vb. Gibi sadece CSS seçicilerden daha fazlası olduğunu biliyorum. Ancak sorgulama kısmı jQuery gücünün çok büyük bir parçası!

Düşüncesi olan var mı?

document.querySelectorAll() tarayıcılar arasında birkaç tutarsızlık var ve eski tarayıcılarda desteklenmiyor ^{Bu, günümüzde muhtemelen sorun yaratmayacaktır} . Çok sezgisel bir kapsam mekanizmasına ve çok hoş olmayan bazı özelliklere sahiptir . Ayrıca javascript ile, birçok durumda yapmak isteyebileceğiniz bu sorguların sonuç kümeleriyle çalışmakta zorlanıyorsunuz. : jQuery gibi bunlar üzerinde çalışmak için işlevler sağlamaktadır filter(), find(), children(), parent(), map(), not()ve çok daha fazlası. Sözde sınıf seçicileri ile çalışma jQuery yeteneğinden bahsetmiyorum bile.

Ancak, bu şeyleri jQuery'nin en güçlü özellikleri olarak düşünmüyorum, ancak dom'da (etkinlikler, stil, animasyon ve manipülasyon) bir çapraz tarama uyumlu şekilde veya ajax arabiriminde "çalışma" gibi diğer şeyler .

Seçici motorun sadece jQuery'den olmasını istiyorsanız, jQuery'nin kendisinin kullandığı: Sizzle Bu şekilde, kötü ek yükü olmayan jQuerys Selector motorunun gücüne sahip olursunuz.

EDIT: Sadece kayıt için, ben büyük bir vanilya JavaScript hayranıyım. Bununla birlikte, bazen 1 satır jQuery yazacağınız 10 satır JavaScript'e ihtiyacınız vardır.

Tabii ki böyle jQuery yazmak için disiplinli olmak zorunda:

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();

İkincisi oldukça açıkken, bunu okumak son derece zordur:

$('ul.first')
   .find('.foo')
      .css('background-color', 'red')
.end()
   .find('.bar')
      .css('background-color', 'green')
.end();

Eşdeğer JavaScript, yukarıdaki sahte kodla daha karmaşık bir şekilde gösterilecektir:

1) Elemanı bulun, tüm elemanı veya sadece ilkini almayı düşünün.

// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");

2) Bazı (muhtemelen iç içe veya özyinelemeli) döngüler aracılığıyla alt düğüm dizisi üzerinde yineleyin ve sınıfı kontrol edin (sınıf listesi tüm tarayıcılarda bulunmaz!)

//.find('.foo')
for (var i = 0;i<e.length;i++){
     // older browser don't have element.classList -> even more complex
     e[i].children.classList.contains('foo');
     // do some more magic stuff here
}

3) css stilini uygulayın

// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"

Bu kod, jQuery ile yazdığınız kod satırlarının en az iki katı olacaktır. Ayrıca , yerel kodun ciddi hız avantajını (güvenilirliğin yanı sıra) tehlikeye atacak çapraz tarayıcı sorunlarını da göz önünde bulundurmanız gerekir .

Sayfanızı IE8 veya daha yeni bir sürüm için optimize ediyorsanız, jquery'ye ihtiyacınız olup olmadığını gerçekten düşünmelisiniz. Modern tarayıcılar jquery'nin sağladığı birçok varlığa sahiptir.

Performansı önemsiyorsanız, yerel javascript'i kullanarak inanılmaz performans avantajlarına sahip olabilirsiniz (2-10 daha hızlı) : http://jsperf.com/jquery-vs-native-selector-and-element-style/2

Ben bir div-TagCloud dönüştürülmüş jquery için yerli javascript (IE8 + uyumlu), sonuçlar etkileyicidir. Sadece biraz ek yük ile 4 kat daha hızlı.

                    Number of lines       Execution Time                       
Jquery version :        340                    155ms
Native version :        370                    27ms

Jquery gerçekten hoş bir genel bakış sağlar, hangi tarayıcı yöntemlerinin yerine yerel yöntemlerin yerini alır.

http://youmightnotneedjquery.com/

Ek: Yerel yöntemlerin jquery ile nasıl rekabet ettiğini daha fazla hız karşılaştırması

• Dizi: $ .inArray vs Array.indexOf: Jquery% 24 daha yavaş

• DOM: $ .empty vs Düğüm.inner: HTML: Jquery% 97 daha yavaş

• DOM: $ .on vs Düğüm.addEventListe: Jquery% 90 daha yavaş

• DOM: $ .find vs Düğüm.queryselectorall: Jquery% 90 daha yavaş

• Dizi: $ .grep vs Array.filter: Yerel% 70 daha yavaş

• DOM: $ .show / hide vs görüntü yok: Jquery% 85 daha yavaş

• AJAX: $ .ajax vs XMLHttpRequest: Jquery% 89 daha yavaş

• Yükseklik: $ .outerHeight vs ofsetHeight: Jquery% 87 daha yavaş

• Attr: $ .attr vs setÖzellik: Jquery% 86 daha yavaş

JQuery'nin neden bu kadar popüler olduğunu anlamak için nereden geldiğimizi anlamak önemlidir!

Yaklaşık on yıl önce, en iyi tarayıcılar IE6, Netscape 8 ve Firefox 1.5'ti. O günlerde, DOM'dan bir öğe seçmenin çok az tarayıcılar arası yolu vardı Document.getElementById().

Yani, jQuery 2006'da piyasaya sürüldüğünde , oldukça devrimciydi. O zamanlar jQuery, HTML öğelerinin kolayca seçilmesi / değiştirilmesi ve olayların tetiklenmesi için standardı belirledi, çünkü esnekliği ve tarayıcı desteği daha önce görülmemişti.

Şimdi, on yıldan fazla bir süre sonra, jQuery'yi bu kadar popüler yapan birçok özellik javaScript standardına dahil edildi:

• JQuery's yerine $()artık kullanabilirsinizDocument.querySelectorAll()
• JQuery's yerine $el.on(), artıkEventTarget.addEventListener()
• JQuery's yerine $el.toggleClass(), artıkElement.classList.toggle()
• ...

Bunlar genel olarak 2005'te mevcut değildi. Bugün oldukları gerçeği, jQuery'i neden kullanmamız gerektiği sorusunu açıkça ortaya koyuyor. Ve aslında, insanlar giderek jQuery kullanmamız gerekip gerekmediğini merak ediyorlar .

JavaScript'i jQuery olmadan yapabileceğiniz kadar iyi anladığınızı düşünüyorsanız, lütfen anlayın! JQuery'i kullanmak zorunda hissetmeyin, çünkü birçok kişi bunu yapıyor!

Çünkü jQuery daha fazlasını yapabilir querySelectorAll.

Her şeyden önce, jQuery (ve özellikle Sizzle), IE7-8 gibi CSS2.1-3 seçicilerini desteklemeyen eski tarayıcılar için çalışır.

Artı, Sizzle (jQuery'nin arkasındaki seçici motor) size :selectedsözde sınıf, gelişmiş bir :not()seçici, $("> .children")vb. Gibi daha karmaşık bir sözdizimi gibi birçok daha gelişmiş seçici enstrüman sunuyor .

Ve jQuery'nin sunabileceği her şeyi (eklentiler ve API'lar) kusursuz bir şekilde çapraz tarayıcılar yapar.

Evet, basit sınıf ve kimlik seçicilerine güvenebileceğinizi düşünüyorsanız, jQuery sizin için çok fazladır ve abartılı bir ödeme ödersiniz. Ama yapmazsanız ve tüm jQuery iyiliğinden yararlanmak istiyorsanız, onu kullanın.

jQuery's Sizzle seçici motoru kullanabilir querySelectorAll varsa kullanılabilir. Ayrıca, düzgün sonuçlar elde etmek için tarayıcılar arasındaki tutarsızlıkları da giderir. Tüm jQuery'yi kullanmak istemiyorsanız, Sizzle'yi ayrı ayrı kullanabilirsiniz. Bu icat etmek için oldukça temel bir tekerlek.

İşte jQuery (w / Sizzle) sizin için sıralayan şeyleri gösteren kaynaktan kiraz seçimleri:

Safari ilginç modu:

if ( document.querySelectorAll ) {
  (function(){
    var oldSizzle = Sizzle,
      div = document.createElement("div"),
      id = "__sizzle__";

    div.innerHTML = "<p class='TEST'></p>";

    // Safari can't handle uppercase or unicode characters when
    // in quirks mode.
    if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
      return;
    }

Bu güvenlik görevlisi başarısız olursa, Sizzle'ın geliştirilmiş bir sürümü değildir querySelectorAll. Ayrıca IE, Opera ve Blackberry tarayıcılarındaki tutarsızlıklar için özel tutamaçlar vardır.

  // Check parentNode to catch when Blackberry 4.6 returns
  // nodes that are no longer in the document #6963
  if ( elem && elem.parentNode ) {
    // Handle the case where IE and Opera return items
    // by name instead of ID
    if ( elem.id === match[3] ) {
      return makeArray( [ elem ], extra );
    }

  } else {
    return makeArray( [], extra );
  }

Ve her şey başarısız olursa, sonucu döndürecektir oldSizzle(query, context, extra, seed).

Kodun sürdürülebilirliği açısından, yaygın olarak kullanılan bir kitaplığa bağlı kalmanın birkaç nedeni vardır.

En önemlilerinden biri, iyi belgelenmiş olmaları ve kütüphaneler ile yardımın bulunabileceği ... demek ... stackexchange gibi topluluklara sahip olmalarıdır. Özel kodlanmış bir kitaplıkla, kodlayıcılar kodu yazmaktan daha fazla zaman harcamak istemedikçe kaynak koduna ve belki de nasıl yapılır belgesine sahip olursunuz ki bu son derece nadirdir.

İçin kendi kütüphane kudreti çalışmalarını Yazma sana , ama sonraki masada oturan stajyer kolay bir zaman jQuery gibi bir şeyle hızına kalkarken olabilir.

İsterseniz ağ efekti olarak adlandırın. Bu, kodun jQuery'de daha üstün olacağı anlamına gelmez; sadece kodun özlü doğası, yalnızca görüntülemekte olduğunuz dosyada bir kerede daha fazla işlevsel kod görünür olduğu için, tüm beceri seviyelerindeki programcılar için genel yapıyı kavramanızı kolaylaştırır. Bu anlamda 5 kod satırı 10'dan daha iyidir.

Özetlemek gerekirse, jQuery ana yararları özlü kod ve her yerde olduğu gibi görüyorum.

Aynı özniteliği uygulamak istiyorsam, örneğin "sınıfım" sınıfının tüm öğelerini gizlemek istersem bir karşılaştırma. Bu jQuery kullanmak için bir nedenidir.

jQuery:

$('.my-class').hide();

JavaScript:

var cls = document.querySelectorAll('.my-class');
for (var i = 0; i < cls.length; i++) {
    cls[i].style.display = 'none';
}

JQuery zaten çok popüler olduğunda, document.querySelector () işlevi $ () gibi davranmalıdır. Bunun yerine, document.querySelector () yalnızca ilk eşleşen öğeyi seçer, bu da yalnızca yarısını faydalı yapar.

resmi sitenin dediği gibi: "jQuery: Daha Az Yaz, Daha Fazlasını Yap, JavaScript Kütüphanesi"

herhangi bir kütüphane olmadan aşağıdaki jQuery kodunu çevirmeye çalışın

$("p.neat").addClass("ohmy").show("slow");

Bence gerçek cevap, jQuery'nin çok daha önce geliştirildiğidir. querySelector/querySelectorAll tüm büyük tarayıcılarda kullanılabilir hale gelmesinden .

JQuery'nin ilk sürümü 2006 yılında yapıldı . Aslında, jQuery bile CSS seçicileri uygulayan ilk kişi değildi .

IE son tarayıcı oldu uygulamak querySelector/querySelectorAll. 8. versiyonu 2009'da piyasaya sürüldü .

Şimdi, DOM elemanları seçicileri artık jQuery'nin en güçlü noktası değil. Bununla birlikte, hala öğesinin css ve html içeriğini değiştirmek için kısayollar, animasyonlar, olaylar bağlayıcı, ajax gibi, kolunda birçok güzellik var.

Eski soru, ama yarım on yıl sonra tekrar gözden geçirmeye değer. Burada sadece jQuery seçici yönünü tartışıyorum.

document.querySelector[All]IE8'e kadar tüm mevcut tarayıcılar tarafından desteklenmektedir , bu nedenle uyumluluk artık sorun değildir. Ayrıca konuşmak için hiçbir performans sorunu bulamadım (daha yavaş olması gerekiyordu document.getElementById, ancak kendi testim biraz daha hızlı olduğunu gösteriyor).

Bu nedenle, bir elemanın doğrudan manipüle edilmesi söz konusu olduğunda, jQuery yerine tercih edilmelidir.

Örneğin:

var element=document.querySelector('h1');
element.innerHTML='Hello';

aşağıdakilerden çok daha üstündür:

var $element=$('h1');
$element.html('hello');

Hiç bir şey yapmak için, jQuery (bir kez yukarıdaki gibi jQuery onunla ne yaptığını görmek için yukarıdaki kod üzerinden izlenen) kod satırları üzerinden çalıştırmak zorunda. Bu açıkça herkesin zamanının kaybıdır.

JQuery'nin diğer önemli maliyeti, her şeyi yeni bir jQuery nesnesinin içine sarmasıdır. Bu yük, özellikle nesneyi tekrar paketinden çıkarmanız veya orijinal öğede zaten açık olan özelliklerle başa çıkmak için nesne yöntemlerinden birini kullanmanız gerektiğinde boşa gider.

Bununla birlikte, jQuery'nin bir avantajı olduğu durumlarda koleksiyonları işleme biçimindedir. Gereksinim birden çok öğenin özelliklerini ayarlamaksa , jQuery'de bunun gibi bir eachşeye izin veren yerleşik bir yöntem vardır:

var $elements=$('h2');  //  multiple elements
$elements.html('hello');

Vanilla JavaScript ile bunu yapmak için şöyle bir şey gerekir:

var elements=document.querySelectorAll('h2');
elements.forEach(function(e) {
    e.innerHTML='Hello';
});

Bazıları yıldırıcı buluyor.

jQuery seçicileri de biraz farklıdır, ancak modern tarayıcılar (IE8 hariç) fazla fayda sağlamaz.

Kural olarak, yeni projeler için jQuery kullanmaya karşı uyarıyorum :

• jQuery, projenin ek yüküne ve üçüncü taraflara bağımlılığınıza katkıda bulunan harici bir kütüphanedir.
• jQuery işlevi çok , işleme pahalıdır.
• jQuery, öğrenilmesi gereken ve kodunuzun diğer yönleriyle rekabet edebilecek bir metodoloji uygular.
• jQuery, JavaScript'teki yeni özellikleri ortaya çıkarmak için yavaştır.

Yukarıdakilerin hiçbiri önemli değilse, o zaman ne yapacağınızı yapın. Ancak jQuery, platformlar arası geliştirme için eskisi kadar önemli değil, çünkü modern JavaScript ve CSS eskisinden çok daha ileri gidiyor.

Bu, jQuery'nin diğer özelliklerinden bahsetmez. Ancak, onların da daha yakından bakmaları gerektiğini düşünüyorum.

$ ("# id") vs document.querySelectorAll ("# id")

Anlaşma $ () işlevi ile bir dizi yapar ve sonra sizin için ayırır ama document.querySelectorAll () ile bir dizi yapar ve onu parçalamak zorunda.

Sadece bunun üzerine bir yorum, malzeme tasarımı lite kullanırken, jquery seçici bir nedenden dolayı malzeme tasarımı için özelliği döndürmez.

İçin:

<div class="logonfield mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="myinputfield" required>
        <label class="mdl-textfield__label" for="myinputfield">Enter something..</label>
      </div>

Bu çalışıyor:

document.querySelector('#myinputfield').parentNode.MaterialTextfield.change();

Bu değil:

$('#myinputfield').parentNode.MaterialTextfield.change();