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

但是現(xiàn)在已經(jīng)很少人使用 Dreamweaver 了, 其主要原因是頁(yè)面承載的內(nèi)容已經(jīng)和頁(yè)面源碼分離, 由后端接口返回再渲染到頁(yè)面, 靜態(tài)頁(yè)面網(wǎng)站無(wú)法承載大量的動(dòng)態(tài)內(nèi)容.

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

Dreamweaver 操作頁(yè)面示例:

文章內(nèi)容

頁(yè)面構(gòu)成和頁(yè)面組件化.

頁(yè)面可視化搭建工具的必要性.

頁(yè)面可視化搭建工具的區(qū)分維度.

業(yè)界的實(shí)踐實(shí)例.

頁(yè)面

頁(yè)面是 HTML / DOM

頁(yè)面可視化搭建的操作對(duì)象是頁(yè)面. 頁(yè)面是一份 HTML 文檔, 不管是靜態(tài)頁(yè)面還是動(dòng)態(tài)渲染出來(lái)的頁(yè)面, 在頁(yè)面上看到的內(nèi)容, 都是 HTML 文檔的一部分.

對(duì) HTML 文檔的實(shí)例化和操作, 通過(guò)文檔對(duì)象模型(DOM)來(lái)實(shí)現(xiàn), 也可以說(shuō)頁(yè)面是一個(gè) DOM. 本文沒(méi)有嚴(yán)格區(qū)分 HTML 和 DOM 這兩個(gè)概念, 以下行文都用 HTML 這個(gè)概念.

HTML 使用一種樹形結(jié)構(gòu)來(lái)表示頁(yè)面, 樹的每個(gè)節(jié)點(diǎn)為一個(gè)頁(yè)面元素或文本節(jié)點(diǎn), 一個(gè)頁(yè)面元素可以包含多個(gè)頁(yè)面元素節(jié)點(diǎn)或文本節(jié)點(diǎn). 頁(yè)面元素通常稱為標(biāo)簽, 頁(yè)面元素類型由 HTML 規(guī)范定義.

HTML 結(jié)構(gòu)示例:

頁(yè)面是 HTMLTree + Data

從前端開發(fā)的角度, 可以認(rèn)為頁(yè)面是由 HTMLTree 和 Data 組成, HTMLTree 是頁(yè)面元素的樹形結(jié)構(gòu), Data 是頁(yè)面元素的屬性或文本節(jié)點(diǎn). 下圖中藍(lán)色框所示的節(jié)點(diǎn)可以認(rèn)為是數(shù)據(jù).

為什么從前端開發(fā)角度會(huì)說(shuō)頁(yè)面是 HTMLTree + Data? 舉一個(gè)常見場(chǎng)景來(lái)說(shuō)明: 在開發(fā)新頁(yè)面時(shí), 我們是可以復(fù)制已有頁(yè)面(好吧, 我就是這樣的前端工程師), 然后只修改頁(yè)面 HTML, 或者只修改數(shù)據(jù), 或同時(shí)修改 HTML 和數(shù)據(jù), 從而完成新頁(yè)面的開發(fā).

靜態(tài)頁(yè)面和動(dòng)態(tài)邏輯頁(yè)面

上一節(jié)說(shuō)頁(yè)面的由 HTMLTree 和 Data 組成, 討論的是靜態(tài)頁(yè)面.

瀏覽器請(qǐng)求靜態(tài)頁(yè)面, 網(wǎng)絡(luò)返回的 HTML 源碼就是頁(yè)面渲染完成后的 HTML. 靜態(tài)頁(yè)面的源碼和頁(yè)面渲染結(jié)果一致:

當(dāng)下, 前端頁(yè)面更多的是有動(dòng)態(tài)邏輯的頁(yè)面, 在頁(yè)面中引入和使用動(dòng)態(tài)腳本(Javascript)對(duì)頁(yè)面進(jìn)行修改和控制.

瀏覽器請(qǐng)求動(dòng)態(tài)邏輯頁(yè)面, 網(wǎng)絡(luò)返回的 HTML 源碼與頁(yè)面渲染完成后的 HTML 有差異. 動(dòng)態(tài)邏輯頁(yè)面的源碼和渲染結(jié)果有差異:

頁(yè)面組件化

頁(yè)面渲染后是一棵 HTML 元素構(gòu)成的樹, 頁(yè)面的可編輯粒度為 HTML 規(guī)范定義的 HTML 元素.

使用 Web Components 組合 HTML 元素, 實(shí)現(xiàn)了功能封裝和可復(fù)用的頁(yè)面組件. 在流行的前端框架中, 都提供了組件化的功能, 從前端框架的視角看, 頁(yè)面是由組件樹組成. 這些組件內(nèi)部維護(hù)自身的 HTML 元素結(jié)構(gòu)、樣式和功能邏輯, 并通過(guò)組件的 props 獲取外部傳入的數(shù)據(jù), 實(shí)現(xiàn)了功能封裝和復(fù)用.

Vue 組件樹示例:

并沒(méi)有討論 CSS

在以上的章節(jié)中, 我們并沒(méi)有討論決定頁(yè)面樣式的 CSS. 因?yàn)榻柚?Javascript 的動(dòng)態(tài)邏輯, CSS 可以歸入到 Data 的范圍: 通過(guò)對(duì)頁(yè)面元素 style attribute 的修改, 或?qū)?CSS 屬性動(dòng)態(tài)添加到