jQuery collezioni, la funzione e l'organizzazione

Question

ho il seguente codice che prende una singola immagine e applica una larghezza specifica ad esso:

function Foo (img) { 
    this.image = img; 
} 
Foo.prototype._getWidth = function() { 
    return this.image.data('largest') + 'px'; 
}; 
Foo.prototype.applyWidth = function() { 
    this.image.css('width', this._getWidth()); 
}; 

var img = Foo($('img')); 

img.applyWidth(); 

Comunque io sto lottando per ottenere la mia testa intorno gestire una raccolta jQuery di immagini, come $('img') senza un ciclo for o $.each() all'interno di ciascuna delle funzioni (ho più di queste due funzioni mostrate sopra).

Finora il migliore che abbia venire in mente è:

var temp = []; 

function Create (imgs) { 
    $.each(imgs, function(i){ 
     temp[ i ] = new Foo ($(this)); 
    }); 
    return temp; 
} 

Create($('img')); 

$.each(temp, function() { 
    $(this).applyWidth(); 
}): 

Questo funziona bene, ma non si sente organizzati, si sente sciatta.

Infine, vorrei alcune indicazioni su quanto segue.

1. Preferisco idealmente questo sotto lo spazio dei nomi Theme. Mi piacerebbe questo metodo sotto Theme.Images utilizzando il modello del modulo. È possibile?

2. Se sotto il namespace Theme.Images sarebbe possibile effettuare una chiamata come Theme.Images.applyWidth() tale da richiedere applyWidth() su tutte le immagini in temp, tenendo presente ogni img avrebbe un valore univoco per _getWidth(). Al momento credo che avrei bisogno di fare il ciclo Theme.Images.temp e chiamare il numero applyWidth() all'interno del ciclo.

Sto davvero iniziando ad apprezzare il punto di ereditarietà in javascript e vorrei continuare con esso.

Answer 1

var Theme = (function(){ 

    function Theme(images) { 
     var _this = this; 
     this.images = []; 
     images.each(function(){ 
      _this.images.push(new Image(this)) 
     }); 
    } 

    var Image = (function(){ 

     function Image(imageDOM) { 
      this.image = $(imageDOM); 
     } 
     Image.prototype._getWidth = function() { 
      return this.image.data('largest') + 'px'; 
     }; 
     Image.prototype.applyWidth = function() { 
      this.image.css('width', this._getWidth()); 
     }; 

     return Image; 

    })(); 

    Theme.prototype.applyWidth = function(){ 
     this.images.forEach(function(el){ 
      el.applyWidth(); 
     }); 
    } 


    return Theme; 

})(); 

Così allora si può fare:

var MyTheme = new Theme($(some_selector)); 
MyTheme.applyWidth(); 

Answer 2

Mi sembra che stiate cercando una classe "Raccolta".

function Images() { 
    var that = this; 
    that.foos = []; 
    $('img').each(function() { 
     that.foos.push(new Foo(this)); 
    }); 
} 

Images.prototype.applyWidth = function() { 
    $.each(this.foos, function() { 
     this.applyWidth(); 
    }); 
};