可以用更短的方式编写这段代码吗？

Question

我有一个代码块,其中没有复杂的东西,它基于三个不同的数字(在我的情况下视口宽度):

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