和妹子一起有段时间了，期间经历了她电脑重装，我手机崩溃N次，因此现在的情况是我电脑上有我们QQ上的所有聊天记录，而她微信也有我们所有的记录。问题是我看不到她的所有微信记录，她看不到我的所有QQ记录 >_< 我先想着QQ，试着能不能把我这边的数据导出来后再让她导入，以失败告终。我就想着能把我导出的聊天记录，转成网页的格式，方便她看。

本来这个系列主题已经结束了，突然想到还有个功能要做，就是“模态”，即把学校选择器做成一个类似模态的对话框。这样就可以应付这样的使用场景：在一个学生列表的页面中，可以修改任意学生的所在学校，也可以添加其他学校的学生。

前一段时间整理完了SchoolBox这个系列的代码和文章，这里再做个合集，方便大家找到相应的篇目。我总共整理了10个版本（后来补充了3个版本）的代码和8篇（后来新增了2篇）文章，分别如下。

前面我写到AjaxChart，写到SchoolBox，我都在用javascript模拟“类”，提供一些接口让对象使用起来更加方便。javascript中的prototype和闭包、回调等等机制，可以完全用来实现“类”的封装。然而随着“类”规模的不断庞大，类中需要的依赖越来越复杂，如何有效的管理依赖关系也就成了一个问题。而RequireJS就是用来模拟“package”的，以管理“包”中的依赖。

Highcharts是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用（摘自百度百科）。另外HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器，现在官方的最新版本为Highcharts-4.0.4。

JPA全称Java Persistence API。JPA通过JDK 5.0注解或XML描述对象关系表的映射关系，并将运行期的实体对象持久化到数据库中（摘自百度百科）。本篇结合自己的项目经历，使用的框架是Play Framework 1.2.7，其JPA底层采用的是Hibernate 3.6的实现，来讲述基于JPA构建一个泛型DAO（Data Access Object）。

前面一连5篇下来，学校选择器已经有模有样了。这篇算是狗尾续貂了，如果在选择器中搜不到想要的学校该怎么办？我们再添加一个辅助功能，就是添加自定义学校。

上一篇中我们简单实现了搜索框的功能，这节中要为它添加按键事件，“上”“下”键选择匹配的结果，“回车”键来进入下一步，以使它使用起来更加人性化。

在上一篇中我们用观察者模式实现了自定义事件的功能，让应用层的事件回调更加松耦合。但是到此为止学校选择器仅仅做了基本的省份和学校的级联功能，现在我们要为它添加搜索的功能。

在上一篇中我们使用了封装的设计方法，实现了一个学校选择器的“类”，降低了页面中使用该功能的难度。但同时我们发现页面中需要的回调都得写在同一个地方，这使得随着页面功能的迭代，学校选择器的回调函数将变得越来越庞大。为了解决这个隐患，需要自定义事件，然后在页面中需要用到回调的地方改成监听事件。我们首先要了解下观察者模式。