1.2 构建第一个单页应用
现在是时候来开发单页应用了。我们将会采取最佳做法，在讲解的同时会进行解释。
1.2.1 定义目标
我们的第一个单页应用，目标不太大，在浏览器窗口的右下角显示一个聊天滑块，你可能在Gmail或者Facebook上见过，和它们是类似的。当应用加载时，滑块是收起的。当点击滑块时，它就会展开，如图1-3所示。再次点击，它又会收起来。
除了打开和关闭聊天滑块以外，单页应用通常还会做很多其他的事情，比如发送和接收聊天消息。为了使这个简介示例相对简单和简洁，我们会省略这些麻烦的细节。借用一句名言，单页应用不是一天建成的。不用担心，在第6章和第8章会再来讲解发送和接收消息。
在接下来的几个小节，我们会为单页应用开发创建一个文件，介绍一些我们喜欢的工具、开发聊天滑块的代码以及强调一些最佳做法。我们在这儿给出了很多需要吸收的东西，并不期望你现在就能理解所有的事情，尤其是我们使用的一些JavaScript技巧。在接下来的几章里面，每一个主题都会更详细地进行讨论，但是现在，请放松，不要担心这些鸡毛蒜皮的小事，知道是什么情况就行啦。
1.2.2 创建文件结构
我们使用单个文件spa.html来创建应用，外部库只使用jQuery。一般而言，更好的做法是将CSS和JavaScript分成单独的文件，但开始时使用单个文件，对开发和示例都很方便。我们先规定在哪儿放置样式和JavaScript，还会添加一个< div>容器，在其中编写应用的HTML代码，如代码清单1-1所示。
代码清单1-1 “小荷才露尖尖角”——spa.html
现在已经准备好了文件，我们使用Chrome开发者工具来查看应用的当前状态。
1.2.3 使用Chrome开发者工具
使用Google Chrome打开清单（spa.html）。看到的是浏览器空白窗口，因为还没有添加任何内容。但底层已有所效果了。我们使用Chrome开发者工具查看一下。
可以点击Chrome右上角的扳手图标来打开Chrome开发者工具，选择“工具”，然后选择“开发者工具”（菜单 > 工具 > 开发者工具）。这会显示开发者工具，如图1-4所示。如果没有看到JavaScript控制台，点击左下角的Activate console按钮就能显示控制台。控制台应该是空白的，这意味着没有JavaScript警告或者错误。这是正确的，因为当前还没有JavaScript。控制台上方的“Elements”区域显示了HTML代码和页面结构。
尽管我们在这里乃至整本书都使用Chrome开发者工具，但是其他浏览器也有类似的功能。比如，Firefox有Firebug，IE和Safari也都提供了它们自己的开发者工具。
在这本书中，当展示清单的时候，我们将经常使用Chrome开发者工具，以便确保HTML、CSS和JavaScript可以很好地在一起工作。现在我们来创建HTML和CSS。
1.2.4 开发HTML和CSS
我们需要在HTML中添加一个单独的聊天滑块容器。先在spa.html文件的< style>区块添加容器的样式。对样式部分的修改，如代码清单1-2所示。
代码清单1-2 HTML和CSS——spa.html
当在浏览器中打开spa.html时，看到的滑块是收起的，如图1-5所示。我们使用了流式布局（liquid layout），界面按显示大小自适应，滑块总是固定在右下角。我们没有给容器添加边框，因为这会增加容器的宽度，从而妨碍开发，因为必须修改容器的大小来适应这些边框。在创建并验证了基本布局之后再来添加边框是很方便的，之后的章节就是这么做的。
现在已经有了视觉元素，该是使用JavaScript给页面添加交互功能的时候了。
1.2.5 添加JavaScript
我们想使用JavaScript的最佳写法。有个工具会有所帮忙，它就是由Douglas Crockford编写的JSLint。JSLint是一种JavaScript验证器，能确保代码不会破坏很多明显的JavaScript最佳写法。我们也想使用jQuery，它是一种操作DOM的工具，由John Resig编写。jQuery提供了能很容易实现滑块动画的跨浏览器工具。
在编写JavaScript之前，我们先把想要做的事情列个提纲。第一个脚本标签加载jQuery库。第二个脚本标签会包含我们自己的JavaScript，分成以下三个部分。
（1）声明JSLint设置的头部。
（2）spa函数，创建和管理聊天滑块。
（3）一行在浏览器DOM可用时就调用spa函数的代码。
我们仔细地看一下需要spa函数做什么。经验告诉我们，要用一个区块来声明模块变量，包括配置常量。需要一个函数来切换聊天滑块，需要一个接收用户点击事件的函数，它会调用切换函数。最后，需要一个函数来初始化应用的状态。我们把提纲再细化一下，见代码清单1-3。
代码清单1-3 JavaScript开发，第一轮——spa.html
这是一个好的开端！我们保持注释的原貌，来添加代码。为清楚起见，注释以粗体显示，见代码清单1-4。
代码清单1-4 JavaScript开发，第二轮——spa.html
现在来进行spa.html的最后一轮开发，如代码清单1-5所示。先加载jQuery库，然后引入自己的JavaScript，其中包括JSLint设置、spa模块和一行在DOM可用时调用spa模块的代码。spa模块的功能现在是完备的。如果你现在没明白所有的事情，请不用担心，这儿有很多需要吸收的知识，在之后的章节我们会更加详细地讲解所有的内容。这仅仅是一个示例来告诉你能做些什么。
代码清单1-5 JavaScript开发，第三轮——spa.html
不要过于担心JSLint验证，因为在之后的章节会详细地讲解它的用法。但现在需要讲解一些值得注意的概念。首先，脚本顶部的注释设置了验证偏好。其次，这段脚本和设置会通过验证，没有任何错误和警告。最后，JSLint要求函数在使用前就要声明，因此脚本是“从下往上”读取函数的，级别最高的函数在最后面。
我们使用jQuery，是因为它为基础的JavaScript功能提供了最优的、跨浏览器的工具：DOM的选取、遍历和操作，AJAX方法以及事件。比如，使用jQuery的$(selector).animate(...)方法，就能很容易地编写相当复杂的动画效果：在指定的时间周期内，使聊天滑块从收起到展开做高度变化的动画（反之亦然）。滑块的运动，先缓慢地启动，加速，然后再慢慢地停下来。这种运动叫做缓动，需要帧频计算、三角函数和跨主流浏览器的奇特实现知识。如果我们自己来编写，则需要几十行额外代码。
jQuery(document).ready(function)也帮我们节省了很多工作。只有在DOM可用之后才会运行这个函数。传统为此的做法是使用window.onload事件。由于各种各样的原因，window.onload对于要求很高的单页应用来说并不是一种高效的解决方案，尽管在这里区别不是很大。但是编写在所有的浏览器中都能使用的正确代码，是一件痛苦乏味和繁琐的事情1。
如前面的示例所示，使用jQuery所带来的好处，大大地超过了它的成本。在上面的示例中，它缩短了开发时间，减小了脚本长度，并提供了稳健的跨浏览器功能。由于jQuery库压缩后的体积很小，并且用户在他们的设备上很可能已经有它的缓存，因此它的使用成本很低甚至可以忽略不计。图1-6演示了动画完成后的聊天滑块。
现在已经完成了聊天滑块的初步实现，我们使用Chrome开发者工具，来看一下应用实际上是如何工作的。
1.2.6 使用Chrome开发者工具查看应用
如果Chrome开发者工具你已经用得很顺手了，可以略过此部分内容。如果没有，我们强烈建议你动手试一试。
在Chrome中打开文件spa.html。在它加载完之后，就马上打开开发者工具（菜单>工具>开发者工具）。
你注意到的第一件事可能是，DOM中有了< div class="spa-slider"...>元素，它已经被模块更改了，如图1-7所示。随着讲解的深入，我们会向应用中添加更多这样的动态元素。
我们可以研究JavaScript的执行情况，请点击开发者工具顶部菜单中的Sources按钮。然后选择包含JavaScript的文件，如图1-8所示。
在之后的章节，我们会把JavaScript放在单独的文件中。但对于这个示例，它是在HTML页面中的，如图1-9所示。需要向下滚动才能找到想要查看的JavaScript。
滚动到第76行时，看到的是一条if语句，如图1-10所示。我们应该想在执行该语句之前查看代码，点击左边的空白处添加断点。每当JavaScript解释器到达脚本的这一行时，它会暂停，所以能查看元素和变量，以便我们更好地理解发生了什么事情。
现在回到浏览器，点击滑块。我们将会看到JavaScript停在了76行的红色箭头上，如图1-11所示。当应用暂停的时候，可以查看变量和元素。可以打开控制台，输入各种变量，按下回车键查看该暂停状态下它们的值。我们发现if语句的条件为真（slider_height为16，configMap.retracted_height为16），甚至可以查看configMap对象这样的复杂变量，如控制台的底部所示。当查看完时，可以点击第76行左边的空白处来移除断点，然后点击右上角的Resume按钮（Watch Expressions的上面）。
一旦点击了Resume按钮，脚本会从76行继续执行，完成滑块的切换。我们回到Elements选项卡，看一下DOM发生了什么变化，如图1-12所示。在图中，我们看到由类spa-slider提供的heightCSS属性（请看右下角的Matched CSS Rules），它被元素style的样式覆盖了（元素的style的样式的优先级比class或者id的要高）。如果再次点击滑块，可以观察到随着滑块的收起，高度实时地在发生变化。
我们简短地介绍了Chrome开发者工具，只演示了很小的一部分功能，以便帮助我们理解和改变应用底层正在发生的事情。