6

単一の画像を取得し、特定の幅を適用する次のコードがあります。

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

$('img')ただし、 for ループがない場合や各関数内など、画像の jQuery コレクションの処理に頭を悩ませて$.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. 理想的には、これを namespace の下に置きますTheme。Theme.Imagesモジュールパターンを使用してこのメ​​ソッドを使用したいと思います。これは可能ですか？

  2. 名前空間の下で、内のすべての画像を呼び出すTheme.Imagesような呼び出しを行うことが可能である場合、それぞれが に対して一意の値を持つことを念頭に置いてください。現時点では、ループしてループ内で呼び出す必要があると思います。Theme.Images.applyWidth()applyWidth()tempimg_getWidth()Theme.Images.tempapplyWidth()

私は本当に JavaScript の継承のポイントを理解し始めており、それを続けたいと思っています。

4

2 に答える 2

1

「コレクション」クラスを探しているように思えます。

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();
    });
};
于 2013-08-22T15:12:16.883 に答える
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();
于 2013-08-22T15:14:02.497 に答える