jQueryのコレクション、機能および組織

Question

私は、単一のイメージを取り、それに特定の幅を適用する次のコードを持っている：私は画像のjQueryのコレクションを扱うのまわりで私の頭を取得するために苦労していますが、

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(); 

をforループを持たない$('img')や、それぞれの関数の中に$.each()など（私は上記の2つ以上の関数を持っています）などです。

は、これまでのところ、私が出ている最高です：

var temp = []; 

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

Create($('img')); 

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

これは正常に動作しますが、それは組織的な感じがしない、ずさんな感じ。

最後に、以下についていくつかのガイダンスをお願いします。

1. これは名前空間Themeで理想的です。モジュールパターンを使ってTheme.Imagesの下にこの方法をしたいと思います。これは可能ですか？

2. 名前空間Theme.Imagesの下で、各imgが_getWidth()の固有の値を持つことになり念頭に、temp内のすべての画像にapplyWidth()を呼ぶだろうなTheme.Images.applyWidth()などの呼び出しを行うことも可能である場合。現時点では、私はループTheme.Images.tempを呼び出し、applyWidth()をループ内に呼び出す必要があると信じています。

私はJavaScriptの継承の点を本当に感謝し始めており、それを続行したいと考えています。

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; 

})(); 

それではあなたが行うことができます：

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

Answer 2

「コレクション」クラスを探しているような音がします。

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(); 
    }); 
};