Evitar reescribir múltiples vars -- javascript camp codereview Relacionados El problema

Prevent rewriting multiple vars


3
vote

problema

Español

Echando un vistazo al código, existe una mejor manera en JavaScript para evitar tanta repetición. En particular, RE de declarar las variables como element.getAncestorByClassName("class-name")0 , element.getAncestorByClassName("class-name")1 , element.getAncestorByClassName("class-name")2 ?

Intenté ponerlos en sus propios pares de valores clave. Desafortunadamente, eso hace que se llamen de inmediato, y los selectores que estoy consultando no están listos hasta que se llaman las funciones 9988777777776655443313 element.getAncestorByClassName("class-name")4 .

  element.getAncestorByClassName("class-name")5  
Original en ingles

Taking a look at the code, is there a better way in JavaScript to prevent so much repetition. In particular, re declaring the variables like moduleOptions, removeBtn, moveUp?

I tried putting them in their own key values pairs. Unfortunately, that causes them to be called right away, and the selectors that I'm querying are not ready until the toggleModuleOptions.show() and toggleModuleOptions.hide() functions are called.

  var toggleModuleOptions = {     show: function() {       var moduleOptions = visualModules.activeModuleContainer.querySelector('.module-options');        moduleOptions.classList.add('module-options--active');        removeBtn = visualModules.activeModuleContainer.querySelector('.js-remove');       removeBtn.addEventListener('click', deleteModule);        moveUp = visualModules.activeModuleContainer.querySelector('.js-index-up');       moveUp.addEventListener('click', move);       moveUp.direction = 'up';        moveDown = visualModules.activeModuleContainer.querySelector('.js-index-down');       moveDown.addEventListener('click', move);       moveDown.direction = 'down';     },     hide: function() {       var moduleOptions = visualModules.activeModuleContainer.querySelector('.module-options');        if(moduleOptions) {         moduleOptions.classList.remove('module-options--active');       }        removeBtn = visualModules.activeModuleContainer.querySelector('.js-remove');       removeBtn.removeEventListener('click', deleteModule);        moveUp = visualModules.activeModuleContainer.querySelector('.js-index-up');       moveUp.removeEventListener('click', move);        moveDown = visualModules.activeModuleContainer.querySelector('.js-index-down');       moveDown.removeEventListener('click', move);     }   } 
  

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

Esta versión intenta no cambiar la funcionalidad. Agregó dos funciones que reducen la duplicación de código, ambos métodos hacen uso de la sintaxis de accesorios de propiedad [] (Plaza cuadrada) de JavaScript, que permite que las funciones llamen diferentes funciones basadas en el parámetro pasado.

  putB3  

Esta versión podría cambiar algunas cosas, pero muy menor. Este siempre establece las propiedades de la dirección, incluso en la que no se estaba configurando antes de evitar necesitar la lógica condicional para configurar esas propiedades. Tampoco asigna valores a las variables desde fuera del alcance del código mostrado, que solo se dejó en caso de que fuera necesario.

  putB4  
 

This version tries not to change functionality. Added two functions that reduce code duplication, both methods make use of javascript's [](square bracket) property accessor syntax which allows the functions to call different functions based on the parameter passed in.

var addListener = function(selector, method, listener) {     var selected = visualModules.activeModuleContainer.querySelector('.js-' + selector);     selected[method + 'EventListener']('click', listener);     return selected; }; var showOrHide = function (method, direction) {     var moduleOptions = visualModules.activeModuleContainer.querySelector('.module-options');      if (moduleOptions) {         moduleOptions.classList[method]('module-options--active');     }      removeBtn = addListener('remove', method, deleteModule);      moveUp = addListener('index-up', method, move);      moveDown = addListener('index-down', method, move);      if (direction) {         moveUp.direction = 'up';         moveDown.direction = 'down';     } }; var toggleModuleOptions = {     show: function() {         showOrHide('add', true);     },     hide: function() {         showOrHide('remove', false);     } }; 

This version could change some things but very minor. This one always sets the direction properties even on the one that wasn't being set before to avoid needing conditional logic for setting those properties. It also does not assign values to variables from outside the scope of the code shown which was only left in above in case it was necessary.

var addListener = function(selector, method, listener, direction) {     var selected = visualModules.activeModuleContainer.querySelector('.js-' + selector);     selected[method + 'EventListener']('click', listener);     selected.direction = direction; }; var showOrHide = function (method) {     var moduleOptions = visualModules.activeModuleContainer.querySelector('.module-options');      if (moduleOptions) {         moduleOptions.classList[method]('module-options--active');     }      addListener('remove', method, deleteModule);      addListener('index-up', method, move, 'up');      addListener('index-down', method, move, 'down'); }; var toggleModuleOptions = {     show: function() {         showOrHide('add');     },     hide: function() {         showOrHide('remove');     } }; 
 
 
1
 
vote

Podrías poder hacer algo como esto:

  putB5  

La API sigue siendo putB6 y putB7 Pero la tarea común de encontrar los elementos es manejada por una función "privada".

Idealmente, la función putB8 no sería necesaria (o al menos no debería tener efectos secundarios), y podría hacerlo:

  putB9  

es. Encuentre los elementos una vez, y omita la función putH0 . Sin embargo, esto no necesariamente funcionará si se evalúa el JS antes de que se haya cargado la página o la página cambie tanto que los elementos tienen que encontrar y re-encontrar, para evitar referencias rancias.

Alternativamente, quizás podría manejar más de esto en el 99887776655443321 / putH2 Manual de eventos. P.ej. Si el elemento del contenedor tiene o carece de un cierto nombre de la clase, simplemente ignore el evento. De esa manera, no tendrá que agregar y eliminar los manipuladores todo el tiempo.

O, por supuesto, si los elementos son en realidad oculta , no recibirá eventos en ellos.

NUESTRO DE CURIOSIDAD: En el putH3 Verifique si putH4 existe antes de intentar eliminar un nombre de clase, pero en 99887776655443325 usted no no verifique. Me imagino que las dos funciones deberían ser más simétricas: si necesita un cheque en uno de ellos, probablemente lo necesite en ambos. O, a la inversa, usted no es necesita el cheque, el período.

 

You might be able to do something like this:

var toggleModuleOptions = (function () {   var moduleOptions, removeBtn, moveUp, moveDown;    function getElements() {     moduleOptions = visualModules.activeModuleContainer.querySelector('.module-options');     removeBtn = visualModules.activeModuleContainer.querySelector('.js-remove');     moveUp = visualModules.activeModuleContainer.querySelector('.js-index-up');     moveDown = visualModules.activeModuleContainer.querySelector('.js-index-down');   }    return {     show: function () {       getElements();       moduleOptions.classList.add('module-options--active');       removeBtn.addEventListener('click', deleteModule);       moveUp.addEventListener('click', move);       moveUp.direction = 'up';       moveDown.addEventListener('click', move);       moveDown.direction = 'down';     },      hide: function () {       getElements();       if (moduleOptions) {         moduleOptions.classList.remove('module-options--active');       }       removeBtn.removeEventListener('click', deleteModule);       moveUp.removeEventListener('click', move);       moveDown.removeEventListener('click', move);     }   }  }()); 

The API is still toggleModuleOptions.show() and toggleModuleOptions.hide() but the common task of finding the elements is handled by a "private" function.

Ideally, the getElements function wouldn't be necessary (or at least shouldn't have side-effects), and you could just do:

var toggleModuleOptions = (function () {   var moduleOptions = visualModules.activeModuleContainer.querySelector('.module-options'),       removeBtn = visualModules.activeModuleContainer.querySelector('.js-remove'),       moveUp = visualModules.activeModuleContainer.querySelector('.js-index-up'),       moveDown = visualModules.activeModuleContainer.querySelector('.js-index-down');    return { ... } 

i.e. find the elements once, and skip the getElements function. However, this won't necessarily work if the JS is evaluated before the page has loaded or the page changes so much that the elements do have to found and re-found, to avoid stale references.

Alternatively, you could perhaps handle more of this in the move/deleteModule event handlers themselves. E.g. if the container element has or lacks a certain class name, just ignore the event. That way you won't have to add and remove the handlers all the time.

Or, of course, if the elements are actually hidden, you won't receive events on them anyway.

Our of curiosity: In the hide function you check whether moduleOptions exists before trying to remove a class name, but in show you don't check. I'd imagine that the two functions should be more symmetrical: If you need a check in one of them, you probably need it in both. Or, conversely, you don't need the check, period.

 
 

Relacionados problema

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...

10  "Stardust" Simulador 2D Gravity - Seguimiento 1: Los planetas  ( Stardust 2d gravity simulator follow up 1 the planets ) 
Este es un seguimiento para el juego de gravedad del simulador 2D pregunta. Desde entonces, he desarrollado mis habilidades de JavaScript, y ahora esto...

7  Elementos de anidación con apendchild  ( Nesting elements with appendchild ) 
Quiero hacer un navegación que se vea así: <nav class="socialmediaicons"> <ul> <li> <a> <img> </a> </li> </ul> </nav> ...

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...

3  Convertir un estado de hash a un objeto JavaScript  ( Converting a state from hash into a javascript object ) 
Este código obtiene un estado desde una parte de hash de una cadena de consulta, convierte la parte de hash a un objeto JavaScript y luego intenta obtener un ...

2  IMACROS BOT para realizar refrescos  ( Imacros bot for performing refreshes ) 
Estoy tratando de simplificar este código. Parece que todo funciona como debería; Sin embargo, cuando en el bucle de actualización de Imacro, parece un poco i...

7  Merge Sort en JavaScript  ( Merge sort in javascript ) 
Implementé este tipo de fusión en JS y noté que para los números de enteros aleatorios es mucho más rápido que la construcción en funciones de tipo de todos l...

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  Enviando la página web actual a un sitio de marcadores  ( Submitting the current webpage to a bookmarking site ) 
Me gustaría escuchar sus comentarios sobre el siguiente enlace que permite a los usuarios agregar un enlace a un sitio web. Leí que join()5 es sugerido en...

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...




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