便利貼生命週期

便利貼提供了三個核心的生命週期函式供插件實作：onMount、onSave、onDelete。這些函式稱為 "Hooks"，由系統在便利貼生命週期的特定時間點呼叫。

此圖表說明了這些生命週期函式的順序和觸發時機：

onMount(sticky, origin)

當便利貼被新增到 Workspace 時被呼叫（無論是透過使用者操作或從已儲存的資料還原），是插件執行初始設定的主要位置。

引數：

• sticky：便利貼的 HTMLDivElement 實例，繼承了 Div 元素的屬性和方法，並可能包含pluginConfig屬性（詳見下文）。
• origin：指出onMount被呼叫的原因：
  • "create"：表示便利貼是新建立的（例如，使用者點擊了「新增」按鈕）。
  • "restore"：表示便利貼正從先前儲存的資料中重新建立。

用途：

• 初始化： 設定便利貼的初始狀態、外觀和行為。
• DOM 操作： 填入或替換便利貼 Body 的內容。
• 新增控制項： 在便利貼 Header 新增自訂元件（如按鈕）。
• 還原狀態： 若origin是"restore"，則使用sticky.pluginConfig（從先前的onSave呼叫中填入的資料）中的資料來還原插件的狀態。

使用範例：

// 範例插件實作
onMount(sticky, origin) {
  if (origin === "create") {
    // 便利貼剛被建立，可以在此提示使用者輸入初始內容。
    // 例如：sticky.replaceBody = h('<input placeholder="輸入網址" />');
    // 為按鈕附加事件監聽器...
    console.log("新的便利貼已建立，正在執行初始設定。");
  } else if (origin === "restore") {
    // 這個便利貼正在從已儲存的資料中還原。
    // 使用 sticky.pluginConfig 來設定狀態。
    // 例如：const savedUrl = sticky.pluginConfig.url;
    // displayContentBasedOnUrl(sticky, savedUrl);
    console.log("便利貼已從資料還原：", sticky.pluginConfig);
  }
  // 建立和還原共通的設定可以放在這裡...
}

onSave(sticky)

當 Mencrouche 需要儲存便利貼的狀態時被呼叫。這通常在使用者明確儲存時發生，或在便利貼即將被刪除前自動發生。

引數：

• sticky：便利貼的實例。

用途：

• 持久化狀態： 回傳一個可序列化為 JSON 的物件，其中包含稍後使用onMount（且origin == "restore"）還原插件狀態所需的所有資料。

回傳值：

• 一個代表插件狀態的可序列化為 JSON 的物件；如果此插件沒有特定內容需要儲存，則回傳null或undefined。回傳的物件將被儲存，並在後續呼叫onMount且origin設定為"restore"時，作為sticky.pluginConfig傳回。

使用範例：

// 範例插件實作
onSave(sticky) {
  // 假設插件邏輯將資料儲存在 'plugin' 命名空間中
  if (sticky.plugin) {
    return {
      videoId: sticky.plugin.videoId,
      autoplay: sticky.plugin.shouldAutoplay,
      lastPosition: sticky.plugin.currentProgress,
      // 還原所需的任何其他資料
    };
  }
  // 或者，如果此插件沒有狀態需要儲存，則不需要明確 return
}

onDelete(sticky)

在便利貼從工作空間移除前被呼叫。是清理插件所使用資源的好時機。

引數：

• sticky：便利貼的實例。

用途：

• 資源清理： 釋放便利貼消失後不再需要的任何資源。這可以防止記憶體洩漏或不必要的背景處理程序（例如：Object URL）。
• 停止處理程序： 取消任何進行中的操作，例如setInterval、setTimeout、待處理的網路請求，或與此便利貼實例特別相關的事件監聽器。

使用範例：

// 範例插件實作
onDelete(sticky) {
  // 如果插件建立了物件 URL
  if (sticky.plugin && sticky.plugin.imageUrl) {
    URL.revokeObjectURL(sticky.plugin.imageUrl);
    console.log("已銷毀 ${sticky.id} 便利貼的 Object URL");
  }
}

總結

• onMount(sticky, origin)
  • 時機： 在便利貼建立時（origin == "create"）或還原時（origin == "restore"）呼叫。
  • 用途： 初始化插件、設定 DOM 元素，適用時使用sticky.pluginConfig還原狀態。
• onSave(sticky)
  • 時機： 在明確的儲存操作以及在刪除或應用程式關閉前自動呼叫。
  • 用途： 回傳一個 JSON 物件，其中包含稍後透過onMount完全還原插件狀態所需的必要資料。
• onDelete(sticky)
  • 時機： 在便利貼被銷毀前呼叫。
  • 用途： 清理與該便利貼相關的任何資源。

可以閱讀sticky plugins 原始碼了解更多用途。