朋友們好，我是優(yōu)秀的大鵬。

今天花了很長時間思考一個網(wǎng)頁文檔編輯器，云端目錄樹要怎么設(shè)計。

這個看似簡單的需求，技術(shù)上和產(chǎn)品上的思考卻非常復(fù)雜。

下面以幾種編輯器為例，講一下各種編輯器在技術(shù)上和產(chǎn)品的思考。

1.以Vscode為代表的本地編輯器

在聊云端文檔目錄樹設(shè)計之前，要先討論下常見的本地文檔編輯器的目錄樹。

以vscode為例，通常本地文檔編輯器的目錄樹是下面這樣的：

看起來是一個簡單的多叉樹結(jié)構(gòu)，但是只是看起來，實際上大有玄機！

玄機就出現(xiàn)在對于目錄樹的操作上面，目錄樹涉及到【增刪改查】等基本操作。

查詢操作：由于目錄樹的節(jié)點數(shù)量是不確定的，所以在查詢目錄樹的時候，不能將整個目錄樹都查找回來，而是應(yīng)該只查找最外層的節(jié)點，當操作打開一個目錄的時候，則繼續(xù)讀取該目錄的葉子節(jié)點，用這種方式來控制節(jié)點的加載數(shù)量，避免加載量過大。

即便如此依然有可能會存在某個父節(jié)點下的葉子節(jié)點過多，加載量過大導(dǎo)致編輯器崩潰的情況，本地編輯器由于直接讀取硬盤所以可以接受的加載量較高，如果云端編輯器通過網(wǎng)絡(luò)請求讀取，那么可以容忍的加載量就會降低。

增加操作：

• 增加文件：在某個目錄父節(jié)點上進行增加子節(jié)點，增加節(jié)點時可以看到默認的定位位置通常在前面，因為如果放到后面很容易出現(xiàn)不在同一頁面的情況，導(dǎo)致用戶還要滾動下面去進行命名，文件增加之后則會根據(jù)其命名定位到對應(yīng)的位置，相當于節(jié)點插入時要進行排序。

• 增加目錄：整個過程和增加文件類似，唯一有區(qū)別的就是目錄還可以有子節(jié)點，文件不能有。

修改操作：

• 修改文件：修改文件時同樣僅在當前位置提示可編輯，修改后會自動進行節(jié)點的重新排序。

• 修改目錄：修改目錄和修改文件類似，唯一有區(qū)別的就是目錄要將自己節(jié)點重新排序后還要將其子節(jié)點一同挪走，同時比較有趣的是修改完成后如果是展開的目錄則會不加載其子節(jié)點，表現(xiàn)的形式就是目錄被收起來了，這個原因是目錄名稱在同一個子樹下是唯一的，相當于是key，當這個key發(fā)生修改的時候，如果繼續(xù)展開目錄，則需要將其子樹的節(jié)點都重新渲染，會極大的增加渲染消耗，甚至出現(xiàn)卡頓，所以編輯器選擇了收起目錄。

刪除操作：

刪除操作即是刪除節(jié)點，對于目錄而言不僅要刪除自己，還要遞歸刪除其所有的子節(jié)點，如果目錄的子節(jié)點層級和節(jié)點數(shù)非常的多，那么就會需要較長的時間進行刪除操作。

從上述的分析來看，如果按照vscode本地編輯器文件目錄樹去設(shè)計云端目錄，代碼實現(xiàn)上會非常復(fù)雜。

2.有道云筆記編輯器

有道云筆記是網(wǎng)頁編輯器，和要實現(xiàn)的需求更加貼近，他的交互方式如下：

可以看到有道云將目錄和目錄中的文件進行了分割，他的開發(fā)設(shè)計思路是認為目錄較少，目錄中的文件較多，所以葉子節(jié)點可以考慮進行分頁加載，目錄則一次性讀回來。

同時它支持多層目錄，這一點也增加了實現(xiàn)復(fù)雜度，因為多層目錄就意味著層數(shù)是無限制的，那么在處理其層級的時候問題就會更多，復(fù)雜度更高。

這樣的設(shè)計無疑更適合網(wǎng)頁文檔編輯器，因為http請求的不確定性和耗時要遠遠大于本地硬盤。

3.簡書編輯器

簡書的編輯器，則實現(xiàn)更為簡潔。

可以看到簡書這里同樣將目錄和文章進行了分割，保證同一個目錄下的文章可以進行分頁讀取，避免請求量過大。

不過他只支持一層目錄，這樣的優(yōu)點就是實現(xiàn)更為簡單，缺點是對于有更多層級需求的用戶就會無法滿足。

4.目錄的價值

文檔目錄本身最大的價值就是方便用戶進行文章管理和分類。

其次還可以承載文集的作用，例如下方的簡書和語雀。

所以目錄最終如何設(shè)計，既要解決用戶的文章管理問題，也要考慮文集擴展性，類似于簡書的形式對外表現(xiàn)就較為簡單，而語雀由于目錄層級多就會更為豐富。

方案對比