最小化 Object 以獲得更好的可讀性

Question

我有 js object，其中包含 6000 多行。 我想讓它更具可讀性。 如您所見，下面的 object 結構在所有環境中都存在一些通用內容（'commonA'，'commonB'），是否有任何方法可以管理另一個文件中的通用內容和單獨文件中的可變內容（以便提高可讀性) 最后我們可以在主文件中鏈接這些文件來完成這個結構。

Object結構

let obj = {
    "feature": {
        "dev":{
            "commonA": {},
            "commonB": {},
            "variableDev": {}
        },
        "stage":{
            "commonA": {},
            "commonB": {},
            "variableStage": {}
        },
        "local":{
            "commonA": {},
            "commonB": {},
            "variablelocal": {}
        },
        "prod":{
            "commonA": {},
            "commonB": {},
            "variableProd": {}
        }
    }
}

公共部分存在於單個文件中，可變部分存在於不同文件中，我們可以通過某種方式將這些文件鏈接到主文件以完成原始結構。

Answer 1

嘗試mdn 文檔中提到的 Javascript proxy

const target = {
  message1: "hello",
  message2: "everyone",
};

const handler3 = {
  get(target, prop, receiver) {
    if (prop === "message2") {
      return "world";
    }
    return Reflect.get(...arguments);
  },
};

const proxy3 = new Proxy(target, handler3);

console.log(proxy3.message1); // hello
console.log(proxy3.message2); // world

在你的情況下，我們可以這樣做

const commanKeys = {
    commonA: "hello",
    commonB: "everyone",
    commonC: "ok",
    commonD: "fromCommanKeys"
};

const proxyHelper = {
    get(target, prop, receiver) {
        console.log(`%cparentKey: ${target.parentKey}`, "color: green");
        if (prop === "commonA") {
            // custom logic for A
            return "A";
        }
        else if (prop === "commonB") {
            // custom logic for B
            return "B";
        }
        else if (prop === "commonC") {
            // custom logic for C
            return "C";
        }
        else{
            return Reflect.get(...arguments)
        }
    }
};

let obj = {
    "feature": {
        "dev": {
            "utils": new Proxy({...commanKeys, parentKey: "dev"}, proxyHelper),
            "variableDev": {}
        },
        "stage": {
            "utils": new Proxy({...commanKeys, parentKey: "stage"}, proxyHelper),
            "variableStage": {}
        },
        "local": {
            "utils": new Proxy({...commanKeys, parentKey: "local"}, proxyHelper),
            "variablelocal": {}
        },
        "prod": {
            "utils": new Proxy({...commanKeys, parentKey: "prod"}, proxyHelper),
            "variableProd": {}
        }
    }
}


console.info(obj.feature.dev.utils.commonA);
console.info(obj.feature.dev.utils.commonB);
console.info(obj.feature.dev.utils.commonC);
console.info(obj.feature.dev.utils.commonD);

console.info(obj.feature.prod.utils.commonA);
console.info(obj.feature.prod.utils.commonB);
console.info(obj.feature.prod.utils.commonC);
console.info(obj.feature.prod.utils.commonD);

輸出日志

parentKey: dev
A
parentKey: dev
B
parentKey: dev
C
parentKey: dev
fromCommanKeys
parentKey: prod
A
parentKey: prod
B
parentKey: prod
C
parentKey: prod
fromCommanKeys