Evitar hardcodear en VueJs

Cuando te gusta esto de la programación sí o sí tienes que investigar de varias fuentes lo que significan muchos términos raros que son propios de la jerga de la programación informática, y por si no fuera poco, muchos de esos términos son expresados tal y como se denominan en el idioma nativo del cual surgen aún en textos en español, tal como “Hard-Codear”. Cuando lees cosas como estas por primera vez dices, ¿pero que rayos significa esto?, y aunque ahí entra un poco lo de la comprensión lectora del contexto de lo que estás leyendo, no a todos no es fácil comprender a primera vista lo que se quiere decir en cierto texto con alguno de esos términos raros, aunque al escritor le sea obvio. Por esta razón lo explico con un ejemplo en Vue(recuerden que este tipo de códigos funcionan para versiones de Vue 2.x, pero algunas de estas cosas han cambiado en la versión más reciente de Vue3), en el cual estaremos usando la función estática Vue.filter(esta función desapareció en la nueva versión). Pues bien, el término hard-codear sólo intenta decir que deberíamos desistir de reinventar la rueda, y abrirnos a la posibilidad de reutilizar software, tal como en este ejemplo en el que utilizaremos la librería moment,js, la cual es una librería muy completa para dar diferentes formatos de fechas, y que además tiene soporte para múltiples idiomas. Bochornosamente tengo que confesar que yo he harcodeado muchas veces(por favor no lo hagas, sino es absolutamente necesario), porque a veces no sabes de librerías como estas, o sea, por ignorancia, así como lo hice en este blog cuando cree una clase para darle formato a las fechas que se ven en comentarios y en el widget de la parte izquierda que contiene los metadatos del post. Pues bien, empecemos con Vue

<script>
    
    Vue.filter('date',function(date,locale){
        moment.locale(locale);
       return moment(date).format('LL');
     });
     let vm = new Vue({
      el:"#app",
      data:{
         independence_day:new Date(1821,09,16,17),
         showSolution:false,
         respuesta1:'17 de Noviembre de 1920',
         respuesta2:'16 de Junio de 1845',
         respuesta3:'16 de Septiembre de 1810'
      },
      methods:{
        showMsg(respuesta){
           console.log(new Date(1810,09,16,17))
         if(respuesta === "16 de Septiembre de 1810")
            return this.showSolution = true;
         }
      }
     });
  </script>
  <style>
     #solution{
      cursor: pointer;
     }
     .fade-enter{
        opacity: 0;
     }
     .fade-enter-active{
        transition: opacity .9s;
     }
  </style>

Antes de declarar las primeras líneas de nuestro código insertamos el tag script como sigue(en el modo manual):

<script src="js/moment-with-locales.js" type="text/javascript"></script>

Después declaramos el filter, y aquí es donde podremos hacer uso de moment como si se tratará de un objeto. Ojo, si has descargado tu proyecto con npm, corre antes npm install moment y usalo en el tag script así

npm install moment

Para este post, no explicaré todo el código que he puesto en el script a detalle, baste decir que la etiqueta transition está predefinida en esta versión de vue. Primero defino 3 checkboxes con tres diferentes variables y a estos 3 les enlazo la directiva v-bind al atributo id y a cada uno de estos inputs se les pasará el manejador de eventos on-click denominado showMsg que tomará como parámetro la variable que esta enlazada a el atributo id, con el fin de desplegar un mensaje si se clickea en el checkbox correcto.

<body>
      <div id="app">
        <input type="checkbox" v-bind:id="respuesta1" v-on:click="showMsg(respuesta1)">
        <label>17 de Noviembre de 1920</label><br>
        <input type="checkbox" v-bind:id="respuesta2" v-on:click="showMsg(respuesta2)">
        <label>16 de Junio de 1845</label><br>
        <input type="checkbox" v-bind:id="respuesta3" v-on:click="showMsg(respuesta3)">
        <label>16 de Septiembre de 1810</label><br>
         <article>
            Sabes cuando se proclamo el día de la Independencia aquí en México
            <div id="solution" v-show="showSolution">
               <transition name="fade">
                 <span id="etq" v-show="showSolution">
                    Es correcto el día {{ independence_day | date('es') }}
                 </span>
               </transition>
            </div>
         </article>
      </div>
   </body>

Si juegas un poco con el código, notaras que tenemos la siguiente línea:

independence_day:new Date(1821,09,16,17),

que devuelve lo siguiente: Tue Oct 16 1810 17:00:00 GMT-0636 (hora de verano central), algo no muy leíble para la mayoría, así que aquí es donde viene al rescate el objeto moment y ya no se tiene que hardcodear

moment.locale(locale);
   return moment(date).format('LL');

Ahora como un plus te dejo algunos de los formatos que soporta la librería:

var a = [
            ['dddd, MMMM Do YYYY, h:mm:ss a',      'Sondag, Februarie 14de 2010, 3:25:50 nm'],
            ['ddd, hA',                            'Son, 3NM'],
            ['M Mo MM MMMM MMM',                   '2 2de 02 Februarie Feb'],
            ['YYYY YY',                            '2010 10'],
            ['D Do DD',                            '14 14de 14'],
            ['d do dddd ddd dd',                   '0 0de Sondag Son So'],
            ['DDD DDDo DDDD',                      '45 45ste 045'],
            ['w wo ww',                            '6 6de 06'],
            ['h hh',                               '3 03'],
            ['H HH',                               '15 15'], 
            ['m mm',                               '25 25'],
            ['s ss',                               '50 50'],
            ['a A',                                'nm NM'], 
            ['[the] DDDo [day of the year]',       'the 45ste day of the year'],
            ['LT',                                 '15:25'],
            ['LTS',                                '15:25:50'],
            ['L',                                  '14/02/2010'],
            ['LL',                                 '14 Februarie 2010'],
            ['LLL',                                '14 Februarie 2010 15:25'],
            ['LLLL',                               'Sondag, 14 Februarie 2010 15:25'],
            ['l',                                  '14/2/2010'],
            ['ll',                                 '14 Feb 2010'],
            ['lll',                                '14 Feb 2010 15:25'],
            ['llll',                               'Son, 14 Feb 2010 15:25']

No hay duda que siempre es menester estar informado, así a la hora de realizar algún script no tendremos que hardcodear.

Hola, Gracias por visitar mi blog. He querido compartir este blog a través de GitHub. Es bienvenido todo el que quiera contribuir o mejorar este sistema de blog. Tus comentarios serán de mucha utilidad, si descargas el proyecto y tienes alguna duda sobre como echarlo a andar, no olvides que me puedes localizar en vuesongosechez@gmail.com o dejáme un Comentario