簡介：?在前端可視化搭建領域中“重做”和“撤銷”這兩個功能已經是標配中的標配，畢竟只要有用戶行為的地方就可能會有出錯，這兩個功能無疑就是為用戶提供了“后悔藥”。目前有各種各樣的可視化搭建平臺，本文介紹IoT Studio可視化搭建平臺在編輯歷史功能上的設計與思考。

作者 | 遠坂
來源 | 阿里技術公眾號

一 背景

在前端可視化搭建領域中“重做”和“撤銷”這兩個功能已經是標配中的標配，畢竟只要有用戶行為的地方就可能會有出錯，這兩個功能無疑就是為用戶提供了“后悔藥”。目前有各種各樣的可視化搭建平臺，本文介紹IoT Studio可視化搭建平臺在編輯歷史功能上的設計與思考。

二 實現思路

1 頁面DSL的維護

在IoT Studio可視化搭建平臺中，我們通過頁面的抽象語法樹來維護頁面狀態，頁面信息和組件信息都記錄在對應節點上：

PageNode: {componentName: 'page1',id: 'page1',props: {},children: [ComponentNode: {componentName: 'component1',id: 'component1',props: {width: 800,height: 1000,color: '#ffffff'},children: []},ComponentNode: {componentName: 'component2',id: 'component2',props: {},children: []},ComponentNode: {componentName: 'component3',id: 'component3',props: {},children: []},] }

在頁面保存時，頁面配置會作為JSON文件上傳至OSS。

2 重做與撤銷

快照法

在每次編輯頁面時，將頁面的信息進行深拷貝存入歷史記錄中。在進行重做和撤銷時從歷史記錄中取出對應的快照，用快照代替當前頁面狀態，即可完成一次歷史記錄的操作。

在這種方法下，通常使用一個指針來指向當前的頁面狀態。如下圖：

進行后退操作后，指針指向之前的某次快照，頁面恢復到P3時的狀態：

再次進行編輯時，指針指向新的狀態P5 ：

快照法的特點：

實現比較簡單，頁面信息全量進行深拷貝即可。

歷史記錄之間的切換靈活。

當頁面信息很大時，十分占用存儲空間。

指令法

IoT Studio使用的是這種方法。

我們為每一次操作定義兩個方法：execute與undo，以及將“操作”抽象為Operation。

在execute中執行這次操作的正向操作，在undo中實現逆向操作。

export abstract class Operation<T = void> { /*** 逆向操作*/protected abstract undo(): T;/*** 正向操作*/protected abstract execute(): T; }

每進行一次編輯操作，其實就是創建一次Operation并執行其execute方法，隨后如果需要撤銷就執行其undo方法。

指令法的特點：

相對快照法，在頁面配置復雜時，能節省不少存儲空間。

不同的Operation其execute和undo邏輯很可能會不一樣，有一定的邏輯開發成本。

跨多個歷史記錄的重做或撤銷，需要執行他們之前所有的execute或undo。例如，上圖中如果從O3到O1需要執行2次undo。這一點沒有快照法便利。

3 實現細節

在上文里提到了IoT Studio使用的是指令法。

Transation

在實際業務開發中，很多場景會涉及到一次性編輯多個組件，即涉及多個Operation實例。于是在Operation基礎上有了Transaction——事務的概念，Transaction下維護了一份Operation實例List，每當有execute或者undo執行時，會遍歷Operation List中的Operation實例執行其execute或undo方法。

雙向鏈表

IoT Studio中的操作歷史是基于雙向鏈表實現的，每個鏈表節點維護一個Transaction實例。鏈表節點末端的execute結果既是最新的操作歷史。

鏈表之前通過forwardCurrent和backforwardCurrent方法進行節點狀態的切換。

Class Manager {backwardCurrent(): boolean {if (this._current?.prev) {this._current.value.operation.undo();this._current = this._current.prev;this._validLength -= 1;return true;}return false;}forwardCurrent(): boolean {if (this._current?.next) {this._current.next.value.operation.execute();this._current = this._current.next;this._validLength += 1;return true;}return false;}addAfterCurrent(item: OperationResult<any>) {if (nextNode) {nextNode.prev = undefined;this._length = this._validLength;}this._current.next = { value, prev: this._current };this._current = this._current.next;} }

每當有新的編輯操作時，會通過addAfterCurrent插入新的節點。

4 總結

Operation是實現重做和撤銷的最小指令實例，通過Operation不同子類實現不同的execute和undo方法，從而實現重做和撤銷的具體邏輯。

Transaction中維護了Operation實例數組，我們在進行業務邏輯開發中對組件進行屬性設置時是以Transaction實例為單位進行業務邏輯開發。

維護了一個雙向鏈表來對Transaction實例進行管理，從而實現可視化搭建的操作歷史功能。

三 探索

在實現思路中我們提到了“快照法”和“指令法”，對比兩者的優缺點，不難發現主要矛盾是在體積與維護成本上。那么有沒有一種辦法能兼顧二者的優點呢？下面兩個工具可以提供一些思路：

immutable.js + 快照法

在JS中對象是引用賦值，在保存對象時往往會使用深拷貝規避這個問題，但是這樣會造成CPU和內存的浪費，這也是快照法的缺點所在。

immutable使用持久化數據結構，在使用舊數據創建新數據的時候，會保證舊數據同時可用且不變，同時為了避免深度復制復制所有節點的帶來的性能損耗，immutable使用了結構共享，即如果對象樹種的一個節點發生變化，只修改這個節點和受他影響的父節點，其他節點則共享。

在實現操作歷史功能時，使用immutable存儲數據，能解決數據復用的問題。immutable.js + 快照法可以組合使用。據我所知公司的@ali/visualengine使用的就是這個方案。

Git

每次我們運行 git add 和 git commit 命令時，Git 所做的工作實質就是將被改寫的文件保存為數據對象， 更新暫存區，記錄樹對象。

我們在使用git維護項目時，理論上隨著git commit的次數越來越多，文件對象會越拉越大，但實際上體積并沒有變的很大。事實上git在權衡時間和空間后幫我們做了部分優化，較早的版本會保存diff，較新的本會保存全量數據對象。

Git 是如何做到這點的？Git 打包對象時，會查找命名及大小相近的文件，并只保存文件不同版本之間的差異內容。 你可以查看包文件，觀察它是如何節省空間的。
同樣有趣的地方在于，第二個版本完整保存了文件內容，而原始的版本反而是以差異方式保存的——這是因為大部分情況下需要快速訪問文件的最新版本。最妙之處是你可以隨時重新打包。Git 時常會自動對倉庫進行重新打包以節省空間。當然你也可以隨時手動執行 git gc 命令來這么做。

原文鏈接

本文為阿里云原創內容，未經允許不得轉載。?

總結

以上是生活随笔為你收集整理的IoT Studio可视化搭建平台编辑历史功能的思考与探索的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。