STUDENT HTML DOCUMENT

第 24 章答案對照

先自己完成 Checkpoint 2,再用這張表定位卡住的 TASK。答案對照用來找位置,不用來整份覆蓋。

四階段都執行單頁 memory adapter。它用來練習 Firebase 介面責任,不是 Firebase 連線證據,不會跨分頁或跨裝置同步。

任務完成標記修改檔案修改位置可見結果
TASK-01DONE-01script.jscreateMemoryAdapter()recordTrace()startListening()主畫面 subscriber 收到初始 snapshot,trace 顯示 subscribe 與 notify
TASK-02DONE-02script.jscreateMessageItem()renderMessages()startConsoleSubscriber()stopConsoleSubscriber()留言以純文字渲染,Console subscriber 可訂閱並可 unsubscribe
TASK-03DONE-03script.jsfailNextSubscribe()startListening() 錯誤分支、retry 事件、addMessage()失敗時保留舊留言且無幽靈 listener,retry 後畫面與 Console subscriber 同時收到新 snapshot

四階段差異

標準驗收腳本

  1. 重新整理 Solution,trace 顯示主畫面訂閱與初始通知。
  2. 開啟 Console subscriber,新增一筆留言;畫面、Console 與 trace 都有同一次更新。
  3. 取消 Console subscriber 後再新增;畫面仍更新,Console 不再收到 snapshot,trace 顯示 unsubscribe。
  4. 按「模擬下次訂閱失敗」;狀態變錯誤,舊留言未被清空,trace 沒有殘留一個失敗的主畫面 listener。
  5. 按「重試訂閱」後回到成功狀態;輸入 <img src=x onerror=alert(1)>,畫面只顯示純文字。

Live 延伸邊界

只有備妥 Firebase 帳號、project、Web app config、Realtime Database、Emulator/最小權限 Rules 與網路,並實際以 onValue / push 連到同一 database path,才可另做雙視窗 Live 驗收。