有没有办法简化这段代码，使用 javascript 为我网页上的特定断点创建 css 变量？-解网

问：

我正在使用这一段 javascript 代码创建一个包含 css 变量的字符串。它帮助我专门为网页上的每个断点设置大小。

这是我的代码：

const sizes = {
  xs: 0.9,
  md: 2,
  lg: 2.5,
  xl: 4
};

function getCssVar(size) {
  var varStr = "";

  const defaultBPs = ["xs", "sm", "md", "lg", "xl"];

  defaultBPs.forEach(bp => {
    const bpi = defaultBPs.indexOf(bp);
    var nextHigherIndex = defaultBPs.indexOf(Object.keys(size)[getNextHighestIndex(Object.keys(size).map(bp => (defaultBPs.indexOf(bp))), defaultBPs.indexOf(bp))]);

    if (getNextHighestIndex(Object.keys(size).map(bp => (defaultBPs.indexOf(bp))), defaultBPs.indexOf(bp)) === Object.keys(size).length) {
      nextHigherIndex = defaultBPs.length;
    }

    if (size[bp]) {
      defaultBPs.forEach(bp2 => {
        const bp2i = defaultBPs.indexOf(bp2);
        const generateVar = " --size-" + bp2 + ":" + size[bp] + ";";

        if (bp2i >= bpi && bp2i < nextHigherIndex) {
          varStr += generateVar;
        }
        
      })
    };

  });
  return varStr;
}

function getNextHighestIndex(arr, value) {
  var i = arr.length;
  while (arr[--i] > value);
  return ++i; 
}


console.log(getCssVar(sizes));

输出如下：

 --size-xs:0.9; --size-sm:0.9; --size-md:2; --size-lg:2.5; --size-xl:4;

从技术上讲，这是正确的答案，并且此代码已经有效，但我仍然想知道是否有任何方法可以改进我的代码。

我希望它更短、更紧凑，但输出相同。

任何帮助将不胜感激。谢谢。

JavaScript 函数断点简化

//
// Main function
const getCssVar = (s, last = 0) => {
  // Possible modes in proper sequence
  const modes = ["xs", "sm", "md", "lg", "xl", "xxl"];
  // Loop modes and check if value has been provided for current mode
  // If no value provided, put last (0 or any passed overrider)
  // And update last with new value
  const res = {};
  for(const m of modes) last = res[`--size-${m}`] = s[m] || last;
  // Transform res object to any needed string
  const str = Object.keys(res).map(key => `${[key, res[key]].join(':')};`).join('');
  // Return result
  return str;
}

//
// Tests
console.log("Test 1:", getCssVar({
  md: 2,
  lg: 2.5,
  xl: 4
}, 1.33)); // here we override last (lower) value

console.log("Test 2:", getCssVar({
  md: 2,
  xl: 4
}));

console.log("Test 3:", getCssVar({
  xs: 0.9,
  md: 2,
}));

上一个：@property内的断点不起作用 - PyCharm

下一个：如何在具有断点的应用上下文中运行本地安装的混合任务？

有没有办法简化这段代码，使用 javascript 为我网页上的特定断点创建 css 变量？

Is there a way to simplify this code creating css variables with javascript for specific breakpoints on my webpage?

评论