現在設計一個系統,目標為達到以下要求:
- 頁面由若干可複用的構建塊元件,
- 構建塊可以巢狀
- 不同的頁面只需要在後臺將構建塊按層級關係組裝在一些即可,無需編寫額外的程式碼
- 在互動過程中,可以重新整理某個或某幾個構建塊來達到更新檢視的目的
主要面臨的挑戰為:
模組的級聯更新問題
在使用者操作時將引發一系列的模組更新,它們如何同使用者操作建立聯絡,即這種事件訂閱關係如何生成?
解決方案:
- 對於父子關係的元件,由於構建塊之間是層層巢狀的關係,底層的事件可以自然地冒泡到上層元件,但是這種事件傳播又不同於 Dom 層面的事件冒泡。
- 對於處於不同子樹上的元件,則使用全域性事件進行廣播(好在這樣的情況並不多)。
- 兄弟節點之間的節點或有公共父節點的元件,則在公共父節點上處理訂閱邏輯
模組的重新整理如何實現無手動程式碼參與
將更新抽象為更新訊息,訊息傳到客戶端即可使用訊息處理器自動處理,即完成檢視的自動重新整理,對於不能重新整理的元件,提供手動更新的可選方式以獲取更高的錄活性。
構建模組如何進行初始化
每個構建塊其實有兩部分構成,Dom 樹的根節點,Javascript 的一個模組例項,在後臺生成頁面時已經為每個構建塊生成了唯一的 ID,並將此模組的型別通過 Attribute 形式傳到頁面端,頁面端根據此型別建立一個對應型別的例項,並按唯一 ID 為 Key 查詢到對應的 Dom 元素,將 Dom 元素繫結給模組例項,接下來模組例項呼叫初始化函式。