0

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

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

)});
4

2 回答 2

0

我不认为您的代码真的那么混乱。如果您愿意，您可以在别处定义和命名这些匿名函数并将它们传递给事件处理程序。您可以定义一个负责跟踪窗口属性的对象，然后您可以将响应函数移动到该对象中。然后，WindowTracker 或您所称的任何名称都可以实现构建器和/或观察者模式，这样如果您最终向事件处理程序添加更多内容，您可以以允许关注点分离和更模块化代码的方式进行操作.

我不知道这是否会更小，但它可能是可读且合乎逻辑的。如果您正在寻找效率，您可能应该存储 jquery 搜索的结果，至少在内部用于函数调用。 如何保存 jquery 选择器以供以后使用

于 2013-01-13T03:14:41.660 回答
0

我通常更喜欢在不同模块上有声明和执行部分的代码，所以一部分是：

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

所以，我怎么看，第二部分将是你的“简约”代码。并且代码的每个功能部分都可以单独评估，这对于调试目的很有用。

于 2013-01-13T03:37:46.497 回答