我可以使用哪些jQuery/Javascript簡寫或做法來使此代碼更簡約？

我創建了一個小腳本來處理針對較低分辨率設備的響應式設計，並顯示切換菜單而不是全寬菜單。以下腳本對我來說工作正常，但對我來說這看起來有點混亂。我需要什麼樣的簡化或做法才能使此代碼更加簡約和高效？我可以使用哪些jQuery/Javascript簡寫或做法來使此代碼更簡約？

resetMenu（）函數正在處理以保留特定分辨率的css，同時瀏覽器從正常模式調整爲切換模式，這是否是一種好的做法？

$(document).ready(function($) { 
function resetMenu() { 
    $('#top-menu li, #search-form, .social').css({"display":"block"}); 
    $('#top-menu li').css({"display":"inline-block"}); 
}; 
$(window).resize(function() { 
if($(window).width() > 640){ 
    $(resetMenu()); 
} 
else{ 
    $('#top-menu li, #search-form, .social').css({"display":"none"}).fadeOut(1000); 
    $('#top-menu li:nth-child(2)').css({"display":"none"}); 
} 
}); 

$(".togglebutton").toggle(
function() { 
    if($(window).height() < 360){ 
     $('#top-menu li').css({"display":"inline-block"}).fadeIn(500); 
     $('#top-menu li:nth-child(2)').css({"display":"none"}); 
     $('#search-form, .social').css({"display":"block"}).fadeIn(500); 
     $('#top-menu li').css({"border":"none"}); 
    } 
    else{ 
     $('#top-menu li, #search-form, .social').css({"display":"block"}).fadeIn(1000); 
     $('#top-menu li:nth-child(2)').css({"display":"none"}); 
    } 
}, 
function() { 
    $('#top-menu li, #search-form, .social').css({"display":"none"}).fadeOut(1000); 
    $('#top-menu li:nth-child(2)').css({"display":"none"}); 
} 

)});

來源

2013-01-13 Rajender Joshi

我推薦的一件事是緩存你的選擇器。連續調用'$（'＃top-menu li'）'會導致性能壓力。此外，調用'$（'＃top-menu'）。find（'li'）'會更快。 – Syon

直接調用'resetMenu（）'，不要將它封裝在'$（）'中。在'resetMenu（）'的第一行中選擇'＃top-menu li'，因爲函數的第二行改變了這些元素的CSS屬性。 – nnnnnn

適當的縮進應該在極簡之前。 –

我通常喜歡這對不同的模塊，因此申報和執行部分的代碼，一個部分是：

var one = $('#top-menu li') 
var two = $('#top-menu li, #search-form, .social'); 
var three = $('#top-menu li:nth-child(2)'); 
var four = $('#search-form, .social') 

function toggleIn() { 
    if($(window).height() < 360){ 
     one.css({"display":"inline-block"}).fadeIn(500); 
     three.css({"display":"none"}); 
     four.css({"display":"block"}).fadeIn(500); 
     one.css({"border":"none"}); 
    } 
    else{ 
     two.css({"display":"block"}).fadeIn(1000); 
     three.css({"display":"none"}); 
    } 
}, 

function toggleOut() { 
    two.css({"display":"none"}).fadeOut(1000); 
    three.css({"display":"none"}); 
} 

function resetMenu() { 
    one.css({"display":"block"}); 
    two.css({"display":"inline-block"}); 
};

而對方只是：

$(window).resize(function() { 
    if($(window).width() > 640){ 
     $(resetMenu()); 
    } 
    else{ 
     two.css({"display":"none"}).fadeOut(1000); 
     three.css({"display":"none"}); 
    } 
}); 

$(".togglebutton").toggle(toggleIn, toggleOut);

那麼，如何我看到它，第二部分將是你的「簡約」代碼。代碼的每個功能部分都可以單獨進行評估，可用於debbugin目的。

來源

2013-01-13 03:37:46 limoragni

我不認爲你的代碼真的很混亂。如果你想要，儘管你可以在別處定義和命名這些匿名函數並將它們傳遞給事件處理程序。您可以定義一個負責跟蹤窗口屬性的對象，然後您可以將您的響應函數移動到該對象中。 WindowTracker或者其他任何你稱之爲的東西都可以實現構建器和/或觀察者模式，這樣如果你最終爲你的事件處理器添加更多的東西，你可以這樣做，以便分離關注點和更多的模塊化代碼。

我不知道這是否會更小，但它可能是可讀和邏輯的。如果你正在尋找效率，你可能應該存儲你的jQuery搜索的結果，至少在內部用於函數調用。 How to save jquery selector for later use

來源

2013-01-13 03:14:41 Hath995

我可以使用哪些jQuery/Javascript簡寫或做法來使此代碼更簡約？

回答

相關問題