JS/jQuery - Olay işleyicisini $ (document) .ready veya daha önce çağrılan işlevde daha iyi çalıştır

* Not: Aşağıdaki soru insanların fikirleri için değil, web sayfası için en iyi işlem hızı açısından sorulmaktadır. jQuery vb

Şu anda aşağıdaki "Test" kod biçimi izleyen koduna sahip:

$(document).ready(function() { 
    $('.my-class').on('click') { 
    if ($('.my-class').hasClass('active') { 
     $('.my-class').removeClass('active'); 
     return; 
    } 
    $('.my-class').addClass('active'); 
    } 
});

sorum şu: olay işleyicisi (değil olay dinleyicisi) aynı kod yapısında olmalıdır $(document).ready(); olarak mı? Yoksa bu gibi görünmelidir:

function toggler(obj) {  
    if ($(obj).hasClass('active') { 
    $(obj).removeClass('active'); 
    return; 
    } 
    $(obj).addClass('active'); 
} 

$(document).ready(function() { 
    $('.my-class').on('click') { 
    toggler(this); 
    } 
});

yani $(document).ready(); sadece işleyicileri başvuru ya da (dinleme ve kullanım) tüm eylem $(document).ready();

olmalıdır dinleyicileri olmalıdır doğru yolu nedir bunu yaparken vb kullanılabilirlik/jQuery, JS gücünü, maksimize edecek şekilde

kaynak

2016-08-04 4lackof

[This] (http://blog.calyptus.eu/seb/2011/01/javascript-call-performance-just-inline-it/) blog yazısı, ayrı bir işlevsiz olarak daha hızlı olduğunu söylüyor –

Bunu söyleyebilirim Sadece ikinci bir kez kullanabileceğinizi düşündüğünüzde bir işlev beyan etmelisiniz, ayrıca mikro optimizasyonun her şeyin jQuery'sini kullandığınızı düşünerek endişeniz olmaması gerekir. Bu sorununla hiçbir ilgisi olmamasına rağmen, ilk ve ikinci kodunuz farklıdır, biri kaldırır, sonra her ".my sınıfı" öğeye "etkin" sınıfı yeniden eklenirken, ikincisi yalnızca tıklanan birimde hareket eder . – Yanaro

ben kodunun ilk snippet'iyle giderdim

$(document).ready(function() { 
    $('.my-class').on('click') { 
    if ($('.my-class').hasClass('active') { 
     $('.my-class').removeClass('active'); 
     return; 
    } 
    $('.my-class').addClass('active'); 
    } 
});

DOM hazır olmadan önce function toggler ile hiçbir şey yapmıyorsunuz, bu yüzden neden dışarıda tanımlayın.

kaynak

2016-08-04 23:05:36

-1

Genel ve açık bir yanıt verdiğim için üzgünüm: Emin olmak için, tek bir yol, kıyaslama yapıyor. 100 elemanlarını üretmek için PHP kullanarak, yapabileceği:

<html><head> 
... 
</head><body> 
<?php 
    for ($i=0;$i<100;$i++){ 
     echo '<div class="my-class">Test</div>'; 
    } 
?> 
<script> 
function toggler(obj) {  
    if ($(obj).hasClass('active') { 
    $(obj).removeClass('active'); 
    return; 
    } 
    $(obj).addClass('active'); 
} 

$(document).ready(function() { 
    $('.my-class').on('click') { 
    toggler(this); 
    } 
}); 
</script> 
</body></html>

sonra, diğer javascript uygulaması ile başka bir php dosyası oluşturun onları çalıştırmak. Sayfanın/DOM'ın yüklenme süresini ve tıklama etkinliğini yönetmek için ne kadar sürdüğünü (tarayıcı araç takımınızı kullanarak) bakın. İki sürüm arasında herhangi bir fark olduğunu fark edemezseniz, generlenmiş öğelerin sayısını artırın.

Bu şekilde ilerlemek, karşılaşabileceğiniz her optimizasyon problemini çözmenize yardımcı olacaktır ("dürüst" ölçütler yapılması zor bir zaman dilimi).

kaynak

2016-08-04 23:08:54 technico

JS/jQuery - Olay işleyicisini $ (document) .ready veya daha önce çağrılan işlevde daha iyi çalıştır

cevap

İlgili konular