頁面可視化搭建工具 —— Tenon

時(shí)間：2023-09-17 00:54:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-17 00:54:01 來源：網(wǎng)站運(yùn)營

頁面可視化搭建工具 —— Tenon：文章比較長，不一定有耐心看，Show Code.

## 緣起

目前就職的公司，有項(xiàng)目定制快速開發(fā)界面需求，為滿足客戶，經(jīng)過1～2年的技術(shù)積累，沉淀出了界面設(shè)計(jì)器（頁面可視化搭建工具）。 設(shè)計(jì)器代碼由requirejs + jquery組成，隨著業(yè)務(wù)不斷擴(kuò)展，為滿足客戶不定性需求，設(shè)計(jì)器代碼越來越臃腫，代碼擴(kuò)展和后續(xù)維護(hù)都面臨著牽一發(fā)而動(dòng)全身的挑戰(zhàn)。 在需求不斷演進(jìn)、技術(shù)不斷革新的同時(shí)，用戶體驗(yàn)要求也越來越高，因此我們開始了對(duì)整個(gè)產(chǎn)品線包括設(shè)計(jì)器在內(nèi)的重構(gòu)。




Tenon 多半是利用業(yè)余時(shí)間，經(jīng)由技術(shù)預(yù)研和個(gè)人想法實(shí)踐而誕生。

期間踩坑、填坑，不斷推翻重來，有難度也有挑戰(zhàn)。

## 名稱由來

Tenon，取自 mortise and tenon（ 卯榫）。




由木工卯榫結(jié)構(gòu)（tenon structure）啟發(fā)，在規(guī)則內(nèi)保持靈活性。

榫卯作為一種傳統(tǒng)工藝是一種文化，也代表著一種工匠精神，更是一種精致的生活體現(xiàn)~

## 需求分類

• 靜態(tài)頁面
• 固定業(yè)務(wù)邏輯頁面
• 定制頁面

前端頁面需求可以分為這么三類。

對(duì)于定制頁面，只要用戶支付定制費(fèi)，我們不吝嗇開發(fā)，但在業(yè)務(wù)穩(wěn)定的情況下界面設(shè)計(jì)器能極大地提高效率。

這也是可視化工具的初衷之一。

## 分析問題

頁面構(gòu)成




HTML DOM 樹：




設(shè)計(jì)器的操作對(duì)象是頁面。




頁面是一份 HTML 文檔。

HTML 使用一種樹形結(jié)構(gòu)來表示頁面。

樹的每個(gè)節(jié)點(diǎn)為一個(gè)頁面元素或文本節(jié)點(diǎn)。

一個(gè)頁面元素可以包含多個(gè)頁面元素節(jié)點(diǎn)或文本節(jié)點(diǎn)。

頁面元素通常稱為標(biāo)簽。

標(biāo)簽類型由 HTML 規(guī)范定義。

• page = HTML Tree + Data + Dynamic Logic（動(dòng)態(tài)邏輯）

HTML Tree 是頁面元素的樹形結(jié)構(gòu)，

Data 是頁面元素的屬性或文本節(jié)點(diǎn)，

Dynamic Logic是使用js對(duì)頁面修改和控制。




組件化時(shí)代 Component Tree 相當(dāng)于 HTML Tree。




代碼編輯器（IDE）本質(zhì)上是對(duì)HTML Tree, Data 和 Dynamic Logic增刪和修改。




設(shè)計(jì)器是不要求使用者具有編程基礎(chǔ)，使用可視化交互的方式通過拖拉、填表或編寫代碼實(shí)現(xiàn)頁面可視化編輯的軟件工具（可視化IDE）。




四個(gè)維度

• HTML Tree 編輯

- 布局靈活，高度自由（元素、結(jié)構(gòu)、樣式、數(shù)據(jù)）

- 交互簡單

- 不涉及業(yè)務(wù)邏輯

• Component Tree 編輯

- 以組件為核心，快速迭代開發(fā)

- 業(yè)務(wù)邏輯強(qiáng)耦合，復(fù)用程度高

• 頁面 Data 編輯

- 樣式、圖片url、文本以及組件提供的屬性等

• Dynamic Logic 編輯

- 可編寫代碼，實(shí)現(xiàn)復(fù)雜業(yè)務(wù)邏輯




設(shè)計(jì)器提供的能力是編輯頁面組成部分之一或多部分。




編輯自由度

• html元素

- 可編輯的元素豐富

- 頁面結(jié)構(gòu)靈活

- 可視化編輯效率較低

- 業(yè)務(wù)邏輯封裝度較低

• 組件

- 可編輯的元素依賴設(shè)計(jì)器提供的組件

- 可視化編輯效率較高

- 業(yè)務(wù)邏輯封裝度較高




編輯自由度, 是指頁面可編輯單元的粒度。




布局方式

• 定位布局

- 頁面結(jié)構(gòu)單一

- 組件位置固定，不容易支持自適應(yīng)布局

• 嵌套布局

- 頁面結(jié)構(gòu)靈活

- 支持自適應(yīng)展示布局




關(guān)于設(shè)計(jì)器的實(shí)現(xiàn)，有嵌套和無嵌套兩種布局方案。

在滿足其業(yè)務(wù)需求的前提下，無論哪種實(shí)現(xiàn)，都是革命性的突破。

若是將兩者結(jié)合，并遵循**所見即所得**的設(shè)計(jì)方式，或許是一種新的思路。




定位布局是一種無嵌套布局，只需父元素設(shè)置`position: relation`屬性便能實(shí)現(xiàn)拖拽組件生成頁面。




要滿足嵌套布局，需要有嵌套布局容器組件。

嵌套布局容器組件（NestedLayoutContainer）是一個(gè)支持嵌套布局的組件。可插入特定組件（嵌套布局容器組件、定位布局容器組件、導(dǎo)航組件、視圖組件等），并支持特定組件排序和屬性設(shè)置（高度、寬度、對(duì)齊方式等）。




要支持定位布局嵌入嵌套布局，需要有定位布局容器組件。

定位布局容器組件（PositionLayoutContainer）是一個(gè)支持無嵌套定位布局、且支持插入嵌套布局容器組件的組件?？刹迦霟o嵌套組件并限制最大拖動(dòng)范圍，即定位布局容器組件是無嵌套組件的父級(jí)。

## 架構(gòu)設(shè)計(jì)

愿景

• 內(nèi)容可配置，頁面結(jié)構(gòu)可配置，邏輯可配置
• what you see is what you get

定位

• 目標(biāo)

- 快速搭建頁面

- 降低門檻

- 提高效率

- 便于后期實(shí)施人員維護(hù)

• 體驗(yàn)

- 易用性

- 高效性

- 可維護(hù)性

- 頁面呈現(xiàn)一致性




平臺(tái)支持

• pc
• iPad
• mobile

開發(fā)自適應(yīng)組件以支持不同平臺(tái)展示，沒必要為不同平臺(tái)單獨(dú)定制項(xiàng)目。




視圖布局




Tenon 由項(xiàng)目列表頁面、設(shè)計(jì)頁面、預(yù)覽頁面三部分組成。




核心理念







組件







組件是對(duì)HTML元素、樣式布局、業(yè)務(wù)邏輯的封裝。




數(shù)據(jù)

• 配置數(shù)據(jù)

- css級(jí)別

- 字體屬性

- 文本屬性

- 背景屬性

- 容器屬性

- 邊框?qū)傩?br>
- 定位屬性

- 鼠標(biāo)屬性

- …

- 組件級(jí)別




對(duì)配置數(shù)據(jù)的描述，使用JSON格式，并遵循 JSON Schema 規(guī)范。







例如對(duì)邊框?qū)傩缘拿枋鯦SON Schema為：

const borderSchema = { title: 'border', type: 'object', properties: { borderWidth: { description: '邊框?qū)挾?#39;, type: 'number', minimum: 0, format: 'number', }, borderRadius: { description: '邊框圓角', type: 'number', minimum: 0, format: 'number', }, borderStyle: { description: '邊框樣式', type: 'string', enum: [ { text: 'none', value: 'none' }, { text: 'solid', value: 'solid' }, { text: 'dashed', value: 'dashed' }, { text: 'dotted', value: 'dotted' }, { text: 'double', value: 'double' }, ], format: 'select', }, borderColor: { description: '邊框顏色', type: 'string', format: 'color', }, },}


使用 JSON Schema 描述組件有以下幾點(diǎn)好處：

• 配置數(shù)據(jù)校驗(yàn)，避免編輯錯(cuò)誤
• 生成屬性編輯區(qū)域
• 組件與配置數(shù)據(jù)解耦
• 組件與設(shè)計(jì)器解耦
• 數(shù)據(jù)趨于標(biāo)準(zhǔn)化，降低后期維護(hù)的差異性

組件可以按照J(rèn)SON Schema規(guī)范描述其支持的配置數(shù)據(jù)。

此時(shí)組件是一個(gè)獨(dú)立的整體，可在任何地方使用。




解析器

• 頁面數(shù)據(jù)結(jié)構(gòu)

• 解析引擎

簡單流程原理示意圖







事件機(jī)制

• 組件A -> emit -> EventCenter -> on -> 組件B

復(fù)合組件




使用已有組件創(chuàng)建新的組件。允許對(duì)復(fù)合組件內(nèi)的組件進(jìn)行二次編輯。




Dynamic Logic




組件級(jí)別，可編寫代碼，實(shí)現(xiàn)業(yè)務(wù)邏輯。

## 結(jié)語

時(shí)常思考這樣幾個(gè)問題

• 為什么要做設(shè)計(jì)器以及做設(shè)計(jì)器的初衷是什么
• 誰是使用者
• 產(chǎn)品的定位和發(fā)展方向

也許正如本站網(wǎng)友所言：做的到可視化工具，做好可視化工具很難。

## References

• 頁面可視化搭建工具的前世今生
• json-schema
• pipeline-editor
• VvvebJs

## 快速體驗(yàn)

Tenon項(xiàng)目地址：

github地址：