JS/jQuery - 更好地在$（document）.ready中或在被調用的函數中運行事件處理程序

*注意：以下問題並不是針對人們的意見，而是針對網頁的最佳處理速度和jQuery等

我現在有下面的下面的「測試」代碼格式代碼：

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

我的問題是：應該在事件處理程序（而不是事件偵聽器）是相同的代碼結構作爲$(document).ready();？或者應該是這樣的：

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

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

即應$(document).ready();只引用該處理器還是應該（聽力和處理）整個動作是在$(document).ready();

聽衆什麼是正確的方法這樣做，以便最大限度地提高可用性/ jQuery的，JS的功率等

來源

2016-08-04 4lackof

[This]（http://blog.cateptus.eu/seb/2011/01/javascript-call-performance-just-inline-it/）博客文章說，它更快，沒有單獨的功能 –

我會說，當你認爲你可能再次使用它時，你應該只聲明一個函數，考慮到你正在使用jQuery的所有東西，這樣的微觀優化也不應該成爲你的擔心。雖然這與你的問題無關，但你的第一個和第二個代碼是不同的，一個會刪除，然後在每個'.my-class'元素上重新添加「active」類，而第二個代碼只會對點擊的元素起作用。 – Yanaro

我會第一個代碼片斷去：

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

在DOM準備就緒之前，您沒有對function toggler做任何事情，所以爲什麼要在外面定義它。

來源

2016-08-04 23:05:36

-1

對於給出一個一般的和明顯的答案，我很抱歉：可以肯定的是，只有一種方法，做基準測試。使用PHP生成100個元素，我們可以這樣做：

<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>

創建與其他JavaScript實現另一個PHP文件，然後運行它們。查看頁面/ DOM需要加載多長時間，以及管理點擊事件需要多長時間（使用瀏覽器工具包）。如果您無法注意到兩個版本之間的任何差異，請增加生成元素的數量。

通過這種方式可以幫助您解決所有可能遇到的優化問題（「誠實」的基準測試很難做到）。

來源

2016-08-04 23:08:54 technico

JS/jQuery - 更好地在$（document）.ready中或在被調用的函數中運行事件處理程序

回答

相關問題