是否可以重構 vanilla JS DOM 操作

Question

我想知道是否有可能以一種干凈漂亮的方式重構以下代碼，以避免在每個 is 語句中重復：

if (statement) {
    menu.style.display = "inline-block";
    emoji.style.display = "inline-block";
    del.style.display = "block";
    upload.style.display = "block";
} else if (statement) {
    menu.style.display = "none";
    emoji.style.display = "inline-block";
    del.style.display = "none";
    upload.style.display = "none";
} else {
    menu.style.display = "none";
    emoji.style.display = "none";
    del.style.display = "none";
    upload.style.display = "none";
}

我知道我可以進行對象解構，但我也想減少行數，因為我的代碼中多次重復了這種和平的代碼。

Answer 1

一種選擇是創建一個元素數組，並將它們的所有樣式設置為none ，然后在條件內設置不會為none樣式：

[menu, emoji, del, upload].forEach(elm => elm.style.display = "none");
if (statement) {
  menu.style.display = "inline-block";
  emoji.style.display = "inline-block";
} else if (statement) {
  emoji.style.display = "inline-block";
}

如果您經常有多個要更改其樣式的元素，請考慮使用一個函數：

const setAllDisplays = (display, ...elms) => elms.forEach(elm => elm.style.display = display);
setAllDisplays('none', menu, emoji, del, upload);
if (statement) {
  setAllDisplays("inline-block", menu, emoji);
} else if (statement) {
  emoji.style.display = "inline-block";
}

Answer 2

您可以為每個目標維護一個具有所需狀態的對象，並獲取索引並更新目標。

var display = {
        menu: ["inline-block", "none", "none"],
        emoji: ["inline-block", "inline-block", "none"],
        del: ["block", "none", "none"],
        upload: ["block", "none", "none"],
        reference: { menu, emoji, del, upload }
    },
    index = statement ? 0 : statement ? 1 : 2;

Object.keys(display).forEach(k => reference[k].stype.display = display[k][index]);

Answer 3

“......因為我在我的代碼中多次重復了這種代碼的和平。”

所以只要把它變成一個函數，並保持它現在的樣子：

function(condition1, condition2, menu, emoji, del, upload){
  if (condition1) {
    menu.style.display = "inline-block";
    emoji.style.display = "inline-block";
    del.style.display = "block";
    upload.style.display = "block";
  } else if (condition2) {
    menu.style.display = "none";
    emoji.style.display = "inline-block";
    del.style.display = "none";
    upload.style.display = "none";
  } else {
    menu.style.display = "none";
    emoji.style.display = "none";
    del.style.display = "none";
    upload.style.display = "none";
  }
}

然后你可以從任何地方使用任何條件1和條件2調用該函數

Answer 4

我建議這樣做：

container.classList.remove("one", "two", "three");
if (expression) {
    container.classList.add("one");
} else if (expression) {
    container.classList.add("two");
} else {
    container.classList.add("three");
}

...在可重用的函數中，其中container是最近的包含menu 、 emoji 、 del和upload元素（在最壞的情況下是body ）。 然后通過 CSS 設置各個元素的樣式，例如：

.one menu {
    display: inline-block;
}
.two menu, .three menu {
    display: none;
}

顯然，您將使用反映狀態的名稱而不是"one" 、 "two"和"three" 。

---

根據表達式是什么，您可能可以使用此代碼而不是上面的if / else if / else ：

container.classList.toggle("one", expression);
container.classList.toggle("two", expression);
container.classList.toggle("three", expression);