Day15：JavaScript重構和字體調整

2023 iThome 鐵人賽

DAY 15

自我挑戰組

網站主題切換功能系列第 15 篇

15th鐵人賽

May0240

2023-09-25 16:32:53

342 瀏覽

分享至

前言

今天的目標為以下內容：

重構 JavaScript 中重複的程式碼
調整字體為 "辰宇落雁體" 時，網頁的字體大小
將程式碼合併至 GitHub 的主分支上

JavaScript 重構：消除重複的程式碼

我將重構 JavaScript 中的兩個部分，第一個是重構設定 <body> 元素的程式碼，第二個是在點擊事件中開啟側邊欄的部分。以提高程式碼的可維護性和可讀性，使程式碼不會過於冗長。

重構設定 `<body>` 元素的程式碼

在程式碼中，我用了許多方法來設定 <body> 元素的樣式，包括主題、字體選擇和字體大小。我希望將這些方法中重複的程式碼提取出來，令程式碼更簡潔。

首先，我將 bodyClassList 的初始化移到建構子中：

constructor(){
    this.bodyClassList = document.body.classList;
}

這樣就不用每次都要抓取該元素了。

然後，我將設定樣式的程式碼合併成一個 updateClassList() 方法，這樣當我需要更新 <body> 元素的類別時，我只需要呼叫此方法即可。以下為部分程式碼：

setFontSize(fontSize) {
    this.bodyClassList.remove(
      "default-font-size",
      "small-font-size",
      "large-font-size"
    );
    this.updateClassList(fontSize);
}
updateClassList(className) {
    this.bodyClassList.add(className);
}

重構點擊事件中的程式碼

在原始程式碼中，我有很多個點擊事件，每個點擊事件都有相對應用於開啟子清單的方法，這些方法中的程式碼幾乎都是重複的。

以下為原始程式碼：

toggleThemeMenu() {
    this.themeMenu.classList.toggle("show");
}
toggleFontChange() {
    this.fontChangeMenu.classList.toggle("show");
}
toggleFontSize() {
    this.fontSizeMenu.classList.toggle("show");
}

為了解決這個問題，我創建 showToggleElement() 方法，用來添加或移除元素的 "show" 類別。這樣，當我開啟子清單時，只需要呼叫此方法並傳入要操作的元素即可。

以下為重構後程式碼：

showToggleElement(elementName) {
    elementName.classList.toggle("show");
}

調整"辰宇落雁體"的文字大小

我在測試字體切換功能時，發現當我切換"辰宇落雁體"字體在網頁上顯示時，字型會比其他字體小。所以，我希望當使用者切換到"辰宇落雁體"時，字體的大小可以得到調整。

在我嘗試調整字體大小的過程中，我遇到了一個問題，就是當我試著使用 element.style.fontSize 時，變動的 CSS 程式碼會直接被寫在行內，而寫在行內的 CSS 程式碼會覆蓋掉我的類別樣式中的 font-size 屬性，進而導致其他功能無法正常使用。

為了解決這個問題，我決定增加新的類別，專門處理"辰宇落雁體"的字體大小。以下為它的類別樣式：

.default-font-size2 {
  font-size: 1.5rem;
}
.small-font-size2 {
  font-size: 1.2rem;
}
.large-font-size2 {
  font-size: 1.8rem;
}

然後，我在 setFontSize() 方法中調整程式碼，確保切換到"辰宇落雁體"字體時，字體大小可以成功變更，以下為程式碼片段：

setFontSize(fontSize) {
    this.bodyClassList.remove(
      "default-font-size",
      "small-font-size",
      "large-font-size",
      "default-font-size2",
      "small-font-size2",
      "large-font-size2"
    );

    if (this.nowFont == "font2") {
      if (fontSize === "default-font-size") fontSize = "default-font-size2";
      else if (fontSize === "small-font-size") fontSize = "small-font-size2";
      else if (fontSize === "large-font-size") fontSize = "large-font-size2";
    }

    this.updateClassList(fontSize);
}

在此程式碼中，當字體為"辰宇落雁體"時，就將 fontSize 的值進行變更，確保它是使用新的類別樣式。同時，我必須在 setFont() 方法中增加 this.setFontSize(this.nowFontSize); 方法，這是為了確保當我切換到"辰宇落雁體"字體時，就能夠立刻更改字體大小。