单页Web应用 6 完成Model和Data模块
设计和构建Model的Chat对象，然后会完成聊天滑块的UI工作，让它使用并响应chat对象的API。我们还添加了Avatar功能模块，它也会使用chat对象的API在屏幕上显示在线人员列表。讨论如何使用jQuery来完成数据绑定。最后，加上Data模块，我们就完成了单元应用的客户端部分。
6.1 设计chat对象
chat对象提供即时通信的功能，但需要具体地确定这些功能是什么。
- 提供加入或者离开聊天室的方法
- 提供更换听者的方法
- 提供向其他人发送消息的方法
- 提供通知服务器用户更新了头像的方法。
- 当听者不管是何原因而有变化的时候，发布一个事件。比如，假如听者下线了或者用户选择了新的听者。
- 当不管是何原因而需要更改消息框的时候，发布一个事件。比如，假如用户发送或者接收消息。
- 当不管是何原因而导致在线人员列表发生变化，发布一个事件。比如，假如某人加入或者离开聊天室，或者任意用户移动了头像。
首先采用同步方法：join() get_chatee() set_chatee(<person_id>) send_message(<msg_text>) update_avatar(<update_avatar_map>)
异步方法，事件：spa-listchange spa-setchatee spa-updatechat
给Chat对象的API添加文档：
6.2 构建chat对象
先创建chat对象的join方法：
- 使用spa.model.people.login(<username>)方法进行登入；
- 使用spa.model.chat.join()方法加入聊天室
- 注册一个回调函数，每当model从后端接收到listchange消息时，就发布spa-listchange事件，这表示用户列表发生了变化。
更新Fake以响应chat.join：
- 把已登入的用户列入模拟人员列表中
- 模拟接收来自服务器的listchange消息
给chat对象添加消息传输功能：
- 维护听者的记录
- 发送消息的时候带上元数据信息，比如发送者的ID、发送者的名字以及接受者的ID;
- 优雅地处理用户给离线人员发送消息的潜在情况；
- 当从后端接收到消息时，发布jQuery全局事件，这样jQuery集合就可以订阅这些事件，并按照这些事件调用响应的函数。
更新Fake，模拟消息传输功能：
- 模拟发出的updatechat消息的响应，响应内容是来自当前听者的updatechat消息
- 模拟来自Wilma的未经请求的updattechat消息。
- 模拟发出的leavechat消息的响应。当用户登出的时候，会发送这个消息。可以在这个时候解除聊天消息回调函数的绑定。
测试chat的消息传输功能：
6.3 给Model添加Avatar功能
显示近实时消息传输的其他用途。
给chat对象添加Avatar功能：向后端发送一个updateavatar消息。
修改Fake来模拟头像功能：
- 模拟向服务器发送updateavatar消息
- 模拟从服务器接收listchange消息，携带的数据是更新后的人员列表；
- 执行注册了listchange消息的回调函数，传入的参数是更新后的人员列表。
测试驱动开发（TDD）：P194，见附录B
6.4 完成Chat功能模块
UI功能包括：
- 更改聊天滑块的设计，引入人员列表。
- 当用户登入的时候，执行以下操作：加入聊天室、打开聊天滑块、更改聊天滑块的标题以及显示在线人员列表。
- 每当在线人员列表有变化时，就更新列表。
- 高亮在线人员列表中的听者，当列表有变化时，更新显示。
- 授权用户发送消息，从在线人员列表中选择一位听者。
- 显示来自消息记录中用户、其他人员和系统的消息。所有这些消息的颜色都是不同的，消息记录从下往上平滑滚动。
- 修改接口，支持触摸控件。
- 当用户登出的时候，执行以下操作：更改聊天滑块的标题、清除消息记录以及收起滑块。
更新Chat的JavaScript：
模板系统：目前单页应用的工具式模板系统包括Handlebars、Dust和Mustache。
更新样式表：
6.5 创建Avatar功能模块
js/spa.avtr.js
css/spa.avtr.css
6.6 数据绑定和jQuery
数据绑定是一种机制，确保当Model数据发生变化时，界面会更改，以体现Model数据的变化。
6.7 创建Data模块
客户端和服务器之间通信的所有数据都会经过这个模块。