Коллекции, функции и организация 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();

Однако я изо всех сил пытаюсь обработать коллекцию изображений jQuery, например $('img') без цикла for или $.each() внутри каждой из функций (у меня есть больше, чем эти две функции, показанные выше).

Пока лучшее, что я придумал, это:

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

Это отлично работает, но оно не чувствует себя организованным, чувствует себя неряшливым.

Наконец, я хотел бы получить некоторые рекомендации по следующему.

  • Я в идеале хочу этого в пространстве имен Theme. Мне нужен этот метод под Theme.Images с использованием шаблона модуля. Возможно ли это?

  • Если под пространством имен Theme.Images можно было бы сделать вызов, например Theme.Images.applyWidth(), который вызывет applyWidth() на все изображения в temp, имея в виду, что каждый img будет иметь уникальное значение для _getWidth(). На данный момент я считаю, что мне понадобится цикл Theme.Images.temp и вызовет applyWidth() внутри цикла.

Я действительно начинаю ценить точку наследования в javascript и хотел бы продолжить ее.

2 ответа

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


Мне нравится, что вы ищете класс Collection.

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

licensed under cc by-sa 3.0 with attribution.