頁面可視化搭建, 是一個歷久彌新的話題. 更廣義上講, 頁面是 GUI 的一部分, GUI 的拖拉生成在各種開發工具上很常見, 如 Android Studio, Xcode, Visual Studio 等. 前端頁面早在十幾年前就能用 Dreamweaver, Frontpage 等工具可視化搭建出來.

但是現在已經很少人使用 Dreamweaver 了, 其主要原因是頁面承載的內容已經和頁面源碼分離, 由后端接口返回再渲染到頁面, 靜態頁面網站無法承載大量的動態內容.

Dreamweaver 死了, 但是頁面可視化搭建工具依然廣泛需要和使用, 所以這個話題依然值得探討.

Dreamweaver 操作頁面示例:

文章內容

頁面構成和頁面組件化.

頁面可視化搭建工具的必要性.

頁面可視化搭建工具的區分維度.

業界的實踐實例.

頁面

頁面是 HTML / DOM

頁面可視化搭建的操作對象是頁面. 頁面是一份 HTML 文檔, 不管是靜態頁面還是動態渲染出來的頁面, 在頁面上看到的內容, 都是 HTML 文檔的一部分.

對 HTML 文檔的實例化和操作, 通過文檔對象模型(DOM)來實現, 也可以說頁面是一個 DOM. 本文沒有嚴格區分 HTML 和 DOM 這兩個概念, 以下行文都用 HTML 這個概念.

HTML 使用一種樹形結構來表示頁面, 樹的每個節點為一個頁面元素或文本節點, 一個頁面元素可以包含多個頁面元素節點或文本節點. 頁面元素通常稱為標簽, 頁面元素類型由 HTML 規范定義.

HTML 結構示例:

頁面是 HTMLTree + Data

從前端開發的角度, 可以認為頁面是由 HTMLTree 和 Data 組成, HTMLTree 是頁面元素的樹形結構, Data 是頁面元素的屬性或文本節點. 下圖中藍色框所示的節點可以認為是數據.

為什么從前端開發角度會說頁面是 HTMLTree + Data? 舉一個常見場景來說明: 在開發新頁面時, 我們是可以復制已有頁面(好吧, 我就是這樣的前端工程師), 然后只修改頁面 HTML, 或者只修改數據, 或同時修改 HTML 和數據, 從而完成新頁面的開發.

靜態頁面和動態邏輯頁面

上一節說頁面的由 HTMLTree 和 Data 組成, 討論的是靜態頁面.

瀏覽器請求靜態頁面, 網絡返回的 HTML 源碼就是頁面渲染完成后的 HTML. 靜態頁面的源碼和頁面渲染結果一致:

當下, 前端頁面更多的是有動態邏輯的頁面, 在頁面中引入和使用動態腳本(Javascript)對頁面進行修改和控制.

瀏覽器請求動態邏輯頁面, 網絡返回的 HTML 源碼與頁面渲染完成后的 HTML 有差異. 動態邏輯頁面的源碼和渲染結果有差異:

頁面組件化

頁面渲染后是一棵 HTML 元素構成的樹, 頁面的可編輯粒度為 HTML 規范定義的 HTML 元素.

使用 Web Components 組合 HTML 元素, 實現了功能封裝和可復用的頁面組件. 在流行的前端框架中, 都提供了組件化的功能, 從前端框架的視角看, 頁面是由組件樹組成. 這些組件內部維護自身的 HTML 元素結構、樣式和功能邏輯, 并通過組件的 props 獲取外部傳入的數據, 實現了功能封裝和復用.

Vue 組件樹示例:

并沒有討論 CSS

在以上的章節中, 我們并沒有討論決定頁面樣式的 CSS. 因為借助 Javascript 的動態邏輯, CSS 可以歸入到 Data 的范圍: 通過對頁面元素 style attribute 的修改, 或將 CSS 屬性動態添加到