No soy un ninja del Javascript, soy un fan del movimiento “You don’t Know Js”, además creo que es uno de los lenguajes más complejos de aprender pero también apasionante.

Me he dado cuenta de la importancia de saber modularizar el código y caminar de la mano de las buenas prácticas.

Voy a refactorizar un código Javascript (empleo jQuery) usando objectos y así mejorar su legibilidad, su modularidad y su rendimiento.

Versión NO refactorizada

Este el código que vamos a refactorizar:

// Elemento select del formulario cacheado
var $provincia = $('#provincia');

// Escuchamos el evento change en el elemento $provincia
$provincia.on('change', function () {
    var $this = $(this),
        $panel = $('.js-provincia-meteo'),
        sProvincia = $this.val();

    // Multiples condicionales con la única variación de los datos
    if (sProvincia == 'Madrid') {
        tContenido = "<p>Madrid</p>";
        tContenido += "<p> 18º</p>";
        tContenido += "<p> <img src='http://lorempixel.com/100/100'>";
    } else if (sProvincia == 'Barcelona') {
        tContenido = "<p>Barcelona</p>";
        tContenido += "<p> 14º</p>";
        tContenido += "<p> <img src='http://lorempixel.com/101/100'>";
    } else if (sProvincia == 'Valencia') {
        tContenido = "<p>Valencia</p>";
        tContenido += "<p> 22º</p>";
        tContenido += "<p> <img src='http://lorempixel.com/102/100'>";
    } else {
        tContenido = "Hmm, no hay contenido";
    }
    // Pintamos la variable en el contenedor
    $panel.html(tContenido);
});

Ver en jsfiddle

Versión refactorizada

var $provincia = $('#provincia');

/* Creamos un objeto donde metemos todos los datos necesarios 
   y el nombre de las ciudades como propiedades de ese objecto.
*/
var oProvincias = {
    "Madrid": {
        "temp": "18º",
        "imagen": "http://lorempixel.com/100/100"
    },
    "Barcelona": {
        "temp": "14º",
        "imagen": "http://lorempixel.com/102/102"
    },
    "Valencia": {
        "temp": "22º",
        "imagen": "http://lorempixel.com/105/105"
    }
};

// Escuchamos el evento change en el elemento $provincia
$provincia.on('change', function () {
    var $this = $(this),
        $panel = $('.js-provincia-meteo'),
        sProvincia = $this.val();
    //Comprobamos que exista la propiedad seleccionada en el objecto
    if (oProvincias[sProvincia] !== undefined) {
        // Asignamos los valores a variables para simplificar
        var sFoto = "<img src=" + oProvincias[sProvincia]['imagen'] + ">",
            nTemperatura = oProvincias[sProvincia]['temp'],
            // Metemos en una variable los datos formateados
            tplContenido = '<p> Temperatura en ' + sProvincia + ': ' + nTemperatura + '</p>' + sFoto;
        $panel.html(tplContenido );
    }else{
      // Controlamos que no haya provincia en objecto
      $panel.html("No hay contenido para esta provincia");
    }
});

Ver en jsfiddle

Conclusión

Puede parecer que no ahorramos mucho código pero piensa en las 50 provicias que hay en España y la cantidad de datos que podrías almacenar en el objecto como la población, indice de paro, etc. Además estamos separando datos de funcionalidad y eso es intersante de cara a la modularidad del código y buenas prácticas en programación.

¡Feliz código!