继续上一篇文章扯蛋。请思考一个问题,上一篇文章那个公司信息列表,如果要查看某一公司的详细信息,要如何设计相关功能?请大家先思考一下。
常规做法——设计一个公司信息显示页面,例如: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万的时候,是要好好考虑一下后端的承受能力。