Question

我创建了一个小脚本来处理低分辨率设备的响应式设计，并显示切换菜单而不是全宽度菜单。以下脚本对我来说很好，但对我来说这看起来有点乱。我需要哪些简短或做法才能使这些代码更加简约和高效？

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"});
}

)});

Answer 1

我认为你的代码真的不是那么混乱。如果你想，你可以在其他地方定义和命名这些匿名函数，并将它们传递给事件处理程序。您可以定义一个负责跟踪窗口属性的对象，然后将响应函数移动到该对象中。 WindowTracker，或者你称之为的任何东西，然后可以实现构建器和/或观察者模式，这样如果你最终添加更多的事件处理程序，你可以这样做，以便分离关注点和更多的模块化代码。

我不知道这是否会更小，但它可能是可读和合乎逻辑的。如果您正在寻找效率，您可能应该存储jquery搜索的结果，至少在内部用于函数调用。 How to save jquery selector for later use

Answer 2

我通常更喜欢在不同模块上具有声明和执行部分的代码，因此，其中一部分将是：

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目的非常有用。

我可以使用什么jQuery / Javascript简介或实践来使这些代码更简约？

2 个答案: