Rotación de banners

[stock]

Hola Amigos, veo muchas malas prácticas en el código que muestran, el mal uso del namespace, el mal uso de la función setTimeout, mal uso del contexto, mal uso del scope, les ayudaré un poquito refactorizando el código inicial de la siguiente manera:


En algún archivo JS crear el prototipo Rotador

Código Javascript:

/**
 *  Constructor de Rotador 
 *  @param container: recibe el ID del contenedor donde se renderizará
 *  @param data: información de imágenes y configuraciones
 *
 **/
var Rotador = function(container,data){
    this.container = document.getElementById(container);
    this.data = data
    this.prints = json.rotator.images;
    this.timer = json.rotator.timer;
    this.r = Math.round(Math.random()*this.prints.length);
}
 
Rotador.prototype = {
    //imprime una imagen
    print   : function() {
        this.r = this.r < this.prints.length?this.r:0;
 
        if(this.container) {
            var img = this.prints[this.r];
            container.innerHTML = "<a target='_blank' href='"+ img.url+ "'>"
                        + "<img border='0' alt='" + img.title + "' title='" + img.title + "' src='"+ img.imageUrl+ "' />"
                        + "</a>";
        }
        this.r++;
    },
    
    //crea un intervalo que imprime las imagenes consecutivas
    rotator : function() {
        this.thread = setInterval(this.print, this.timer*6000); //no usen un string para ejecutar la función!!!
    },
    
    //inicia el proceso de pintado
    start   : function(){
        this.print();
        this.rotator();
    }
}
 

Ahora, para usar el prototipo anterior, se hace de la siguiente manera:

Código Javascript:

//Este es un objeto listo para usarse, no es necesario
//usar el "eval" para obtener la información
var json = {
    rotator : {
        timer   : 01,   //Tiempo en minutos del intervalo de cambio
        images  : [{    //Insertar tantas como imagenes iran en el banner
            title   : "Banner1",    //Título del banner
            imageUrl: "_aux_images_banner/banner1.gif", //Url del banner
            url     : "web1/",  //Enlece al que irá al hacer click
            target  : "_blank" //Destino del enlace del banner
        },{
            title   : "Banner2",
            imageUrl: "_aux_images_banner/banner2.jpg",
            url     : "web2",
            target  : "_blank"
        },{
            title   : "Banner3",
            imageUrl: "_aux_images_banner/banner3.gif",
            url     : "web3",
            target  : "_blank"
        },{
            title   : "Banner4",
            imageUrl: "_aux_images_banner/banner4.gif",
            url     : "web4",
            target  : "_blank"
        }]
    }
};
 
//forma de uso ;)
var rotador1 = new Rotador("banner",json);
var rotador2 = new Rotador("otroContenedor",json);
 

Si se han dado cuenta puedo crear instancias del objeto "Rotador" por lo tanto puedo poner varios rotadores en la página, el código es reutilizable, extendible, limpio y fácil de usar.

Si tienen alguna duda pueden dejar comentarios. Espero les sirva de ejemplo para escribir buen JavaScript.

Saludos