1

我有多种适用于不同屏幕尺寸的变量:

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

我想声明每个 var 加载的项目数量。因此,例如,如果 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 回答