Question

我正在使用此代码与Google存储空间同步。它只是想知道是否有一种更简单，更简洁的方式来编写此代码。

chrome.storage.sync.get(['titleCustom', 'textCustom', 'highCustom', 'quoteCustom', 'bgCustom'], (result) => {
    if(result.titleCustom !== undefined){
      document.documentElement.style.setProperty('--blue', result.titleCustom);
    }
    if(result.textCustom !== undefined){
      document.documentElement.style.setProperty('--light-text', result.textCustom);
    }
    if(result.highCustom !== undefined){
      document.documentElement.style.setProperty('--green', result.highCustom);
    }
    if(result.quoteCustom !== undefined){
      document.documentElement.style.setProperty('--dark-text', result.quoteCustom);
    }
    if(result.bgCustom !== undefined){
      document.documentElement.style.setProperty('--light-bg', result.bgCustom);
    }
}

Answer 1

您可以创建一个对象，将result（例如titleCustom）中的键映射到相应的颜色（例如--blue），然后遍历该对象，如下所示：< / p>

  // key:color are the variables of our outer for-each loop
  if(result[key] !== undefined) {
    document.documentElement.style.setProperty(color, result[key]);
  }

这具有额外的效果，您可以在Object.keys(mapObject)中使用chrome.storage.sync.get作为参数，而不是硬编码数组。

Answer 2

为存储项目声明一个键/值对象，其中键是存储项目，而值是您要为该键元素设置的相应属性。

let props = {
  "titleCustom": "--blue",
  "textCustom": "--light-text",
  "highCustom" :"--green",
  "quoteCustom": "--dark-text",
  "bgCustom": "--light-bg"
  }
];

let keys = Object.keys(props);

chrome.storage.sync.get(keys, (result) => {
  keys.forEach((element) => {
    if (element in result) {
      document.documentElement.style.setProperty(props[element], result[element]);
    }
  });
});

有没有更简单/更干净的方法来编写此代码？

2 个答案: