純前端表格控制元件SpreadJS:電子表格技術實踐 - 記憶體

語言: CN / TW / HK

在前端表格中,表格可以是鬆散佈局的一種UI表達方式,它的最小描述單元是一個單元格,也就是我們常說的CellBase。

點選獲取SpreadJS工具下載

常用的資料結構有二維陣列和物件陣列,對於二維陣列可以想象如果出現如圖所示的場景,一個表格2萬行,50列。如果在這個表格的第一個單元格和最後一個單元格輸入資料,可以想象一下即時只有2個單元格有內容他的記憶體佔用仍舊會很大。

純前端表格控制元件SpreadJS使用教程:電子表格技術實踐(二)記憶體

同時我們還可以想象另外一個場景,對於如圖的表格如果我們資料做了剪下操作,同時表格需要支援撤銷和回滾,對於以上兩種方式應該怎麼去做?

純前端表格控制元件SpreadJS使用教程:電子表格技術實踐(二)記憶體

利用前端語言的特性,實現了一組稀疏矩陣儲存模型(Sparse Array)。

相較於傳統的鏈式儲存或是陣列儲存,稀疏矩陣儲存構建了基於行索引為Key的資料字典,在鬆散佈局的表格資料中,稀疏矩陣只會對非空資料進行儲存,而不需要對空資料開闢額外的記憶體空間。

對於前面2萬行,50列的表格,儲存結構如圖所示。

純前端表格控制元件SpreadJS使用教程:電子表格技術實踐(二)記憶體

使用這種特殊的儲存策略,使得資料片段化變得容易,可以隨時框取整個資料層中的一片資料,進行序列化或反序列化。

借用這樣的特性,我們可以隨時替換或恢復整個儲存結構中的任何一個級別的節點,以改變引用的方式高效解決了表格資料回滾和恢復。這一點也是電子表格支援線上協同的一個基礎。

另外,使用稀疏矩陣帶來了另一個優勢,在資料檢索遍歷時,無需判空,只要對有效資料校驗即可。

純前端表格控制元件SpreadJS使用教程:電子表格技術實踐(二)記憶體

SpreadJS | 下載試用

純前端表格控制元件SpreadJS,相容 450 種以上的 Excel 公式,具備“高效能、跨平臺、與 Excel 高度相容”的產品特性,備受華為、蘇寧易購、天弘基金等行業龍頭企業的青睞,並被中國軟體行業協會認定為“中國優秀軟體產品”。SpreadJS 可為使用者提供類 Excel 的功能,滿足表格文件協同編輯、 資料填報、 類 Excel 報表設計等業務場景需求,極大的降低企業研發成本和專案交付風險。

本文轉載自葡萄城