Javascript 最初查找页面宽度，并在调整浏览器大小后进行检查

我有这个代码，但它似乎笨重的我，有没有办法简化？其要点是我在加载页面时检查页面宽度，并基于此显示或隐藏div（基于浏览器是否比480像素更宽或更薄）。然后，如果用户调整浏览器窗口的大小，我将再次检查宽度并显示/隐藏适当的div。不管怎样，这可以用jquery或js来简化

function pageWidth() {
        return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;
    }
    //Show/hide the correct div when the page loads
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").css("display", "none");
        $(".siteSearchSelect").css("display", "block");
    }
    if (pageWidth() < 480) {
        $(".siteSearchDropdown").css("display", "block");
        $(".siteSearchSelect").css("display", "none");
    }
    // Show/hide the correct dropdown when the browser window is resized
    $(window).resize(function() {
        if (pageWidth() >= 480) {
            $(".siteSearchDropdown").css("display", "none");
            $(".siteSearchSelect").css("display", "block");
        }
        if (pageWidth() < 480) {
            $(".siteSearchDropdown").css("display", "block");
            $(".siteSearchSelect").css("display", "none");
        }
    });

函数pageWidth（）{
return window.innerWidth！=null？window.innerWidth:document.body！=null？document.body.clientWidth:null；
}
//加载页面时显示/隐藏正确的div
如果（pageWidth（）>=480）{
$（“.siteSearchDropdown”）.css（“显示”、“无”）；
$（“.siteSearchSelect”）.css（“显示”、“块”）；
}
如果（pageWidth（）<480）{
$（“.siteSearchDropdown”）.css（“显示”、“块”）；
$（“.siteSearchSelect”）.css（“显示”、“无”）；
}
//调整浏览器窗口大小时显示/隐藏正确的下拉列表
$（窗口）。调整大小（函数（）{
如果（pageWidth（）>=480）{
$（“.siteSearchDropdown”）.css（“显示”、“无”）；
$（“.siteSearchSelect”）.css（“显示”、“块”）；
}
如果（pageWidth（）<480）{
$（“.siteSearchDropdown”）.css（“显示”、“块”）；
$（“.siteSearchSelect”）.css（“显示”、“无”）；
}
});

与其写两次代码，不如在

窗口中写一次。调整事件处理程序的大小，然后在
窗口上触发
调整大小
事件：

$(window).resize(function() {
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").css("display", "none");
        $(".siteSearchSelect").css("display", "block");
    }
    if (pageWidth() < 480) {
        $(".siteSearchDropdown").css("display", "block");
        $(".siteSearchSelect").css("display", "none");
    }
}).trigger('resize');

再次查看代码后，您可以使用
if/else
语句进一步优化，而不是两次运行
pageWidth（）
函数：

var $siteSearchDrioopdown = $(".siteSearchDropdown"),
    $siteSearchSelect     = $(".siteSearchSelect");
$(window).resize(function() {
    if (pageWidth() >= 480) {
        $siteSearchDrioopdown.css("display", "none");
        $siteSearchSelect.css("display", "block");
    } else {//notice the change in structure so the `pageWidth()` function is only called once
        $siteSearchDrioopdown.css("display", "block");
        $siteSearchSelect.css("display", "none");
    }
}).trigger('resize');

您不需要函数
pageWidth（）
，只需使用
$（window）.width（）
。此外，不必复制代码来显示/隐藏div，只需创建一个函数即可

function showHide() {
  var isBigLayout = $(window).width() > 480;
  $(".siteSearchDropdown").css("display", isBigLayout ? "none" : "block");
  $(".siteSearchSelect").css("display", isBigLayout ?  "block" : "none");
}


$(window).resize(showHide); //Run when resized
showHide(); // Run initially, or $(showHide) to run after DOM is loaded

如果你能瞄准CSS3兼容的浏览器，你应该看看媒体查询。或者，还有一些javascript库，例如，为较旧的浏览器提供相同的功能。
类似于：

function pageWidth() {
    return window.innerWidth || document.body.clientWidth;
}

function reconfig() {
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").hide();
        $(".siteSearchSelect").show();
    } else {
        $(".siteSearchDropdown").show();
        $(".siteSearchSelect").hide();
    }
}

$(window).resize(reconfig);

reconfig();

我不会一开始就触发一个调整大小的命令，这很不礼貌。。。如果你想让代码在页面加载时运行，只需在页面加载时调用它，这样更直接。我喜欢它的阅读方式。我发现它会减少少量开销，并将所有代码放在一个地方（对我来说更可读）。这里的最后一个选项是最精简的，我同意Jasper的观点，对我来说更可读。我不同意它更可读，但我的观点是它容易出现错误。如果其他人钩住了resize事件，那么您将在不应该的时候触发它，而其他resize处理程序将在不应该的时候运行。没什么大不了的，但我不喜欢编写导致副作用的代码。@JuanMendes如果这是个问题，那么您可以为事件命名名称空间：
$（window）.on（'resize.only do this'，function（）{}）.trigger（'resize.only do this'）：事实上，是的，我正在使用媒体查询来查询其他内容，可能也可以将其用于此，因为我只是根据屏幕大小显示/隐藏。
function showHide() {
  var isBigLayout = $(window).width() > 480;
  $(".siteSearchDropdown").css("display", isBigLayout ? "none" : "block");
  $(".siteSearchSelect").css("display", isBigLayout ?  "block" : "none");
}


$(window).resize(showHide); //Run when resized
showHide(); // Run initially, or $(showHide) to run after DOM is loaded

function pageWidth() {
    return window.innerWidth || document.body.clientWidth;
}

function reconfig() {
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").hide();
        $(".siteSearchSelect").show();
    } else {
        $(".siteSearchDropdown").show();
        $(".siteSearchSelect").hide();
    }
}

$(window).resize(reconfig);

reconfig();