javascript - 这段代码可以写得更短吗？

Question

我有一段代码，其中没有发生复杂的事情，它基于三个不同的数字(在我的例子中是视口(viewport)宽度):

if(viewport_width > 1224) {
    $(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: 8 }, function(pages){
        current_page = pages.current;
        total_pages = pages.count;
    });
}
if(viewport_width < 1224 && viewport_width > 954) {
    $(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: 6 }, function(pages){
        current_page = pages.current;
        total_pages = pages.count;
    });
}
if(viewport_width < 954 && viewport_width > 624) {
    $(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: 4 }, function(pages){
        current_page = pages.current;
        total_pages = pages.count;
    });
}
if(viewport_width < 624) {
    $(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: 2 }, function(pages){
        current_page = pages.current;
        total_pages = pages.count;
    });
}

所以我想(一种方法)将这三个数字放入这样的数组中:

var widths = [1224, 954, 624];

并在其上应用 foreach 函数后:

for(var i in widths ) {
   ...
}

但我真的不知道如何将其包含在这三个数字中。根据数组中的数字唯一改变的是另一个数字:

{ ... perPage: 6 ... }

可以从 8 到 2 不等。如果可能的话，我希望得到一点帮助，或者也许用另一种书写方式就可以了。

Answer 1

您可以创建一个对象列表:

var limits = [
  { min: 1224, perPage: 8 },
  { min: 954, perPage: 6 },
  { min: 624, perPage: 4 },
  { min: 0, perPage: 2 }
];

然后:

for (var i = 0; viewport_width <= limits[i].min, i++);
$(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: limits[i].perPage }, 
   function(pages){
      current_page = pages.current;
      total_pages = pages.count;
 });