如何在浏览器中实现电子表格？答案

【问题标题】：How to implement a spreadsheet in a browser?如何在浏览器中实现电子表格？
【发布时间】：2014-07-20 20:10:35
【问题描述】：

我最近在一次采访（软件工程师）中被问到这个问题，我真的不知道如何回答这个问题。

问题的重点是电子表格的算法以及它如何与浏览器交互。对于处理单元格及其值的最佳数据结构，我有点困惑。我猜任何形式的哈希表都可以使用作为唯一键的单元格和作为单元格中的对象的值？然后，当某些内容得到更新时，您只需更新表中的该条目。面试官暗示了一张图表，但我不确定图表对电子表格有什么用处。

我考虑的其他事情是：

浏览器中的电子表格 = 自动保存。在任何更新时，将所有数据发送回服务器
相互关联的细胞，即 C1 = C2+C3、C5 = C1-C4。如果 C2 的值发生变化，则 C1 和 C5 都会发生变化。
设计模式的使用？在这种特殊情况下，一个人是否比另一个人更突出？

关于如何解决这个问题的任何提示？除了电子表格本身的算法，面试官还想要什么？与单独的应用程序相比，它在浏览器中的事实是否会增加任何困难？

谢谢！

【问题讨论】：

我想知道你在面试什么样的工作。假设对网页设计有某种工程支持，我希望您的回答能够展示 HTML、javascript 和文档对象模型的知识。 graph 这个词有点含糊。有可视图，带有 x 和 y 轴的那种，以及数据图。但也有逻辑图，由顶点和边组成。我有一种感觉，面试官在暗示后者，以跟踪细胞（顶点）和细胞相互作用（边缘）。

标签： excel algorithm browser architecture google-sheets

【解决方案1】：

对于面试来说，这是一个很好的问题。如果这是您工作中的实际任务，那么使用第三方组件的简单答案，有一些很好的商业组件。

虽然我们不能确定你的面试官想要什么，但对我来说这是一个很好的问题，因为它非常开放并且有很多正确的可能答案。

您可以讨论 UI 以及如何实现电子表格所需的那种动态网格，以及单元格、行和列的所有功能，以及单元格和范围的选择以及值和公式的编辑。您可能可以单独谈谈 UI 的含义。

或者，您可以走数据路线，谈论保存电子表格的数据结构，准确谈论公式单元格之间的链接，谈论如何检测和处理循环引用，谈论如何在浏览器中控制较少在内存和非常大的电子表格中，您可能会更早遇到问题。您可以讨论 JavaScript 与原生语言中可用的内容以及这如何影响数据结构和计算。除数据外，电子表格的一个重要问题是数值准确性和浮点数计算。浮点数的速度很快，但在极端精度下不一定准确，这会导致很多令人困惑的问题。我相信最近 Excel 切换到他们自己的固定十进制数表示，因为它现在可以在不使用内置浮点计算的情况下进行电子表格级别计算。您还可以讨论数据结构和计算以及它们如何影响性能。在浏览器中，您还没有线程，因此您无法在后台运行所有计算。如果您有 100,000 行进行复杂计算并更改一个级联所有内容的值，您可能会收到有关脚本缓慢的警告。您需要分解计算。

终于可以从用户体验角度跑了。浏览器中的体验与原生应用程序有何不同？您可以在浏览器中做哪些在桌面应用程序中可能难以实现的优势和哪些很酷的事情？什么事情要复杂得多甚至完全不可能（例如，将您的电子表格应用程序与文件类型相关联，以便用户可以双击文件并在您的在线电子表格应用程序中打开它，尽管我可能错了仍然不支持） .

很好的问题，很多正确的答案，非常开放的结尾。

另一方面，你也可能遇到了一个糟糕的面试官，专门寻找他们想要的答案，在这种情况下，除非你有心灵感应，否则你几乎不走运。

【讨论】：

【解决方案2】：

你可以说太多了。我可能会开始：

如果大多数单元格都被填满，则使用简单的二维数组来存储它。
否则使用单元格位置的哈希表
或者可能是 kd-tree 之类的，它应该允许更高效的“获取显示区域中的所有内容”查询。

通过图表，您的面试官可能意味着让每个单元格都是一个顶点，而对另一个单元格的每个引用都是有向边。这将允许您相当容易地检查循环引用，并允许有效地更新所有需要更改的单元格。

“在浏览器中”（大概意思是“通过网络”——实际上“在浏览器中”本身并不意味着那么多——可以编写一个在浏览器中运行但只能在本地运行的程序）很重要- 你可能需要考虑：

您在本地存储什么（所有内容或只是当前可见的单元格子集）
您如何向服务器发送更新（您是发送每个更改还是保留一组更改的单元格并仅在保存时发送更新，或者您是否没有单独存储更改而只是在保存期间发送整个网格)
也应该考虑自动保存
你会有一个“撤消”吗，这是否只是本地的，如果没有，你将如何在服务器上处理它以及你将如何通过更新发送
是否一次只允许一个用户使用它（或者您是否必须满足多用户的需求，这会带来处理冲突等问题）

【讨论】：

好久不见，有机会对下面的查询发表评论吗？我可以制作一张表格中所有单元格的图表，并能够找到循环依赖关系。当一个单元格被另一个工作表引用时，我该如何处理？
@SachinGutte 检查多张工作表中的依赖关系的最简单方法是为所有工作表使用一个图表，而不是每张工作表一张图表。然后你可以在那里寻找周期。

【解决方案3】：

看着CSS cursor property 只求一个创造电子表格网络应用程序。
HTML 表格还是 CSS 网格？ HTML 表格是专门为 tabular 构建的数据。
使用offsetX and offsetY 可以调整单元格的高度和宽度。
存储数据很简单。它可以是 Mongo、mySQL、Firebase、 ...任何。在模糊时，发送更新。
Javascrip/ECMA 能够提供所有内置的 Excel 职能。我提到web workers了吗？
需要增加列 ID 中的字母吗？ I got you covered。
最重要的是，不要这样做。为什么？因为it's already been done。找到需求并开展该项目。

【讨论】：