類型

內(nèi)容

位置

大小

顏色

背景圖

鏈接

其他特征

元素: {
    類型,
    內(nèi)容,
    位置,
    大小,
    ...
}

元素上的屬性比較龐大，但還是可以放在一個(gè)元素的對(duì)象里。設(shè)想如果把這些部分也放在該元素的數(shù)據(jù)結(jié)構(gòu)上，不單單有內(nèi)容數(shù)據(jù)，還有樣式上的數(shù)據(jù)，屬性上的數(shù)據(jù)等等，這樣是否就可以渲染了。那么目標(biāo)有新增，如何去編輯這“龐大”的屬性集合。

我們假設(shè)一段需要的帶屬性樣式的元素DOM結(jié)構(gòu)：

    

        content"s context
    

相比“小例子”中的

element: {
    style: {
        someKeyA: "someValueA",
        someKeyB: "someValueB",
    },
    class: ["someClass"],
    attribute: {
        custom: "someCustomData",
    },
    content: {
        text: "content"s context"
    }
}

這樣的話，我們就可以通過一個(gè)拼接方法來生成我們想要的結(jié)構(gòu)。這樣一個(gè)關(guān)于元素的數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)就有了雛形。我們可以通過修改元素上一些屬性的值，改變?cè)氐耐庠诒憩F(xiàn)。整個(gè)過程可以簡化成數(shù)據(jù)的變化引起視圖的變化，和現(xiàn)在很多前端框架數(shù)據(jù)驅(qū)動(dòng)思想有幾分相似。

通過類似上面很多小 demo 的積累，最后可以整理拼裝下，回到單個(gè)頁面上，除了元素，可能還有一些其他設(shè)置，假想預(yù)留一些字段。

那么一個(gè)頁面抽象下，格式大致如下：

page: {
    elements: [
        {
            style: ...,
            class: ...,
            attribute: ...,
            content: ...,
        },
        { element2 },
        { element3 },
        { element4 },
        { element5 },
    ],
    setting: {
        propertyA: {},
        propertyB: "valueB",
        flagC: false,
    }
}

生成的 DOM 結(jié)構(gòu)大致如下：

    

    

    ...

再把一個(gè)個(gè)單頁拼起來，就變成了我們需要的H5頁面，格式大致如下：

h5: {
    pages: [
        {
            elements: ...,
            setting: ...,
        },
        {page2},
        {page3},
        {page4},
    ],
    setting: {
        propertyA: {},
        propertyB: "valueB",
        flagC: false,
    }
}

從一個(gè)個(gè)小元素組成一個(gè)頁面，再由一個(gè)個(gè)頁面組成h5活動(dòng)頁面。至此一個(gè)對(duì)于h5頁面的抽象出來的數(shù)據(jù)結(jié)構(gòu)雛形基本完成了。

上面的結(jié)構(gòu)沒有展開，展開后你會(huì)發(fā)現(xiàn)這個(gè)大對(duì)象可能上千上萬行，接下來關(guān)注下數(shù)據(jù)和操作界面中的映射關(guān)系了，如何去操作這些數(shù)據(jù)，數(shù)據(jù)怎么展現(xiàn)，元素和頁面的關(guān)系等等。

為何要操作數(shù)據(jù)，而不是去操作DOM？

這也是在前期開發(fā)中踩過的坑，照著“所見即所得”的模式，像富文本編輯器一樣，輸入修改完就是最終輸出的內(nèi)容，也未嘗不可，實(shí)現(xiàn)時(shí)習(xí)慣使用 jQuery 的伙伴很容易會(huì)聯(lián)想到直接操作 DOM，比如一個(gè)元素的定位，使用 jquery-ui 的 draggble 拖拖拽拽很方便的定位，最后產(chǎn)出的就是最后實(shí)際的HTML。但放在實(shí)際場景中后，會(huì)發(fā)現(xiàn)拓展性兼容性不太友好。特別是在后期再去操作一段成品的 DOM 結(jié)構(gòu)會(huì)變得比較麻煩，比如一個(gè)定位的數(shù)據(jù)，成品中的數(shù)據(jù)會(huì)看起來比較“死”，在適配不同屏幕時(shí)，計(jì)算對(duì)應(yīng)的值會(huì)比較累。而如果是操作數(shù)據(jù)的話，可以在渲染之前對(duì)數(shù)據(jù)進(jìn)行些處理，最后的產(chǎn)出就變得比較靈活，將數(shù)據(jù)層和視圖層抽離的比較獨(dú)立，拓展起來也比較容易。

映射關(guān)系

如何把這些界面的業(yè)務(wù)抽象成數(shù)據(jù)操作，首先還是簡單分析整理下。一個(gè)可視化編輯應(yīng)用的操作有很多，這里只舉幾個(gè)類型的數(shù)據(jù)操作。用戶通過操作（比如輸入、拖拽、移動(dòng)、點(diǎn)擊等）來改變?cè)氐膶傩灾怠?/p>

用腦圖發(fā)散一下有哪些功能：

頁面的增刪改查

元素的增刪改查

歷史記錄的操作

用戶操作

其他

讓我們回到已經(jīng)制定的目標(biāo)上，如何編輯頁面，如何編輯元素。下面舉幾個(gè)例子

頁面編輯
一個(gè)H5由多個(gè)頁面組成，由幾個(gè){元素}組成的[元素集合]，此類關(guān)系通?？梢杂脭?shù)組來表示。

將頁面集合簡單成抽象成數(shù)據(jù)的操作：

    +-------------+
    |             |
    +-------------+

    => pages: [], index: -1

新增頁面時(shí)，在 pages 數(shù)組中 push 一個(gè)"page 1"的實(shí)例對(duì)象，再通過索引取到該實(shí)例數(shù)據(jù), 然后通過渲染方法將對(duì)應(yīng)的視圖渲染到界面中，這個(gè)關(guān)系鏈就基本完成了。

    +-------------+
    |    page 1   |
    +-------------+

    => pages: [ page1 ], index: 0

交換頁面順序

    +-------------+
    |    page 2   |
    +-------------+
    |    page 1   |
    +-------------+

    => pages: [ page2, page1 ], index: 1

通過數(shù)組的兩個(gè)值的順序交換即可以實(shí)現(xiàn)兩個(gè)頁面的順序交換，發(fā)現(xiàn)很多場景只需要通過一些數(shù)組最基本的操作就可以實(shí)現(xiàn)一些看起來復(fù)雜的功能，而困難的更多是如何找到這一層映射的關(guān)系。

元素操作

元素有多種屬性組成，多個(gè){屬性鍵值對(duì)}組成的{元素}，此類關(guān)系通常可以用對(duì)象鍵值對(duì)來表示。

在元素對(duì)象上不斷拓展需要變化的屬性，比如元素的尺寸位置：

element: {
    style: {
        "top",
        "left",
        "width",
        "height",
    },
    ...
}

可以設(shè)計(jì)如上圖四個(gè)輸入框，每個(gè)輸入框?qū)?yīng)每一個(gè)屬性值，這樣一個(gè)簡單的元素屬性編輯控件就好了，依次類推，每加一個(gè)可編輯屬性就對(duì)應(yīng)加一個(gè)編輯控件?；旧隙际且詋ey-value的形式來操作。整個(gè)過程簡化成用戶通過界面的輸入修改操作數(shù)據(jù)，數(shù)據(jù)更改后視圖對(duì)應(yīng)重新渲染一遍。

根據(jù)不斷的嘗試和增加，最后結(jié)構(gòu)變成了類似如下的格式：

element: {
    id: 1,
    role: {
        type,
        value
    },
    style: {
        "top",
        "left",
        "width",
        "height",
        "transform",
        ...
    },
    inner: {
        html: "rich text",
        style:{
            "background-image",
            "background-color",
            "background-size",
            "opacity",
            "color",
            "font-size",
            "text-align",
            "border-radius",
            ...
        }
    },
    attribute:{
        "animation-sequence",
    }
}

+--------+--------+----------+---------+-------------+
|  id    |  role  |  style   |  inner  |  attribute  |
+--------+--------+----------+---------+-------------+
|   1    |  link  |    ...   |   ...   |     ...     |
+--------+--------+----------+---------+-------------+
|   2    |  text  |    ...   |   ...   |     ...     |
+--------+--------+----------+---------+-------------+

完善后，一個(gè)元素的結(jié)構(gòu)已經(jīng)變得相對(duì)龐大了，包含了非常多的屬性，隨之而來的也是非常多對(duì)應(yīng)的屬性編輯控件，也是相對(duì)比較復(fù)雜的地方。

歷史操作

怎么抽象設(shè)計(jì)？這在平時(shí)業(yè)務(wù)場景里并不多。先分析下歷史要什么？主要就是撤銷和恢復(fù)，用戶可以 ctrl+z 回到上一個(gè)狀態(tài)。歷史這個(gè)大集合里肯定有多個(gè)歷史狀態(tài)，由多個(gè){歷史}組成[歷史集合]，于是就想到了數(shù)組。新狀態(tài)和老狀態(tài)的區(qū)別是什么？可能就是有了新的操作，數(shù)據(jù)有了變化，那么把這時(shí)的數(shù)據(jù)保存起來，塞到歷史里，相當(dāng)于是一個(gè) push 的操作，看起來可行。再假如需要回到上一個(gè)狀態(tài)，可以設(shè)置個(gè)索引 index, 將 index 指向到前一個(gè)，就拿到了前一個(gè)狀態(tài)。

                   | -- push
            +------v------+
  index --> |   status 3  |
            +-------------+
            |   status 2  |
            +-------------+
            |   status 1  |
            +------|------+
                   v -- shift

抽取幾個(gè)關(guān)鍵點(diǎn):

- 有多個(gè)狀態(tài)        -> 數(shù)組
- 不同狀態(tài)之間指向   -> 數(shù)組的索引值, 游標(biāo)
- 可以做個(gè)步數(shù)限制   -> 數(shù)組的長度

場景：有一個(gè)新的操作，即將新的數(shù)據(jù)插入到歷史中

history.push(statusNew);

場景：如果滿了，將最先插入的數(shù)據(jù)拿出來

history.shift();

場景：撤銷一步，將游標(biāo)指向到前一個(gè)，取到前一個(gè)狀態(tài)。重做一步同理。根據(jù)這時(shí)的數(shù)據(jù)重新渲染，那么界面上也就回到了前一步的狀態(tài)。

cursor --;
callback(history[cursor]);

那么history的結(jié)構(gòu)就可能長成如下:

[
    {status1},
    {status2},
    {status3},
    {statusNew},
]

這樣一個(gè)簡單的歷史數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)就完成了。

留個(gè)問題: 如果撤回到了上幾步，然后繼續(xù)操作，整個(gè)歷史狀態(tài)該怎么處理？

最后再通過組裝整合，一個(gè)可視化編輯器主要的功能大致就滿足了。再重新看下操作界面上的數(shù)據(jù)，可以劃分為兩個(gè)部分，一個(gè)前臺(tái)頁面數(shù)據(jù)，一個(gè)后臺(tái)交互數(shù)據(jù)，大致如下：

回顧上面的過程，已經(jīng)從一個(gè)簡單的數(shù)據(jù)列表渲染到具有前后臺(tái)復(fù)雜型數(shù)據(jù)交互的WebIDE，但從數(shù)據(jù)結(jié)構(gòu)的設(shè)計(jì)形式上看，本質(zhì)上變化其實(shí)并不是很大，只是