entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

optimizar el codigo con event delegation

para que mi codigo sea mas eficiente necesito optimizarlo, en mi documento tengo cuatro enlaces cada uno con un id distinto para despues poderlo seleccionarlos desde js, una vez que lo selecciono creo una funcion que hace una peticion al servidor que a su vez responde con un archivo en este caso con un script php que se encarga de mostrar todo el contenido de una carpeta, al momento el codigo funciona sin problemas, aunque tarda un poquito en cargar no es un problema grave.
resumiendolo todo, lo que tengo pensado quizas no sea la menara correcta de hacerlo esto consiste es quitar los ids a los enlaces y seleccionarlos por medio de su indice con el objeto document.getElementsByTags(indice)

luego dependiendo del link se carge el archivo, este lo tengo como paratremo en mi peticion ajax.
despues de esto con el script php creo que en futuro vendrian problemas porque cada vez que agrege un nuevo enlace a una carpeta deberia de crear un nuevo script y copiar el mismo codigo con algunas variaciones para mostrar el contenido de la carpeta.

<html>
<nav id="menu-vertical">
    <ul>
        <li><a href="#" id="link-clothes">clothes</a></li>
        <li><a href="#" id="carpeta2">carpeta2</a></li>
        <li><a href="#" id="carpeta3">carpeta3</a></li>
        <li><a href="#" id="carpeta4">carpeta4</a></li>
    </ul>
 </nav>
 <div id="seccion-datos"></div>
ajax = new XMLHttpRequest();

seccionDatos = document.getElementById('seccion-datos');

linkClothes = document.getElementById("link-clothes");
carpeta2 = document.getElementById("carpeta2");
carpeta3 = document.getElementById("carpeta3");

linkClothes.addEventListener("click", function(){
ajax.open("get", "clothes.php", true);

ajax.onreadystatechange=function() {  
       if (ajax.readyState==4 && ajax.status==200) {
          texto=ajax.responseText;
          seccionDatos.innerHTML= texto;
          } 
       }

ajax.send(null);
})

carpeta2.addEventListener("click", function(){
ajax.open("get", "carpeta2.php", true);

ajax.onreadystatechange=function() {  
       if (ajax.readyState==4 && ajax.status==200) {
          texto=ajax.responseText;
          seccionDatos.innerHTML= texto;
          } 
       }

ajax.send(null);
})

<?php

$folder = opendir('clothes');
$file = readdir($folder);

while($file=readdir($folder)) {
    echo "<img src=clothes/$file>";
}
closedir($folder);
?>

como podran apreciar en mi codigo se repiten varias veces las mismas cosas por este motivo creo que me convendria utilizar las delegaciones porque si voy anadiendo mas enlaces esto se volveria infinito, el problema es que todavia no manejo bien esa tecnica, conosco solo el concepto y creo que en este caso seria necesario utilizarlo.

1 Respuesta

2votos

Alex_Numpaque Puntos15120

Hola, hermano una manera en que creo que podrias optimizarlo podria ser por medio de una funcion la cual haga el envio por ajax y que cuyo parametro a recibir seria el valor de la url la cual podrias asignarla al href y el nombre de link de manera que se veria

<html>
<nav id="menu-vertical">
    <ul>
        <li><a href="clothes.php" onclick="envio(link-clothes)" id="link-clothes">clothes</a></li>
        <li><a href="carpeta2.php" onclick="envio(link-clothes)" id="carpeta2">carpeta2</a></li>
    </ul>
 </nav>
 <div id="seccion-datos"></div>

<script>
function envio (link){
 var url = link.getAttribute("href");
 $.ajax({
   type:'GET',
   url:url,
   success: function(data) {
    texto=ajax.responseText;
    seccionDatos.innerHTML= texto; 
  }
 });
}
</script>
</html>

esta seria una forma de hacer dinamico tu codigo, puede que este correcta o erronea ya que solo lo hice por observacion

steven comentado Mar 18

hola @Alex_Numpaque que bueno volver a hablar contigo, si no me equivoco con esto solo tendria una funcion ajax que llevaria el parametro url dinamico si es asi creo que probare a implementarlo pero sin jquery, respecto a php no se te ocurre nada para evitar de hacer siempre un nuevo script para cada carpeta, no se podria tener un solo script php para hacer todo eso, a mi se me ocurre hacerlo algo parecido a un formulario es decir dependiendo que carpeta se pida mostrarlo con el script haciendo uso de condicionales y bucles.

Alex_Numpaque comentado Mar 18

podrias en vez de enviar la url, enviarle el nombre de la carpeta te quedaria de esta forma, sin modificar todo tu codigo

<?php
$nameFolder = $_REQUEST['carpeta'];
$folder = opendir($nameFolder);
$file = readdir($folder);

while($file=readdir($folder)) {
    echo "<img src=$nameFolder/$file>";
}
closedir($folder);
?>

steven comentado Mar 18

eso es justo lo que tenia pensado hacer, sin embargo creo que el codigo que pusiste anteriormente podria tener algunos problemas porque no seria ajax si apunta a un archivo, a mi se me ocurre crear un nuevo atributo y dentro pasarle el valor de mi archivo php que seria el mismo para todos, temo pero que si creo un nuevo atributo este no podria ser reconocido y devolveria error, de todos modos voy a hacer las pruebas.

Alex_Numpaque comentado Mar 18

basicamente redirecionarias al mismo archivo pero en la data de envio del get, enviarias el atributo

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

¿Eres Usuario Apple?

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta