一 設計理念

介面、編輯器、播放器

介面是一棵元件樹。

介面編輯器就是對這棵元件樹進行編輯和持久化的工具。

編輯器維護這顆樹的資料，對外開放增刪改查，撤銷重做等介面。

介面播放器輸入元件樹，可以得到介面展示

未來甚至可以做到通過不同的播放器來適配不同的平臺。

元件

樹上的每一個元件通過輸入屬性決定自己的

• 展示
• 互動

元件可以通過元件編輯器的介面知曉是否處於編輯狀態。 編輯狀態下，元件可以提供互動編輯自己的輸入屬性。

這麼做有兩點好處

• 編輯器關注的始終只有元件樹，元件的屬性，無需關注如何編輯元件屬性
• 元件可以為自己的業務需要，量身定做最適合的互動來編輯屬性

例：設計一個 Text 元件邏輯 當處在編輯狀態下，顯示游標，文字為可編輯狀態

不處於編輯狀態，則顯示文字內容

Strikingly 正是實踐該理念的優秀產品[www.sxl.cn]

檢視元件

進一步，我們可以利用元件可以在編輯狀態下，提供自己的互動邏輯編輯自身屬性這一特性，我們可以設計出一個特殊元件—檢視元件。

檢視元件本質就是元件。只不過檢視元件的屬性是元件列表。 可以在檢視元件中視覺化增加、刪除、調整元件的順序，通過檢視元件，我們獲得了編排元件的能力。 檢視元件的互動很大程度上決定了視覺化編輯器最終是什麼樣子，如何使用。

例如：

• 我們可以在檢視元件裡放一個輸入框，通過輸入元件名稱，回車，來新增元件，也可以通過感知拖進來的元件，來更友好地新增元件。
• 檢視元件可以是一個預設的 block ，新增進來的元件都基於預設的流式佈局。也可以是一個經過擴充套件的有具體長寬的區域，可以把元件拖到區域的任何一個位置，獲得座標位置，成為一個絕對定位的容器。

根據具體目標可以設計出不同的檢視元件，甚至可以多個檢視元件共存。

檢視注入點

有了檢視元件，我們就可以開始往檢視元件裡“注入”元件、尋找需要的元件定製自己的介面了。 很多介面編輯器可能底層並不如此靈活，但是表面上都是按上述那麼做的。 截止這一步，已經可以獲得足夠優秀好用的介面編輯器了。如 strikingly 、structor 等。

[https://github.com/ipselon/structor]Structor - React UI 編輯器 這是一套非常常見的理念：編輯器負責告訴元件它應該在哪裡、使用者選擇了什麼樣的個性化方案。而最終能實現啥由元件庫決定。 這裡其實對元件的設計提出了非常大的挑戰：編輯器把一塊田地分給了你，你要做到儘量靈活地實現使用者更多需求。

這裡提出一個我認為非常具有代表性的問題：如何靈活地設計一個 Nav Bar 。

對照上圖，我們代入前面的設計思想，可以設計出如下的屬性資料結構： {logo, [{icon, name}]}

選單文字可以自由選擇是否有 icon ，有就給顯示。預先提供了一些靈活性呢。 接下來考慮如何實現點選選單觸發相應的介面變化。

…

太難了，還是不考慮了吧。

Strikingly 就沒有做這個事情。在 strikingly 裡整個模板就是一個完整的程式，選單也是這個程式的一部分，所以可以輕鬆實現選單點選的頁面聯動效果。但是，如果你想保留這個選單，但是頁面內容部分換成其他的。嗯，strikingly 沒有提供這個功能。

歸根結底，我作為一個元件，拿著編輯器分配給我的一畝三分地，要能在自己的地盤上花式滿足使用者需求已經非常不容易了，現在還要我去管其他地方怎麼顯示？ —太難了。

於是呢，乾脆就把要交給我管的地也給我吧。 使用者點選選單1，我就讓選單下面一大塊顯示 1 號地，點選選單2，就顯示 2 號地…… 然後不知道 1 號地，2 號地具體顯示什麼怎麼辦呢？ 也好說，讓編輯器來分配新的元件過來管理就行了。

說了一大堆，總算是成功引到了正題—檢視注入點。

任何元件都可以通過顯示檢視元件的方式，提供了檢視的注入點，交由使用者進一步編排元件。

舉上面 Nav Bar 的例子，Nav Bar 元件把整個屏都佔滿，bar 的下方留下的大塊空白區域是一個檢視元件，使用者可以使用這個檢視元件的編排元件能力，把空白區域用其他元件填滿。Nav Bar 這裡就只負責控制空白區域是顯示檢視元件1還是檢視元件2，至於檢視元件1和2到底顯示些什麼，完全不用管。

再舉一個 Nav Bar 上的細節：顯示選單的位置也可以通過放置檢視元件來處理，使用者往檢視元件里加 Text 就顯示文字，再往裡添一個 Icon ，那就是文字+圖示。還可以調換文字和圖示的位置，變成不常見的左文字右圖示，甚至左右倆圖示，中間是文字。隨心所欲。

總結

• 視覺化編輯從功能上分是兩大塊：編輯器和播放器
• 介面是一棵元件樹，編輯器做的就是對這棵樹進行編輯，和資料持久化
• 元件通過輸入的屬性決定如何顯示和互動，這一點同樣適用於編輯的過程
• 編輯器需要至少一個編排元件的元件 — 檢視元件，檢視元件可替換，籍此實現了編輯器的可擴充套件性。
• 任何元件都可以通過內嵌檢視元件來實現更高的靈活性。