利用json隔离网站布局和页面实际模块的内容载入-控件新闻-慧都网

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

转帖|其它|编辑：郝浩|2009-04-21 14:32:41.000|阅读 385 次

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

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

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

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

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

　　第一步：采用常规方式，返回页面布局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个请求返回一个时，则立即从等待队列中提出一个进行连接。这样，始终以比较平缓的数据请求量连接服务器，而页面内容也始终以比较缓和的方式呈现。

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

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：博客园

上一篇：导入日历ICS文件---解析icS文件下一篇：C#3.0实现突变赋值(Mutantic Assignment)