1

画面サイズごとにさまざまな変数があります。

ST.screen_x_small = 480;
ST.screen_small = 768;
ST.screen_medium = 992;
ST.screen_large = 1200;

変数ごとにロードするアイテムの数を宣言したいと思います。たとえば、x_small の場合は 10、小さい場合は 20 などをロードします。

各サイズを辞書に入れました：

ST.content_per_load_dict = {'480' : 10, '768' : 20, '992' : 30, '1200' : 40};

その後：

var pageWidth = $(window).width();

    if(pageWidth < ST.screen_x_small)
    {
        ctx.contentPerLoad = ST.content_per_load_dict[ST.screen_x_small];
    }
    else if(pageWidth < ST.screen_small)
    {
        ctx.contentPerLoad = ST.content_per_load_dict[ST.screen_small];
    }
    else if(pageWidth < ST.screen_medium)
    {
        ctx.contentPerLoad = ST.content_per_load_dict[ST.screen_medium];
    }
    else
    {
        ctx.contentPerLoad = ST.content_per_load_dict[ST.screen_large];
    }

私の質問は次のとおりです。

  1. これを行うより良い方法はありますか？

  2. 辞書を宣言するより効率的な方法はありますか? 理想的には、ST.screen_x_small var で 480 を宣言するだけで、ディクショナリでは宣言したくありません。

4

2 に答える 2

2

pax162 の回答に基づいて構築すると、この操作をさらに簡素化できます。

// Order matters.
var ST = [ {name: 'x-small', width: 480, items: 10}, {name: 'small', width: 768, items: 20} ];
// ST.sort(function(a,b) { return a.width > b.width } )

ST.some(function (d) {
    if(pageWidth <= d.width) {
        ctx.contentPerLoad = d.items;
        return true;
    }
});

ディメンションと関連データを配列内のオブジェクトに配置し、必要に応じて並べ替えてから、その配列を反復処理します。これにより、新しいアイテムに対して追加の条件を入力する必要がなくなります。

于 2013-10-30T15:30:35.410 に答える
0

次のように、それらを単一の辞書にマージできます。

var ST = {
    screen_x_small: {
        width: 480,
        items:10
    },
    screen_small: {
        width: 768,
        items:20
    },
}

その後：

if(pageWidth < ST.screen_x_small.width)
{
    ctx.contentPerLoad = ST.screen_x_small.items;
}
else if(pageWidth < ST.screen_small.width)
{
    ctx.contentPerLoad = ST.screen_small.items;
}
于 2013-10-30T15:05:47.597 に答える