Chat 聊天模块
这个模块应该就是该书全篇的唯一一个模块吧,后面几乎所有的篇章都围绕这个模块去实现的,不过就通过这一个模块的实现和上线,也能体现单页应用开发到发布上线的整个过程,毕竟后面的数据,通信,发布什么的都是通用的东西,应用其他部分完全可以参照这个‘聊天模块’去实现。跟着作者的思路走一遍,也能熟知个大概。
先看下成型图吧,会不会有种很老旧XP时代的感觉,囧!!
chat
内容
该聊天模块整体分以下几块:其实都是跟着模版去实现的,差在具体实现上而已
- 配置;
- 事件处理;
- 初始化;
涉及行为处理:
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 :