javascript - 最初找到页面宽度，并在调整浏览器大小后检查它

Question

我可以使用这段代码，但它对我来说似乎很笨拙，有没有办法简化？它的要点是我在页面加载时检查页面宽度并显示或隐藏基于它的 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");
        }
    });

Answer 1

与其编写两次代码，不如在 window.resize 事件处理程序中编写一次，然后在 window 上触发一个 resize 事件元素:

$(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');

此外，由于这段代码会在有人调整浏览器大小时运行多次，因此您应该通过缓存选择器来优化您的代码:

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

注意:我提到过在调整浏览器大小时，resize 事件处理程序代码如何运行多次。要亲自测试，只需将此代码添加到页面并观察您的开发者控制台运行:

$(window).resize(function (e) {
    console.log(e);
});

再次查看代码后，您可以使用 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');