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

开发 前端
在项目中,有个这样的需求:动态维护页面的布局,以及动态载入布局容器中的具体模块。本文将为大家讲解如何利用JSON隔离网站布局和页面实际模块的内容载入。

最开始的实现方式是,在服务端一次性获取当前页面的布局结构,当前页面的所有功能模块,同时通过循环检索某一功能模块属于哪个容器并合理放置,***获取具体功能模块的实际内容,一次性输出完成页面的显示。

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

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

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

布局HTML结构示例

1 <div class="enjoosite_layout_container">
2   <div class="enjoosite_layout_item" columnindex="0"></div> 
3   <div class="enjoosite_layout_item" columnindex="1"></div>
4   <div class="enjoosite_layout_item" columnindex="2"></div>
5 </div>

同步加载的功能模块JSON

var __widgets = [
  {"widgetId":64,"title":"静态文本","widgetName":"statichtml",
"key":"77","columnIndex":0,"sortIndex":1},
  {"widgetId":62,"title":"EnjooSite | 熙杰科技知识库",
"widgetName":"statichtml","key":"76","columnIndex":1,"sortIndex":1},
  {"widgetId":66,"title":"本页说明","widgetName":"statichtml",
"key":"82","columnIndex":1,"sortIndex":2}
];

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

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

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

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

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

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

【编辑推荐】

  1. 基于XML和JSON设计的Flex
  2. 超越XML和JSON:YAML,Java开发人员的新选择
  3. 利用JSON在JavaScript中实现枚举
责任编辑:彭凡 来源: cnblogs
相关推荐

2010-09-14 08:53:06

DIVTable

2010-08-27 10:49:38

DIVtable

2010-08-16 09:32:01

DivCSS

2010-08-24 10:26:47

DIV+CSS

2011-06-27 17:32:20

2023-12-18 14:56:00

模块化单体系统数据库

2022-09-02 08:00:00

CSS开发框架

2009-06-09 10:24:35

NetBeansStruts页面布局

2009-07-21 13:14:27

Web页面并行化网页载入时间

2010-08-16 13:39:18

DIV+CSS

2010-03-16 18:59:47

Python模块

2010-03-19 14:59:00

python Stri

2010-08-27 10:59:11

DIVTable

2021-12-03 09:01:36

PythonJson文件Python基础

2009-09-17 09:16:25

WebForm页面内容ASP.NET MVC

2010-09-09 16:36:36

DIV标签

2010-01-05 18:14:17

.NET Framew

2010-01-06 10:27:32

JSON数组

2009-10-14 11:38:14

数据中心网络布局

2010-01-26 14:04:02

点赞
收藏

51CTO技术栈公众号