jQuery bộ sưu tập, chức năng và tổ chức

Question

Tôi có đoạn code sau mà phải mất một hình ảnh duy nhất và áp dụng một chiều rộng cụ thể với nó:

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

Tuy nhiên tôi đang đấu tranh để có được đầu của tôi xung quanh việc xử lý một bộ sưu tập jQuery hình ảnh, chẳng hạn như $('img') không có vòng lặp for hoặc $.each() bên trong mỗi hàm (tôi có nhiều hơn hai hàm này được hiển thị ở trên).

Cho đến nay các tốt nhất mà tôi đã đưa ra là:

var temp = []; 

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

Create($('img')); 

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

này hoạt động tốt, nhưng nó không cảm thấy tổ chức, cảm thấy luộm thuộm.

Cuối cùng, tôi muốn một số hướng dẫn về những điều sau đây.

1. Tôi lý tưởng muốn điều này dưới không gian tên Theme. Tôi muốn phương pháp này dưới Theme.Images sử dụng mẫu mô-đun. Điều này có thể không?

2. Nếu dưới namespace Theme.Images nó sẽ có thể thực hiện cuộc gọi như Theme.Images.applyWidth() rằng sẽ gọi applyWidth() trên tất cả các hình ảnh trong temp, mang trong tâm trí mỗi img sẽ có một giá trị duy nhất cho _getWidth(). Tại thời điểm này tôi tin rằng tôi sẽ cần phải lặp lại Theme.Images.temp và gọi applyWidth() bên trong vòng lặp.

Tôi thực sự bắt đầu đánh giá cao điểm kế thừa trong javascript và muốn tiếp tục với nó.

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; 

})(); 

Vì vậy, sau đó bạn có thể làm:

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

Answer 2

Có vẻ như tôi đang tìm kiếm một lớp "Bộ sưu tập".

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