如何在Javascript中生成getter和setter？

我有以下代碼，非常重復：

const flags = {
  get logged() {
    return localStorage.getItem("logged") === "true";
  },
  set logged(val: boolean) {
    if (val) {
      localStorage.setItem("logged", "true");
    } else {
      localStorage.removeItem("logged");
    }
  },
  get notificationsMuted() {
    return localStorage.getItem("notifications-muted") === "true"; 
  },
  set notificationsMuted(val: boolean) {
    if (val) {
      localStorage.setItem("notifications-muted", "true");
    } else {
      localStorage.removeItem("notifications-muted");
    }
  }
}

如您所見，每個標志型別的get和set都是相同的，除了屬性名稱。我想做這樣的事情：

function getter(prop: string) {
  return localStorage.getItem(prop) === "true";
}

function setter(prop: string, val: boolean) {
  if (val) {
    localStorage.setItem(prop, "true");
  } else {
    localStorage.removeItem(prop);
  }
}

const flags = {
  get logged: getter("logged")
  set logged: setter("logged")
  get notificationsMuted: getter("notifications-muted")
  set notificationsMuted: setter("notifications-muted")
}

但我不確定 Javascript / Typescript 是否支持這類事情。這樣的事情有可能嗎？如果有，怎么辦？如果沒有，還有其他方法可以減少這里的重復嗎？

uj5u.com熱心網友回復：

您可以使用帶有和陷阱的代理，使用 TS 型別僅允許您希望處理的道具（TS 游樂場）：getset

interface Flags {
  logged: boolean,
  'notifications-muted': boolean;
}

type Prop = keyof Flags;

const handlers = {
  get(_: Flags, prop: Prop) {   
    return localStorage.getItem(prop) === "true";
  },
  
  set(_: Flags, prop: Prop, val: any) {
    if (val) {
      localStorage.setItem(prop, "true");
    } else {
      localStorage.removeItem(prop);
    }

    return true;
  }
};

const flags = new Proxy<Flags>({} as Flags, handlers);

uj5u.com熱心網友回復：

您真正需要的只是與具有 a和屬性Object.defineProperty的物件一起使用。或者，對于多個屬性，使用一次定義它們。getsetObject.defineProperties

一種有助于代碼組織的方法是不使用大量本地存盤密鑰，而是使用一個被存盤的物件。

const props = ['logged', 'notificationsMuted'] as const;
const defaultStorage = Object.fromEntries(props.map(prop => [prop, false]));
const getStorage = () => JSON.parse(localStorage.getItem('settings') || JSON.stringify(defaultStorage));
const flags = Object.defineProperties(
    {},
    Object.fromEntries(
        props.map(
            prop => [
                prop,
                {
                    get: () => getStorage()[prop],
                    set: (newVal: boolean) => {
                        const store = getStorage();
                        store.prop = newVal;
                        localStorage.setItem('settings', JSON.stringify(store));
                    }
                }
            ]
        )
    )
) as Record<(typeof props)[number], boolean>;

uj5u.com熱心網友回復：

這是我能想到的當前“最佳”解決方案。向任何可以提供改進的人開放：

function getter(prop: string): boolean {
  return localStorage.getItem(prop) === "true";
}

function setter(prop: string, val: boolean): void {
  if (val) {
    localStorage.setItem(prop, "true");
  } else {
    localStorage.removeItem(prop);
  }
}

const flags = {
  get logged() { return getter("logged") },
  set logged(val: boolean) { setter("logged", val) },
  get notificationsMuted() { return getter("notifications-muted"); },
  set notificationsMuted(val: boolean) { setter("notifications-muted", val); }
}

標籤：javascript 打字稿 本地存储 吸气剂

上一篇：在each()Cypress中使用invoke()訪問href屬性

下一篇：訓練tensorflow使用VGG16對狗/貓進行分類，但準確率非常低