百度腦圖解析：如何進行web複雜應用的漸進式開發

內容來源：2017 年 4 月 8 日，張博在「HTML5夢工場 & 微軟開發者沙龍第05期—持續集成」進行《Web複雜應用的 「漸進式」開發》演講分享。IT 大咖說（微信id：itdakashuo）做爲獨家視頻合做方，經主辦方和講者審閱受權發佈。

閱讀字數：2756 | 7分鐘閱讀

嘉賓演講視頻及PPT回顧： suo.im/5a7RLl

摘要

本次演講經過對百度腦圖的解析，展示瞭如何進行web應用的漸進式開發。具體分別講解了百度腦圖的整體結構、kity座標交換、kityminder-core的命令模式、渲染和佈局等。

百度腦圖是什麼？

百度腦圖是一款在線思惟導圖編輯工具，常被用在工做規劃、頭腦風暴、會議記錄、讀書筆記、考試大綱等方面。

百度腦圖結構

百度腦圖的底層是基於SVG矢量圖形庫，在此基礎上是一個思惟導圖的封裝——Kityminder-core，還有一個完善導圖功能的hotbox，它是一個上下文本快捷菜單。最後的徹底體就是一個編輯器——Kityminder-editor。

以上是功能性的結構，除此以外還有業務上的應用，好比文件管理、用戶認證、分享、歷史版本管理等等。能夠看出整個構造從裏往外通用性不斷下降、定製程度也隨之增長。這就是一個漸進的過程，不一樣的目標人羣可以找到所需的功能。

Kity

Kity是一款矢量圖形庫，它的最底層特性是面向對象支持。衆所周知JavaScript是弱類型語言，要想用它完成工程化的產出，就須要面向對象的支持。所以咱們基於ES5構建了一套面嚮對象語言的實現，包括定義類、擴展類、繼承以及混合。下圖就是Kity類的繼承關係。

Kity座標系

Kity的一個核心內容就是座標系的概念，它的座標系分爲自身座標系和參考座標系。自身座標系只存在一個，用於定義圖形。參考座標系由觀察者選取，針對不一樣的參考有不一樣的座標系，它的目的是用來觀察圖形。

Kity座標變換

上圖中的二維線性變換矩陣可以很清楚的將二維空間中的圖形變換呈現出來。

Kity座標變換函數

相對於指定座標系的線性變換：Shape.getTransform(refer):matrix

相對於圖形自身座標系的區域：Shape.getBoundaryBox():box

相對於指定座標系的區域：Shape.getRenderBox(refer):box

事件發生時相對指定座標系的位置：ShapeEvent.getPosition(refer):Point

Kityminder-core

Kityminder-core命令

1.執行命令：execCommand(command,args)

2.查詢命令狀態：queryCommandState(command),可執行返回0，不可執行返回-1，已執行返回1

3.查詢命令結果：queryCommandValue(Command)

這三個函數中Command參數表示須要傳入的命令，args補充參數。例如minder.execCommand(‘expand’)就表示展開當前節點。

Kityminder-core常見命令

AppendChildNode：添加子節點到選中的節點中

Arrange：調整選中節點的位置

Camera：設置當前視野中心點的當前樣式

Image:爲選中的節點添加圖片

Progress：設置節點的進度信息

Kityminder-core節點數據結構

Parent：父節點

Children：子節點數組

Root：根節點

Data：節點數據，如：文字、備註 、優先級

Rc：renderContainer，節點渲染出的容器

Attached：是否獨立節點

Type：root，main，sub

Kityminder-core節點圖示

Kityminder-core渲染

Kityminder-core中渲染就是決定節點外觀，並在渲染後提供contentBox，目前共提供了10個渲染器。

渲染的實現基於渲染器基類core/render提供的運行時支持，可以相對自身座標系分別對center、top、bottom、left、right、outline、outside位置進行渲染。

Kityminder-core佈局

佈局就是決定一個節點相對父節點的位置，並提供一個layoutBox，它默認是相對於父節點的座標系，每一個節點data均有layout屬性。Kityminder-core提供了5種主要佈局和10中子佈局。

Kityminder-core模板

模板是佈局和連線的集合，目前腦圖提供了上圖中的6種模板。

Kityminder-editor

Kityminder-editor基於Angular1.x，依賴於execCommand函數，並添加了hotbox和UI。

Kityminder-editor hotbox

Hotbox又叫作熱盒UI，是一種高效的上下文交互方式。能夠說是一種快捷菜單，選中節點後敲擊空格就會展示，接着就可使用方向鍵選中須要的功能。這樣就能擺脫頻繁使用鼠標點擊工具欄的狀況。

Kityminder-editor有限狀態機

有限狀態機是計算理論的入門概念，是表示有限個狀態以及在這些狀態之間轉移的數學模型。腦圖中的初始狀態爲normal，當用戶輸入的時候就會切換到input狀態，選擇狀態下敲擊空格切換到hotbox狀態。由此經過這種機制就能在不一樣狀態下完成不一樣的交互。

One more thing

多人實時協同編輯

因爲是實時協同，因此不能加鎖。此外多個客戶端與同一個服務器的通訊，其實發送的是數據的增量，基於JSON-diff就能獲得不一樣時刻的json增量。除此以外它的底層基於 websocket，咱們用到了 js 庫SocketIO。

多人實時編輯難點

必須知足：

全部客戶端和服務器操做的順序一致

全部客戶端和服務器操做的集合一致

基於版本號的實時協做算法

爲了解決多人實時編輯的問題，咱們實現了一個基於版本號的實時協做算法。上圖是服務端的操做流程，能夠看到它有一個server三個客戶端，a客戶端首先向服務器發送請求，服務器接收到後將head部分經過patch操做更新到最新，而且版本號自更新，最後給a客戶端回覆確認，同時將版本號以及diff廣播到其餘客戶端。

客戶端方面爲了能更方便的編輯，咱們將節點分紅三個狀態，分別是head——已確認的快照、pending——等待確認的快照、work——正在工做的快照。客戶端的版本號是嚴格遞增的，按照版本號遞增順序合併。