前言

來到鐵人賽倒數第二天，今天先來統籌本專案的大致進度，以及未來的方向，以及今日整理code紀錄的相關資料。

專案進度

完成部分

• 註冊功能：建置使用者資料
• 能夠判別使用者登入和驗證與否，分別給予不同的介面
• 渲染得出資料庫資料，與讓使用者修改資料

未來進度

• 跳出視窗提醒使用者：modal component
• Vuex 傳值
• 加載網站：loading component
• 路由導航：router.beforeeach

今日紀錄

註解的寫法：JsDoc

• JSDoc 是一種用於JavaScript的註釋風格，它提供了一種標準的方式來描述代碼中的變數、函數、類別等，以便生成文檔和提供代碼提示。
• 由於他的統一性，有利於團隊協作

使用方式

• /** ... */是多行註釋的開始和結束標記

簡單的範例：

/**
 * Represents a book.
 * @constructor
 * @param {string} title - The title of the book.
 * @param {string} author - The author of the book.
 */
function Book(title, author) {
}

來源：JSDoc官方文檔

主要參數：

@param： 用於描述函數的參數，指定參數的名稱和類型。
@returns： 用於描述函數的返回值，指定返回值的類型。
@type： 用於描述變數的類型。
@description： 用於提供對代碼功能的更詳細描述。
@example： 用於提供代碼的示例。

更多使用方法可以參考JSDoc中文文檔，這一次的專案先只用了基本的param與returns說明function的作用，如下圖：

私有類別（Private class features）

• JavaScript 在 ES2022 中新增了 private class fields 的語法，可以定義只能在類別內部訪問的屬性和方法。用於提高類別的封裝性和安全性。
• 私有類字段是使用井號 # 來聲明的。

Class fields are public by default, but private class members can be created by using a hash # prefix. The privacy encapsulation of these class features is enforced by JavaScript itself.
來源：MDN—Private class features

  #errMsgResult = (errMsg) => {
    const errObject = new Map([
      ["auth/invalid-email", loginErrStrings.INVALIDEMAIL],
      ["auth/user-not-found", loginErrStrings.NOTFOUNDUSER],
      ["auth/wrong-password", loginErrStrings.WRONGPWD],
      ["auth/too-many-requests", loginErrStrings.MANYREQUESTS],
      ["auth/invalid-login-credentials", loginErrStrings.INVALIDLOGIN]
    ])
    return errObject.get(errMsg)
  }

// 讓errMsgResult僅能在這裡被使用
  singnInAccount = async (loginInfo) => {
    let result;
    await signInWithEmailAndPassword(auth, loginInfo.value.email, loginInfo.value.pwd)
      .then(() => {
        console.log("FbService successfully Signin", auth.currentUser)
        result = auth.currentUser;
      })
      .catch((error) => {
        console.error("Login Fail: ", error.code)
        result = this.#errMsgResult(error.code);
      })
    return result
  }
 

總結

就快到鐵人賽結尾了，這系列文章可能還會不定期更新專案進度，以及途中遇到的問題以及解決方式。