单页WEB应用（三），Chat聊天模块

Chat 聊天模块

这个模块应该就是该书全篇的唯一一个模块吧，后面几乎所有的篇章都围绕这个模块去实现的，不过就通过这一个模块的实现和上线，也能体现单页应用开发到发布上线的整个过程，毕竟后面的数据，通信，发布什么的都是通用的东西，应用其他部分完全可以参照这个‘聊天模块’去实现。跟着作者的思路走一遍，也能熟知个大概。

先看下成型图吧，会不会有种很老旧XP时代的感觉，囧！！

chat 内容

该聊天模块整体分以下几块：其实都是跟着模版去实现的，差在具体实现上而已

1. 配置；
2. 事件处理；
3. 初始化；

涉及行为处理：
1. 点击标题栏，显示或隐藏窗口；
2. hash 值的变化触发聊天窗口的状态变化；

重点在 通过 hash 值（锚）的变化来管理聊天窗口显示和隐藏，前面在shell里面实现过，这里主要拎出来作为一个单独模块来讲

配置

配置三大块：

之前chat 模块是直接在shell模块中实现的，为了实现模块化，减少依赖，从而把该模块分离出来单独创建模块文件：spa.chat.js 和相应的样式和辅助文件等

• configMap

  这里包含了chat模块的基本配置，和所用到的模块变量，来看下里面具体都有些啥

  var configMap = {
  
      // 模块的文档结构部分，通过动态加载到其父容器中
      main_html: '' 
          + '<div class="spa-chat">'
              + '<div class="spa-chat-head">'
                  + '<div class="spa-chat-head-toggle">+</div>'
                  + '<div class="spa-chat-head-title">Chat</div>'
              + '</div>'
              + '<div class="spa-chat-closer">x</div>'
              + '<div class="spa-chat-sizer">'
                  + '<div class="spa-chat-msgs"></div>'
                  + '<div class="spa-chat-box">'
                      + '<input type="text" />'
                      + '<div>send</div>'
                  + '</div>'
              + '</div>'
          + '</div>',
  
  
      // 这个映射表，对应配置里面的变量，从对象名便可知，是用来
      // 保存配置是否可设置状态，true：表示该变量值可以改变，反之不能修改
      settable_map: { 
  
          slider_open_time    : true,
          slider_close_time   : true,
          slider_opened_em    : true,
          slider_closed_em    : true,
          slider_opened_title : true,
          slider_closed_title :