Funciones de jQuery para alternar menús de NavBAR -- javascript campo con jquery camp codereview Relacionados El problema

jQuery functions to toggle navbar menus


4
vote

problema

Español

Este es el primer script JS / JQery que había escrito para mi sitio web, hace unos meses. Alterna / Ocultar / Mostrar menús (y algunos submenús / interacciones) cuando un usuario hace clic en elementos específicos de la barra de navegación.

En este momento tengo 6 menús principales, y creo que mi código está lejos de ser optimizado.

  )0  

Básicamente, estoy repitiendo lo mismo, cuando un usuario hace clic en un elemento de NAVBAR, Cierro todos los demás menús y abre el que solicita el usuario (y restablece los submenús si hubiera alguno). Cuando el usuario hace clic en los documentos (o en cualquier lugar que esté fuera del menú que abrieron) también cierro todo.

Tengo miedo de mi código, a pesar de que funciona bien, podría ser un poco repetitivo y algo repetitivo 'codicioso (¿el código 99887766555443311 se dispara incluso cuando no hay nada que cerrar?).

Estoy buscando algunas recomendaciones, ideas o modelos de devs más experimentados que yo.

Original en ingles

This is the first JS/JQuery script I had written for my website, few months ago. It toggles/hide/show menus (and some sub-menus/interactions) when a user clicks on specific items from the navbar.

Right now I have 6 main menus, and I believe my code is far from being optimized.

$(document).ready(function(){      $(document).click(function(event) {         $("#website-header #tab-lang").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-apps").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-apps #apps-reveal").delay(300).hide(0);         $("#website-header #tab-dashboard").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-login").hide("slide", { direction: "right" }, 300);         $("#website-footer #tab-about").hide("slide", { direction: "down" }, 300);         $("#website-footer #tab-about #credits-reveal").delay(300).hide(0);         $("#website-footer #tab-contact").hide("slide", { direction: "down" }, 300);     });      // lang tab     $("#website-header #tab-lang").hide().click(function(event) {         event.stopPropagation();     });     $("#website-header #nav-lang").click(function(event) {         event.stopPropagation();         $("#website-header #tab-lang").toggle("slide", { direction: "right" }, 300);         $("#website-header #tab-apps").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-apps #apps-reveal").delay(300).hide(0);         $("#website-header #tab-dashboard").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-login").hide("slide", { direction: "right" }, 300);         $("#website-footer #tab-about").hide("slide", { direction: "down" }, 300);         $("#website-footer #tab-about #credits-reveal").delay(300).hide(0);         $("#website-footer #tab-contact").hide("slide", { direction: "down" }, 300);     });      // apps tab     $("#website-header #tab-apps").hide().click(function(event) {         event.stopPropagation();     });     $("#website-header #nav-apps").click(function(event) {         event.stopPropagation();         $("#website-header #tab-lang").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-apps").toggle("slide", { direction: "right" }, 300);         $("#website-header #tab-apps #apps-reveal").delay(300).hide(0);         $("#website-header #tab-dashboard").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-login").hide("slide", { direction: "right" }, 300);         $("#website-footer #tab-about").hide("slide", { direction: "down" }, 300);         $("#website-footer #tab-about #credits-reveal").delay(300).hide(0);         $("#website-footer #tab-contact").hide("slide", { direction: "down" }, 300);     });     $("#website-header #apps-toggle").click( function() {         $("#website-header #tab-apps #apps-reveal").slideToggle(300);     } );      // dashboard tab     $("#website-header #tab-dashboard").hide().click(function(event) {         event.stopPropagation();     });     $("#website-header #nav-dashboard").click(function(event) {         event.stopPropagation();         $("#website-header #tab-lang").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-apps").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-apps #apps-reveal").delay(300).hide(0);         $("#website-header #tab-dashboard").toggle("slide", { direction: "right" }, 300);         $("#website-header #tab-login").hide("slide", { direction: "right" }, 300);         $("#website-footer #tab-about").hide("slide", { direction: "down" }, 300);         $("#website-footer #tab-about #credits-reveal").delay(300).hide(0);         $("#website-footer #tab-contact").hide("slide", { direction: "down" }, 300);     });      // login tab     $("#website-header #tab-login").hide().click(function(event) {         event.stopPropagation();     });     $("#website-header #nav-login").click(function(event) {         event.stopPropagation();         $("#website-header #tab-lang").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-apps").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-apps #apps-reveal").delay(300).hide(0);         $("#website-header #tab-dashboard").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-login").toggle("slide", { direction: "right" }, 300);         $("#website-footer #tab-about").hide("slide", { direction: "down" }, 300);         $("#website-footer #tab-about #credits-reveal").delay(300).hide(0);         $("#website-footer #tab-contact").hide("slide", { direction: "down" }, 300);     });      // about tab     $("#website-footer #tab-about").hide().click(function(event) {         event.stopPropagation();     });     $("#website-footer #nav-about").click(function(event) {         event.stopPropagation();         $("#website-header #tab-lang").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-apps").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-apps #apps-reveal").delay(300).hide(0);         $("#website-header #tab-dashboard").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-login").hide("slide", { direction: "right" }, 300);         $("#website-footer #tab-about").toggle("slide", { direction: "down" }, 300);         $("#website-footer #tab-about #credits-reveal").delay(300).hide(0);         $("#website-footer #tab-contact").hide("slide", { direction: "down" }, 300);     });     $("#website-footer #credits-toggle").click( function() {         $("#website-footer #tab-about #credits-reveal").slideToggle(300);     } );      // contact tab     $("#website-footer #tab-contact").hide().click(function(event) {         event.stopPropagation();     });     $("#website-footer #nav-contact").click(function(event) {         event.stopPropagation();         $("#website-header #tab-lang").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-apps").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-apps #apps-reveal").delay(300).hide(0);         $("#website-header #tab-dashboard").hide("slide", { direction: "right" }, 300);         $("#website-header #tab-login").hide("slide", { direction: "right" }, 300);         $("#website-footer #tab-about").hide("slide", { direction: "down" }, 300);         $("#website-footer #tab-about #credits-reveal").delay(300).hide(0);         $("#website-footer #tab-contact").toggle("slide", { direction: "down" }, 300);         $("#website-footer #tab-contact #contact-callback").hide().css('visibility','visible');         $("#website-footer #tab-contact #callback-message").hide().css('visibility','visible');         $("#website-footer #tab-contact #callback-dismiss").hide().css('visibility','visible');     });  }) 

Basically I'm repeating the same thing, when a user clicks on a navbar item, I close every other menus and open the one the user requested (and reset the sub-menus if there were any). When the user clicks on the documents (or anywhere that is outside the menu they opened) I also close everything.

I'm afraid my code, even though it works fine, might be a bit repetitive and somewhat ressources' greedy (does the $(document).click(function(event) trigger even when there is nothing to close?).

I'm looking for some recommendations, ideas, or models from more experienced devs than I am.

     
   
   

Lista de respuestas

3
 
vote
vote
La mejor respuesta
 

No consulte los mismos nodos

Una buena práctica es almacenar nodos que usa repetidamente. Cada vez que haces clic en cualquier lugar de la página, consulta los mismos 8 elementos que es caros. Consultarlos una vez y almacenarlos

  var tabLang = $("#website-header #tab-lang");   

Luego, puede usar la variable tabLang en el events :

  tabLang.hide("slide", { direction: "right" }, 300);   

IDS de consulta

Se supone que las ID de

son únicas. Es un poco más rápido (y más corto) consultar la identificación directamente que establecer su ascendencia, así que:

  $("#website-header #tab-lang");   

debe ser:

  argparse0  

repetición

Al ver que la mayoría de sus funciones cierran las pestañas y alterna el clic en One, podría crear una función que cierra todas las pestañas y llámelo desde el 99887766655443311 . Asegurarse de asegurarse de que la pestaña correcta se altere en lugar de cerrada se pueda lograr al verificar el estado 99887766655443312 antes de que se oculte y 99887766555443313 99887766555443314 en consecuencia: < / p>

  argparse5  

Obviamente necesitaría repetir esto para cada pestaña 99887766655443316 .

mejoras adicionales

Viendo Como ya tiene un 99887766555443317 En el documento, podría mover la lógica para las pestañas en ese evento y discriminar entre las pestañas mediante la comprobación de argparse8 . Tenga en cuenta que aunque argparse9 no es un objeto jQuery. Podrías verificar la igualdad como esta:

  metavar0  

Con esto en mente, también podría reducir el tamaño de cada 99887766655443321

si maneja la función 998877766554433222 en la función metavar3 , llamando Con el elemento haciendo clic en un argumento y realiza algunas comparaciones allí. (Aunque eso no mejorará el rendimiento, solo el tamaño del archivo que no debe ser necesario para fines)

 

Don't query the same nodes

One good practice is to store nodes you use repeatedly. Every time you click anywhere on the page you query the same 8 items which is expensive. Query them once and store them

var tabLang = $("#website-header #tab-lang"); 

then you can use the variable tabLang in the events:

tabLang.hide("slide", { direction: "right" }, 300); 

Querying IDs

IDs are supposed to be unique. It is a little faster (and shorter) to query the ID directly than to establish its ancestry so:

$("#website-header #tab-lang"); 

should be:

$("#tab-lang"); 

Repetition

Seeing as most of your functions close the tabs and toggle the clicked one you could create a function that closes all tabs and call it from within the click event. Making sure the proper tab gets toggled instead of closed could be accomplished by checking the tabs state before it gets hidden and hide or show accordingly:

tabLang.click(function ( event ) {     if (tabLang.is('visible')) {         hideTabs();     } else {         hideTabs();         // we want the tab to be visible so we stop the running animation         tabLang.stop(true, true);         // and tell it to show itself         tabLang.show("slide", { direction: "right" }, 300)     } }); 

You would obviously need to repeat this for every clickable tab.

Further improvements

Seeing as you already have a click event on the document you could move the logic for the tab clicks into that event and discriminate between the tabs by checking event.target. Keep in mind though that event.target is not a jQuery object. You could check equality like this:

$(event.target).is(tabLang) // returns Boolean 

With this in mind you could also reduce the size of each click event if you handled the hide / show exception in the hideTabs() function, by calling it with the clicked element as an argument and do some comparisons there. (Though that won't improve performance, just file size which should not be necessary for you purposes)

 
 
   
   

Relacionados problema

5  Función de movimiento para un juego  ( Move function for a game ) 
Tengo una función PackageSubpackageSubpackageName6 en este juego que estoy haciendo. Funciona bien, pero me gustaría reducir un poco su tamaño. PackageSu...

1  Actualización de una página web de DRUPAL con contenido basado en texto ingresado  ( Updating a drupal web page with content based on inputted text ) 
La intención es actualizar una página web de drupal existente con contenido basado en texto ingresado en un cuadro de texto. La página existente muestra dat...

3  Página web basada en una muestra de un libro  ( Web page based on a sample from a book ) 
He creado una página web basada en una muestra de un libro. Funciona bien, pero parece haber sido demasiado complicado. dt4 ¿Es posible mejorar la clari...

2  Animaciones de la línea de tiempo  ( Timeline animations ) 
Hice recientemente esta línea de tiempo del campus para mi universidad. Al ver la línea de tiempo en un dispositivo móvil (no una tableta), la barra de nave...

3  Función de estilo sortable jquery  ( Jquery sortable style function ) 
Esta es una función de clasificación básica escrita en jQuery que mueve los elementos en la DOM alrededor para crear espacios vacíos para un gotpable (). Como...

2  Limpiando una galería de imágenes rotativas  ( Cleaning up a rotating image gallery ) 
He creado una pequeña galería de imágenes para la web. Me propuse querer 3 cosas. 1. Toda la galería tenía una capacidad de respuesta a nivel básica. 2. La ga...

8  Escribiendo un widget de jquery: plantilla  ( Writing a jquery widget templating ) 
Estoy haciendo mi primer mayor desarrollo de jQuery. Es un widget para eventos recurrentes, y es como una bestia bastante compleja. El código completo está di...

1  Sube y arrastra la imagen dentro de una imagen de máscara  ( Upload and drag the image inside a mask image ) 
Estoy permitiendo a los usuarios subir y arrastrar imágenes con este código. Dame una revisión de esto. Codepen $part = '@CRC := MD5(CONCAT_WS('#', COA...

3  Construyendo una tabla HTML utilizando JavaScript  ( Building an html table using javascript ) 
¿Una forma más legible para hacer esto? renderHtmlTable(function(tableItems) { var tableArray,_i,item,_len; tableArray = ['<table id = sampleTable ><...

1  Manipulador de eventos repetitivos para un control de interfaz de usuario de la UI  ( Repetitive event handler for a toggling ui control ) 
Siento que este tipo de código podría haber sido escrito más elegante, especialmente con las enormes afirmaciones de IF / ODS. ¿Alguien puede ayudarme a rompe...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos