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

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

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

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

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

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

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

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

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

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

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

增加操作：

• 增加文件：在某個(gè)目錄父節(jié)點(diǎn)上進(jìn)行增加子節(jié)點(diǎn)，增加節(jié)點(diǎn)時(shí)可以看到默認(rèn)的定位位置通常在前面，因?yàn)槿绻诺胶竺婧苋菀壮霈F(xiàn)不在同一頁面的情況，導(dǎo)致用戶還要滾動(dòng)下面去進(jìn)行命名，文件增加之后則會(huì)根據(jù)其命名定位到對(duì)應(yīng)的位置，相當(dāng)于節(jié)點(diǎn)插入時(shí)要進(jìn)行排序。

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

修改操作：

• 修改文件：修改文件時(shí)同樣僅在當(dāng)前位置提示可編輯，修改后會(huì)自動(dòng)進(jìn)行節(jié)點(diǎn)的重新排序。

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

刪除操作：

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

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

2.有道云筆記編輯器

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

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

同時(shí)它支持多層目錄，這一點(diǎn)也增加了實(shí)現(xiàn)復(fù)雜度，因?yàn)槎鄬幽夸浘鸵馕吨鴮訑?shù)是無限制的，那么在處理其層級(jí)的時(shí)候問題就會(huì)更多，復(fù)雜度更高。

這樣的設(shè)計(jì)無疑更適合網(wǎng)頁文檔編輯器，因?yàn)閔ttp請(qǐng)求的不確定性和耗時(shí)要遠(yuǎn)遠(yuǎn)大于本地硬盤。

3.簡書編輯器

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

可以看到簡書這里同樣將目錄和文章進(jìn)行了分割，保證同一個(gè)目錄下的文章可以進(jìn)行分頁讀取，避免請(qǐng)求量過大。

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

4.目錄的價(jià)值

文檔目錄本身最大的價(jià)值就是方便用戶進(jìn)行文章管理和分類。

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

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

方案對(duì)比