面向对象方式编写前端页面(2)通用信息显示窗

　　继续上一篇文章扯蛋。请思考一个问题，上一篇文章那个公司信息列表，如果要查看某一公司的详细信息，要如何设计相关功能？请大家先思考一下。

　　常规做法——设计一个公司信息显示页面，例如：viewcompany.htm，显示公司信息时将公司编号作为url参数传过去，例如：viewcompany.htm?id=2，为方便用户操作，一般会在viewcompany.htm添加一个返回按钮，可以返回到公司信息列表页面。说说我的做法，设计一个通用信息显示窗（实际上是一个div弹出层），将相关信息在此窗体中显示。至于为什么要这么做文章末尾会分析两种做法的开销对比。先看效果（所有公司名称均为虚构，如有雷同实属巧合）：

　　一、功能分析

　　为防止点击公司名称反复弹出div层，需要用一个mask层覆盖在公司信息列表上面，修改mask层的z-index，并设置透明度。然后将信息弹出层显示在mask层上面，通过修改z-index实现。

　　最重要的是，让此信息显示窗能显示通用信息，这里将信息简单分成文字和图片两种类型，窗口分两列显示，文字高度固定，图片高度可变，窗口应能滚动以显示所有信息。

　　二、关键代码：

　　1、首先是公司信息列表中公司名称链接，点击此链接应弹出通用信息显示窗口

　　请忽略90行最右边那个“\”，仅为了能在一屏内显示完全。眼尖的你可能发现了alert()，目前，那只是一个“占位符”，后续功能会实现。

　　2、接着是显示通用信息窗的代码

　　简单的说此函数动态添加div标签实现弹出层效果，然后再从数据库中读取相关数据，并将数据格式化显示出来。

　　3、接下来看看格式化数据的代码

　　将数据格式化为两列显示，rh表示行高，“f”表示固定，“a”表示自动，左边为标题（clc），右边为相关数据（crc） ，你也许觉得奇怪，为什么不在后端读取数据时一并进行格式化，非要返回给前端格式化数据？这个问题请看开销对比的分析。

　　三、开销对比：

　　好了，现在可以总结两种做法的优缺点了，常规做法的优点就是简单，缺点就是开销比较大，有哪些开销呢？显示信息时需要请求viewcompany.htm页面，返回时需要请求公司信息列表页面，显示信息时需要读取相关公司信息，返回列表页面时需要读取相应页的公司信息，所以一共是2次页面请求加2次数据库读取操作。再看看采用通用信息显示窗，优点是开销小，缺点是代码复杂，来看看通用信息显示窗的开销。显示信息时无需请求页面，只有1次读取相关公司信息，不存在返回操作，所以一共是0次页面请求加1次数据库读取操作！数据量小的情况下这两种方法在性能上区分不太明显，如果你的数据量有100万甚至1000万的时候，是要好好考虑一下后端的承受能力。