javascript - 代码优化: style display

Question

我根据不同的 session 制作了这两个函数，根据 session 显示/隐藏不同的 HTML 代码。关于如何简化这件事有什么想法吗？是否有可能用更少更好的代码来编写它？

// HTML / user interface for ADMIN view
function showAdminInterface() {       
      lblDropdown.style.display = "flex";
      lblDropdownforMobileOnly.style.display ="none";
      btnCreateProduct.style.display = "flex"; 
      btnCreateUser.style.display = "flex";
      pageViewProducts.style.display ="flex";
      btnSignupNav.style.display = "none";
      btnLoginNav.style.display = "none";
      btnSubscribeNav.style.display = "none";

}

  /************************************************************************/
  /************************************************************************/
  /************************************************************************/


  // HTML / user interface for USER view
  function showUserInterface() {

      lblDropdown.style.display = "flex";
      lblDropdownforMobileOnly.style.display ="none";
      pageViewProducts.style.display ="flex";
      btnEditUsersNav.style.display = "none";
      btnEditProductsNav.style.display = "none";
      btnViewSubscribersNav.style.display = "none";
      btnCreateProduct.style.display = "none";
      btnCreateUser.style.display = "none";
      btnSignupNav.style.display = "none";
      btnLoginNav.style.display = "none";

  }

Answer 1

您可以像这样分隔共享样式更改:

function initInterface() {
    lblDropdown.style.display = "flex";
    lblDropdownforMobileOnly.style.display ="none";
    pageViewProducts.style.display ="flex";
    btnSignupNav.style.display = "none";
    btnLoginNav.style.display = "none";
}

function showAdminInterface() {  
    initInterface();
    btnCreateProduct.style.display = "flex"; 
    btnCreateUser.style.display = "flex";
    btnSubscribeNav.style.display = "none";
}


function showUserInterface() {
    initInterface();
    btnEditUsersNav.style.display = "none";
    btnEditProductsNav.style.display = "none";
    btnViewSubscribersNav.style.display = "none";
    btnCreateProduct.style.display = "none";
    btnCreateUser.style.display = "none";
}

您可以创建用于显示和隐藏的辅助函数:

function hide(el) {
    el.style.display = "none"; // you can do the same with show and flex
}

function showUserInterface() {
    initInterface();
    hide(btnEditUsersNav);
    hide(btnEditProductsNav);
    hide(btnViewSubscribersNav);
    hide(btnCreateProduct);
    hide(btnCreateUser);
}

或

function showUserInterface() {
    initInterface();

    [
        btnEditUsersNav,
        btnEditProductsNav,
        btnViewSubscribersNav,
        btnCreateProduct,
        btnCreateUser
    ].forEach(hide);
}