500 lines or less学习笔记（十三）——Web 电子表格（spreadsheet）

500lines中最小的项目，99行实现一个Web电子表格，主要借助了AngularJS框架，可以学习下。

作者

Audrey Tang，自学成才的程序员和翻译，Audrey作为云服务本地化和自然语言技术的独立承包商与苹果合作。Audrey以前设计并领导过第一个 Perl 6 实现，并在 Haskell、Perl 5 和 Perl 6 的计算机语言设计委员会任职。目前，Audrey 是一个全职的g0v贡献者和领导台湾省的第一个电子规则制定项目。本文介绍一个 Web 电子表格，它是用 Web 浏览器支持的三种语言（HTML、JavaScript和CSS）编写的，共99行。

引言

1990 年，Tim Berners-Lee 发明了全球资讯网，当时的网页文件（Web pages）都是以 HTML 写成，使用尖括号标记（tags）来标记文字，给内容安排逻辑结构。以 … 标记的文字会变成超链接（hyperlinks），把用户导引至其他网页。

在 20 世纪 90 年代，浏览器加入了各种展示性标记到 HTML 词汇表，包括一些非标准标记，例如来自 Netscape Navigator 的 … 和来自 Internet Explorer 的 …，在可用性和浏览器兼容性方面造成了广泛的问题。

为了将 HTML 限制在描述文档逻辑结构的原始目的上，浏览器开发者最后同意支持两种附加语言：CSS 来形容网页的展示风格，以及 JS 来描述其动态互动功能。

从那时开始，这三种程式语言经过了 20 年的共同进化，已经变得更加简洁和强大。JS 引擎的效能获得高度提升，使得大规模的 JS 框架开始盛行，例如 AngularJS。

如今，跨平台的应用网站（Web applications，例如电子部表格），已经跟上个世纪的桌面应用程序（如 VisiCalc、Lotus 1-2-3 和 Excel）一样普及了。

使用 AngularJS 的网页应用可以在 99 行里面提供多少功能？让我们来看看！

概述

在 spreadsheet 目录里，包含了三种 Web 程式语言在 2014 年末版本的展示范例：描述结构的 HTML5、描述展示风格的 CSS3，以及描述互动功能的 JS ES6 “Harmony” 。它也用到 Web Storage 来保存资料，以及利用 Web Worker 在后台运行 JS 代码。在撰写本文时，这些 Web 标准都已获得 Firefox、Chrome、Internet Explorer 11+，以及移动浏览器 iOS 5+ 和 Android 4+ 的支持。

让我们在浏览器中打开 spreadsheet：

01-initial.png

基本概念

电子表格跨越两个维度，列从A开始，行从1开始。每个单元格都有一个唯一的坐标（如A1）和内容（如“1874”），属于以下四种类型之一：

• 文本：B1中的 + 和D1中的“⇒”，左对齐。

• 数字：A1中的“1874”和C1中的“2046”，向右对齐。

• 公式：E1中的=A1+C1，计算值为“3920”，以浅蓝色背景显示。

• 空：第2行中的所有单元格当前都为空。

单击“3920”将焦点设置为E1，并在输入框中显示其公式。

02-input.png

现在让我们将焦点设置在 A1 上，并将其内容更改为“1”，从而使 E1 将其值重新计算为“2047”。

03-changed.png

按 ENTER 键将焦点设置为 A2 并将其内容更改为 =Date()，然后按 TAB 键，将B2的内容更改为=alert()，然后再次按 TAB 键将焦点设置为 C2。

04-error.png

这表明一个公式的结果可以是一个数字（E1中的“2047”）、一个文本（A2中的当前时间，向左对齐）或一个错误（B2中的红色字母，居中对齐）。

接下来，让我们尝试输入 =for(;;){}，永不终止的无限循环的JS代码。电子表格将通过在尝试更改后自动恢复 C2 的内容来防止这种情况。

现在使用 Ctrl-R 或 Cmd-R 在浏览器中重新加载页面，以验证电子表格内容是否持久，在浏览器会话中保持不变。要将电子表格重置为其原始内容，请按左上角的 ↻ 按钮。

渐进增强

在深入研究99行代码之前，有必要在浏览器中禁用JS，重新加载页面，并注意差异:

• 屏幕上只保留一个2x2表格，只有一个内容单元格，而不是一个大表格。

• 行和列标签被 {{Row}} 和 {{col}} 替换。

• 按 ↻ 按钮不起作用。

• 按 TAB 键或单击内容的第一行仍会显示一个可编辑的输入框。

05-nojs.png

当我们禁用动态交互（JS）时，内容结构（HTML）和表示样式（CSS）仍然有效。如果一个网站在 JS 和 CSS 都被禁用的情况下仍然可用，我们说它坚持渐进增强原则，使它的内容能够被最多的读者访问。

因为我们的电子表格是一个没有服务器端代码的 Web 应用程序，所以我们必须依赖 JS 来提供所需的逻辑。但是，当 CSS 没有完全获得支持时，它确实可以正常工作，比如屏幕阅读器和文本模式浏览器。

06-nocss.png

如上图所示，如果在浏览器中启用 JS 并禁用 CSS，则效果如下：

• 所有背景和前景颜色都消失了。

• 输入框和单元格值都显示，而不是只显示一个。

• 除此之外，应用程序仍然与完整版本相同。

代码走读

下面的图显示了HTML和JS组件之间的关联。

00-architecture.png

为了理解这个图，让我们按照浏览器加载它们的顺序来浏览这四个源代码文件。

• index.html: 19行
• main.js: 38行（不包括注释和空行）
• worker.js: 30行（不包括注释和空行）
• styles.css: 12行

HTML

index.html 中的第一行声明它是用带有UTF-8编码的 HTML5 的：

如果没有字符集声明，浏览器可能会将重置按钮的Unicode符号显示为↻, 也就是乱码：由解码问题导致的错误文本。

接下来的三行是 JS 声明，通常放在head部分中：