利用json隔离网站布局和页面实际模块的内容载入

  在项目中,有个这样的需求:动态维护页面的布局,以及动态载入布局容器中的具体模块。最开始的实现方式是,在服务端一次性获取当前页面的布局结构,当前页面的所有功能模块,同时通过循环检索某一功能模块属于哪个容器并合理放置,最后获取具体功能模块的实际内容,一次性输出完成页面的显示。

  虽然解决了问题,但这种方式导致了单次请求返回数据的急剧增大,特别是在页面布局复杂、功能模块繁多时,尤其明显。

  经过多方验证,我决定采取将布局构建和内容获取进行隔离、分批次获取内容的方式,以达到减小单次请求数据量的目的。具体步骤如下:

  第一步:采用常规方式,返回页面布局HTML结构,同时也json方式,返回当前页面的所有功能模块基本信息

  布局HTML结构示例

Code

 

  同步加载的功能模块JSON

Code

 

  第二步:在客户端,利用js,将功能模块准确放置如对应的布局容器中

  我在布局容器HTML结构中,增加了columnindex属性,在功能模块的JSON配置中对应了columnIndex属性,因此利用此属性,辅以jQuery的强大选择功能,可以非常方便的将功能模块放置入对应容器,同时JSON配置中的sortIndex属性可以确定同一容器中的先后顺序。

  第三步:利用jQuery的ajax方法,分批次异步加载具体功能模块的实际内容

  我们可以看到,在功能模块的JSON配置中,每一个功能模块都具有:widgetName 和 key 2个属性,widgetName属性可以确定当前功能模块的实际类型,如上例中的"statichtml"表示静态HTML文本模块,而key属性,则对应于当前模块在系统业务逻辑中所对应的唯一关键值,这个关键值需要配合功能模块的具体类型进行综合应用,以实现从数据库或XML配置文件获取内容的目的。

  在异步获取功能模块的实际内容环节,我采取了分批次加载的方式,如果同时发出内容获取的ajax连接超过10个,那么后续的请求进入等待队列,等待前面的10个请求。当前10个请求返回一个时,则立即从等待队列中提出一个进行连接。这样,始终以比较平缓的数据请求量连接服务器,而页面内容也始终以比较缓和的方式呈现。

 

  这种方式还值得完善的地方就是,最好能够灵活设定,哪个功能模块的加载具有高优先级就更好了。呵呵呵,慢慢再完善了。

  (具体效果请浏览:http://vip.enjoosite.com,因为网站蹭的朋友VPS,所以速度体验可能不如我文章所说那么明显,仅提供我的实现思路而已,欢迎讨论)

posted @ 2009-04-20 13:47 V.Enjoy 阅读(...) 评论(...) 编辑 收藏