如何在浏览器中实现电子表格?

时间:2014-05-31 00:28:30

标签: excel algorithm browser architecture google-sheets

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

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

我考虑过的其他事情是:

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

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

谢谢!

3 个答案:

答案 0 :(得分:5)

对于采访,这是一个很好的问题。如果这被认为是你工作中的一项实际任务,那么使用第三方组件会有一个简单的答案,有一些很好的商业组件。

虽然我们无法确定你的面试官想要什么,但对我而言,这是一个很好的问题,因为它是如此开放的,并且有很多正确的答案。

您可以讨论UI以及如何实现电子表格所需的动态网格类型以及单元格,行和列的所有功能以及单元格和范围的选择以及值和公式的编辑。你可能只讨论一下UI的影响。

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

最后,您可以从用户体验角度运行。浏览器中的体验与本机应用程序有何不同?在桌面应用程序中可能难以在浏览器中使用哪些优点和哪些很酷的东西?什么事情要复杂得多甚至完全不可能(例如,将您的电子表格应用与文件类型相关联,以便用户可以双击文件并在您的在线电子表格应用中打开它,尽管我可能错误的仍然不支持)

好问题,很多正确答案,非常开放。

另一方面,你也可能有一个专门寻找他们想要的答案的坏面试官,在这种情况下,除非你是心灵感应,否则你几乎没有运气。

答案 1 :(得分:1)

你可以对此毫无希望地说出来。我可能会开始:

  • 如果大部分单元格已填满,请使用简单的2D数组进行存储。

  • 否则使用位置到单元格的哈希表

  • 或者像kd-tree之类的东西,它应该允许更有效地“获取所显示区域中的所有内容”查询。

通过图表,你的访问者可能意味着让每个单元格成为一个顶点,并且每个对另一个单元格的引用都是有向边缘。这将允许您相当容易地检查循环引用,并允许有效更新需要更改的所有单元格。

“在浏览器中”(大概意思是“通过网络” - 实际上“在浏览器中”并不意味着它本身就是那么多 - 人们可以编写一个在浏览器中运行但只在本地运行的程序)具有重要意义 - 你可能需要考虑:

  • 您在本地存储的是什么(一切或只是当前可见的单元格子集)

  • 您如何向服务器发送更新(您是发送每个更改还是保留已更改单元格的集合,仅在保存时发送更新,或者您是不是单独存储更改而只是在保存期间发送整个网格)

  • 也应该考虑自动保存

  • 您是否有“撤消”,这只是本地的,如果没有,您将如何在服务器上处理此问题以及如何通过更新发送

  • 一次只允许这一个用户使用它(或者你必须为多用户提供服务,这会导致处理冲突,除其他事项外,还需要处理表格)

    < / LI>

答案 2 :(得分:-1)

  1. 查看CSS cursor property只需要创建一个 电子表格Web应用程序。
  2. HTML表格还是CSS网格? HTML表是专为表格构建的 数据。
  3. 使用offsetX and offsetY可以调整单元格的高度和宽度。
  4. 存储数据非常简单。它可以是Mongo,mySQL,Firebase, ...随你。在模糊时,发送更新。
  5. Javascrip / ECMA能够提供内置的所有Excel 功能。我提到了web workers吗?
  6. 需要增加列ID中的字母吗? I got you covered
  7. 最重要的是,不要这样做。为什么?因为it's already been done。 找到需要并完成该项目。