¿Cómo podría haber abordado esta galería de imágenes sensibles de manera diferente? -- javascript campo con jquery campo con object-oriented camp codereview Relacionados El problema

How could I have approached this responsive image gallery differently?


3
vote

problema

Español

Esta galería utiliza la Galería Orbit desde el marco de la Fundación (versión 3). Lo he configurado para que en pantallas más pequeñas aparezca como un acordeón.

Funciona bien, pero ¿hay una forma más concisa que esto podría haber sido escrito? Tal vez de una manera orientada a objetos?

el guión:

  import Data.Char (chr, ord, toUpper)   -- A bit of self documentation help type Key = String type Msg = String   key :: Key key = "TSTING" msg :: Msg msg = "I'm not even mad... This is impressive!"   -- | Checks if character is valid for encoding isValid :: Char -> Bool isValid c = let cUp = toUpper c :: Char              in 'A' <= cUp && cUp <= 'Z'   -- | Given 'key' & 'msg' generate a list of [Maybe Int] indices -- to map 'msg' from 'key', skipping invalid characters toIdx :: Key -> Msg -> [Maybe Int] toIdx k m = map (flip mod keyN <$>) $ toIdx_ 0 m   where keyN = length k :: Int         toIdx_ :: Int -> Msg -> [Maybe Int]         toIdx_ _ "" = []         toIdx_ acc (c:cs)           | isValid c = Just acc : toIdx_ (acc + 1) cs           | otherwise = Nothing : toIdx_ acc cs   -- | Given 'key' & 'msg' generate a list of numbers representing -- the amount to shift 'msg' characters based on 'key' toShifts :: Key -> Msg -> [Int] toShifts k m = map toKey (toIdx k m)   where kUp = map toUpper k :: Key         toKey :: Maybe Int -> Int         toKey Nothing  = 0         toKey (Just x) = ord (kUp!!x) - ord 'A'   -- | Given 'by' & 'c', shift the Char 'c' by amount 'by'. 'by' can be both -- positive & negative as well as 0. shift :: Int -> Char -> Char shift by c   | isValid c && c >= 'a' = shift_ $ ord 'a'   | isValid c && c >= 'A' = shift_ $ ord 'A'   | otherwise = c   where cONorm    = ord (toUpper c) - ord 'A' :: Int         azN       = ord 'Z' - ord 'A' :: Int         shift_ :: Int -> Char         shift_ aO = chr $ aO + mod (by + cONorm) azN   -- Encode & decode a message using the given key. vigenere, unVigenere :: Key -> Msg -> Msg vigenere   k m = zipWith shift (toShifts k m) m unVigenere k m = zipWith shift (map negate $ toShifts k m) m 6  

y la marca HTML:

  import Data.Char (chr, ord, toUpper)   -- A bit of self documentation help type Key = String type Msg = String   key :: Key key = "TSTING" msg :: Msg msg = "I'm not even mad... This is impressive!"   -- | Checks if character is valid for encoding isValid :: Char -> Bool isValid c = let cUp = toUpper c :: Char              in 'A' <= cUp && cUp <= 'Z'   -- | Given 'key' & 'msg' generate a list of [Maybe Int] indices -- to map 'msg' from 'key', skipping invalid characters toIdx :: Key -> Msg -> [Maybe Int] toIdx k m = map (flip mod keyN <$>) $ toIdx_ 0 m   where keyN = length k :: Int         toIdx_ :: Int -> Msg -> [Maybe Int]         toIdx_ _ "" = []         toIdx_ acc (c:cs)           | isValid c = Just acc : toIdx_ (acc + 1) cs           | otherwise = Nothing : toIdx_ acc cs   -- | Given 'key' & 'msg' generate a list of numbers representing -- the amount to shift 'msg' characters based on 'key' toShifts :: Key -> Msg -> [Int] toShifts k m = map toKey (toIdx k m)   where kUp = map toUpper k :: Key         toKey :: Maybe Int -> Int         toKey Nothing  = 0         toKey (Just x) = ord (kUp!!x) - ord 'A'   -- | Given 'by' & 'c', shift the Char 'c' by amount 'by'. 'by' can be both -- positive & negative as well as 0. shift :: Int -> Char -> Char shift by c   | isValid c && c >= 'a' = shift_ $ ord 'a'   | isValid c && c >= 'A' = shift_ $ ord 'A'   | otherwise = c   where cONorm    = ord (toUpper c) - ord 'A' :: Int         azN       = ord 'Z' - ord 'A' :: Int         shift_ :: Int -> Char         shift_ aO = chr $ aO + mod (by + cONorm) azN   -- Encode & decode a message using the given key. vigenere, unVigenere :: Key -> Msg -> Msg vigenere   k m = zipWith shift (toShifts k m) m unVigenere k m = zipWith shift (map negate $ toShifts k m) m 7  
Original en ingles

This gallery uses the Orbit gallery from the Foundation framework (version 3). I've set it up so that on smaller screens it appears as an accordion.

It works just fine, but is there a more concise way this could've been written? Perhaps in an object oriented way?

The script:

function activateSlider() {     if (window.Foundation && window.matchMedia) {        // Establishing media check       widthCheck = window.matchMedia("(max-width: 767px)");       if (widthCheck.matches) {             $('.orbit-container').after($('.orbit-timer'));         $('#slider, #slider li').attr('style', '');         $('#slider').removeClass('orbit-slides-container').removeAttr('data-orbit').addClass('accordion-container');         $('#slider li').removeAttr('data-orbit-slide').removeClass('active');         $('.orbit-container > a, #slider li .slider-content').hide();         $('#slider li:not(.active) .slider-content').css('display', 'none');        //Init accordion click functions         $('#slider li').unbind().bind('click', function(){             $(this).toggleClass('active').siblings().removeAttr('class');             $(this).siblings().find('.slider-content').slideUp();           $(this).find('.slider-content').slideToggle();         });   }   else   {     //If accordion styles are present, clean it up     var OrbitStyles = ($('.accordion-container').length === 0);     if (!OrbitStyles) {         $('.orbit-container > a').show();         $('#slider').removeClass('accordion-container');         $('#slider').addClass('orbit-slides-container');         $('#slider').attr('data-orbit', '');         $('.orbit-bullets-container').before($('.orbit-timer'));         $('.orbit-timer').removeClass('paused');     }    //Then set it up for the slider       $('.slider-content').show();       $('#slider li:first-child').addClass('active').siblings().removeAttr('class');   }   } }  //Run the script $(function(){     activateSlider(); });  //Run the script on resize if (window.addEventListener) {    window.addEventListener('resize', debounce(function () {     activateSearch();     //fade in the slider while loading to prevent that second of ugly formatting     if ($('#slider').length > 0) {         $('#slider').delay(700).animate({ opacity: 1 }, 500);     }   }, 250)); } else {     window.attachEvent('resize', debounce(function () {       activateSearch();       //fade in the slider while loading to prevent that second of ugly formatting       if ($('#slider').length > 0) {          $('#slider').delay(700).animate({ opacity: 1 }, 500);       }     }, 250)); } 

And the html markup:

<div class="orbit-container">   <ul id="slider" class="orbit-slides-container" data-orbit>     <li data-orbit-slide="slide-1" class="active">        <img src="http://placehold.it/1400x348" alt="" width="1400" height="348">       <section id="Walrus" class="orbit-caption">                 <strong>Oh got walrus</strong>         <div class="slider-content">           <p>More hence euphemistic oriole let tediously dear repeatedly.</p>           <a class="read-more" href="#">Read More</a>         </div>            </section>      </li>     <li data-orbit-slide="slide-2">        <img src="http://placehold.it/1400x348" alt="" width="1400" height="348">       <section id="Overslept" class="orbit-caption">         <strong>Overslept wiped yikes</strong>         <div class="slider-content">            <p>Much supreme quick rakishly tamarin</p>            <a class="read-more" href="#">Read More</a>         </div>            </section>     </li>   </ul> </div> 
        

Lista de respuestas

3
 
vote
vote
La mejor respuesta
 

El bit más importante aquí es el manejador de cambio de tamaño, ya que se dispara muchas veces por desplazamiento.

  //Run on document ready $(function () {      // Cache the slider jQuery object     var slider = $('#slider');      // Pass in the existing reference. Explanation after the code     activateSlider(slider);      // Move out the debouncing function outside the resize handler     // so that the function isn't recreated on every risize call     function debounceAction() {         activateSearch();          //Personal preference. The "early return" looks better since         // it avoids any additional indention         if (!slider.length) return;          slider.delay(700).animate({opacity: 1}, 500);      }      // Since you use jQuery, use it to abstract the resize function instead.     $(window).on('resize', function () {         // And all the handler's got to do is call debounce         debounce(debounceAction, 250);     }); });   

En cuanto a su activateSlider , debe almacenar en caché los elementos de DOM Fetched en las variables y reúnen cuando sea necesario. Cada vez que hagas algo como $('.slider') , busca elementos con clase slider . Almacenar en caché evita esta búsqueda. Ya lo he hecho con $('#slider') buscándolo una vez, y pasándola en activateSlider .

 

The most important bit here is the resize handler, since it fires many times per scroll.

//Run on document ready $(function () {      // Cache the slider jQuery object     var slider = $('#slider');      // Pass in the existing reference. Explanation after the code     activateSlider(slider);      // Move out the debouncing function outside the resize handler     // so that the function isn't recreated on every risize call     function debounceAction() {         activateSearch();          //Personal preference. The "early return" looks better since         // it avoids any additional indention         if (!slider.length) return;          slider.delay(700).animate({opacity: 1}, 500);      }      // Since you use jQuery, use it to abstract the resize function instead.     $(window).on('resize', function () {         // And all the handler's got to do is call debounce         debounce(debounceAction, 250);     }); }); 

As for your activateSlider, you should cache the fetched DOM elements into variables and reuse them when necessary. Each time you do something like $('.slider'), it looks for elements with class slider. Caching them avoids this searching. I have already done it with $('#slider') by fetching it once, and passing it into activateSlider.

 
 

Relacionados problema

1  Pasando un objeto a la vista en CodeIgner  ( Passing an object to the view in codeigniter ) 
Estoy tratando de usar un objeto y persistirlo en la base de datos. He creado una clase en la carpeta de la biblioteca. <?php if (!defined('BASEPATH'))...

3  General Pathfinder en Python  ( General pathfinder in python ) 
Recientemente trabajé en un proyecto donde tuve la siguiente configuración: $_{456}$6 Ninguno del Código es relevante, no tendrá que poder ejecutar nada...

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

5  ¿Podría mejorarse este sistema de profundidad para un juego?  ( Could this depth system for a game be improved ) 
Todavía soy nuevo en C ++ y no tengo una gran idea de mi codificación, así que estaría muy agradecido a cualquiera y todos los que le otorgan consejos. Ade...

6  Objetos de Java para un programa de sniffer de red  ( Java objects for a network sniffer program ) 
Estoy trabajando en un programa de sniffer de red, cuya estructura utiliza 3 clases principales: clase de marco - uno por marco monitoreado, sostiene la re...

5  Solicitud de Tkinter para administrar las tareas escolares  ( Tkinter application to manage school tasks ) 
Soy un principiante en la programación de la OOP y me pregunto cuál es la mejor manera de poner todas las ventanas y funciones de una aplicación de ventana en...

0  Creación de múltiples objetos del extracto de SQL Server  ( Creating multiple objects from sql server extract ) 
He creado una solución prototipo simplificada como una especie de prueba de concepto antes de comenzar un programa más grande. Aquí están los datos de prueb...

1  Clase de juego, escrito usando enums  ( Playing card class written using enums ) 
Escribí una clase de tarjeta A Mientras vuelvas a esta publicación aquí: Pregunta previa Sé que ha pasado mucho tiempo, pero recientemente regresé al proyec...

8  Árbol fractal orientado a objetos  ( Object oriented fractal tree ) 
Hice un árbol fractal orientado a objetos en JavaScript utilizando la biblioteca P5, consta de tres archivos: fraternal tree.js sucursal.js flower.js ...

8  Envoltura Libusb Library en C ++  ( Wrapping libusb library in c ) 
Quiero usar la biblioteca de Libusb en mi aplicación C ++. He creado clases que envuelven las funciones de Libusb. Puede ver que la API de Libusb se divide en...




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