SORU
10 Ocak 2011, PAZARTESİ


Vanilya JavaScript vs kullanmak için ne zaman bir WordPress kullanmak?

Bazı uygulamalar var izleme ortak bir WordPress kullanmak soruları cevaplamaya çalışırken/olsa da, aslında sağlayan javascript, DV yerine kullandığını fark ettimdaha az yazmak ve yapmak... aynı miktarda. Ve ayrıca performans yararlar olabilir.

Belirli bir örnek

$(this) vs this

Bir click olayı tıklandığında nesne kimliği başvuru içinde

bir WordPress kullanmak

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

Javascript

this.id;

Bu gibi herhangi bir diğer ortak uygulamaları var mıdır? Bazı Javascript işlemleri daha kolay başarılı olabilir, karışımı içine bir WordPress kullanmak getirmeden. Ya bu az rastlanan bir durumdur? (bir jQuery "kısayol" aslında daha fazla kod gerektiren)

DÜZENLEME :Cevaplar düz javascript performans vs jQuery konusunda takdir ediyorum, aslında çok daha nicel cevaplar arıyorum.JQuery kullanırkenaslında bir daha (okunabilirlik/yoğunluk) kalacağı örnekleri düz javascript kullanmak yerine $() kullanarak. Örnek ek olarak, orijinal sorumu verdim.

CEVAP
10 Ocak 2011, PAZARTESİ


  • 11* *bildiğiniz gibi)
  • this.value (en giriş türleri. bildiğim tek sorunları <select> Safari value özellikler <option> element veya radyo girişi onun üzerinde ayarlanmış değil YANİ.)
  • this.className ya da koca bir "" özelliği . sınıf ayarlamak için
  • Bir karşı this.selectedIndex 18* *seçilen dizin
  • <option> öğelerin bir listesini almak için <select> karşı this.options
  • Metin için <option> bir içeriğe karşı this.text
  • <tr> öğeleri koleksiyonu almak için <table> karşı this.rows
  • Onun hücreleri almak için <tr> (td ve th) karşı this.cells
  • Doğrudan bir ebeveyn olsun this.parentNode
  • checkbox Thanks @Tim Down bir denetlenen durumu için this.checked
  • option Thanks @Tim Down bir seçilmiş devlet için this.selected
  • input Thanks @Tim Down bir devre dışı durumunu almak için this.disabled
  • input Thanks @Tim Down bir salt okunur durumunu al this.readOnly
  • href <a> bir elemanı this.href
  • href kendi etki alanı almak <a> bir elemanı this.hostname
  • href kendi yolunu almak için <a> bir elemanı this.pathname
  • href onun bu sorgu dizesi almak için <a> bir elemanı this.search
  • src için geçerli olduğu bir öğe karşı this.src

...Siz anladınız sanırım.

Performans önemli olduğu zamanlar olacaktır. Eğer bir döngü defalarca bir şeyler yapmak, hendek bir WordPress kullanmak isteyebilirsiniz.

Genel olarak değiştirebilirsiniz:

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

ile:

Yukarıdaki kötü kaleme alınmış. getAttribute bir yedek değil, ama bir öznitelik sunucudan gönderilen değerini almak ve setAttribute karşılık gelen, ayarlayın. Bazı durumlarda gerekli.

Aşağıda cümle biraz kapalı. Daha iyi bir tedavi için See this answer.

el.getAttribute('someName');

...erişim için bir doğrudan bağlıyor. Öznitelikleri özellikleri aynı birbirimizi bazen ayna olsa) olduğunu unutmayın. Elbette setAttribute çok var.

Belirli bir türün tüm etiketleri açmak için gereken bir sayfa aldığı bir durumu var diyelim. Kısa ve jQuery ile çok kolay

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

Ama eğer çok varsa, küçük bir native DOM API 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, daha iyi bir WordPress kullanmak sürümünden daha gerçekleştirir, oldukça kısa ve kolay bir kişisel kütüphane yeniden kullanılabilir bir fonksiyon içine yapılabilir.

Olabilir gibi görünüyor gibi sonsuz bir döngü ile dış while çünkü while(spans[0]) ama çünkü ile uğraştığımızı bir "canlı liste" olur güncelleştirilmiş zaman yaptığımız parent.removeChild(span[0]);. Bu bir Dizi (ya da Dizi gibi nesne) yerine çalışırken dışarı özledik bu güzel bir özellik.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • ADDVOiCE

    ADDVOiCE

    28 Mayıs 2009
  • Videogamerz | Call of Duty

    Videogamerz

    5 NİSAN 2012
  • XxMinayaxX1

    XxMinayaxX1

    9 Mayıs 2012