纯前端表格控件SpreadJS：电子表格技术实践 - 内存

在前端表格中，表格可以是松散布局的一种UI表达方式，它的最小描述单元是一个单元格，也就是我们常说的CellBase。

点击获取SpreadJS工具下载

常用的数据结构有二维数组和对象数组，对于二维数组可以想象如果出现如图所示的场景，一个表格2万行，50列。如果在这个表格的第一个单元格和最后一个单元格输入数据，可以想象一下即时只有2个单元格有内容他的内存占用仍旧会很大。

同时我们还可以想象另外一个场景，对于如图的表格如果我们数据做了剪切操作，同时表格需要支持撤销和回滚，对于以上两种方式应该怎么去做？

利用前端语言的特性，实现了一组稀疏矩阵存储模型（Sparse Array)。

相较于传统的链式存储或是数组存储，稀疏矩阵存储构建了基于行索引为Key的数据字典，在松散布局的表格数据中，稀疏矩阵只会对非空数据进行存储，而不需要对空数据开辟额外的内存空间。

对于前面2万行，50列的表格，存储结构如图所示。

使用这种特殊的存储策略，使得数据片段化变得容易，可以随时框取整个数据层中的一片数据，进行序列化或反序列化。

借用这样的特性，我们可以随时替换或恢复整个存储结构中的任何一个级别的节点，以改变引用的方式高效解决了表格数据回滚和恢复。这一点也是电子表格支持在线协同的一个基础。

另外，使用稀疏矩阵带来了另一个优势，在数据检索遍历时，无需判空，只要对有效数据校验即可。

SpreadJS | 下载试用

纯前端表格控件SpreadJS，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金等行业龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能，满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求，极大的降低企业研发成本和项目交付风险。

本文转载自葡萄城