ajax+div=iframe应用

设计初衷目标

在系统首页，由于系统的首页并不是固定不变的，通常会根据当前用户的岗位（角色）来动态加在需要的选项卡，所以使用硬编码的方式会带来非常复杂的开发成本。为了简化，所以系统使用使用拖动组合的方式来管理选项卡。

涉及的元素

l可拖动的布局，比如：<div class=’row’><div class=’col-sm-12’></div></div>

l可拖动的选项卡，比如：公告选项卡，跟进订单选项卡等

l桌面，已经配置好的桌面列表

前端技术

布局：由于前段的实现比较麻烦，所以这里面直接借用boostrap layoutit的设计

选项卡：ajax + div=iframe

开发者目标

1.开发简单，独立

2.不需要了解整个选项卡过多的设计，做到不入侵，不污染

3.测试简单

选项卡的演变

1.借用ebos公司的设计方式（超哥的顾问公司），使用art-template的方式来管理每个选项卡，所以在配置选项卡时，需要写javascript模板，配置参数，配置service

2.使用iframe来管理每个选项卡

3.使用ajax+div的方式来管理每个选项卡

这三种方式，是在开发过程中，不断调整总结的一个过程，下面给出三者的优缺点

Js模板

Iframe

Ajax+div

优点

1.加载选项卡速度快

2.适合简单的选项卡开发

优点

1.开发简单

2.每个选项卡都独立

3.事件绑定简单

4.测试简单

优点

1.开发简单

2.每个选项卡都独立

3.速度有js模板方式几乎一样

缺点

1.管理方式复杂

2.开发成本高，每个人都需要学习整个选项卡的架构以及实现相应的service接口

3.无法给每个选项卡绑定事件，对javascript事件的开发不方便

4.测试麻烦

缺点

1速度非常慢

2.每个浏览器一般有规定，同时只能加在N个iframe

缺点

1.需要js变量提前声明

管理界面

如何使用ajax+div开发选项卡

Ajax+div开发选项卡，需要了解下html的dom操作，下面我们看看下面的代码：

<!DOCTYPE html>

<html>

<head>

$(function(){

var html = "<h1>这是ajax+div的测试</h1>";

html += "<script type='text/javascript'>alert('hello to ajax+div');<\/script>";

$('body').append(html);

});

</script>

</head>

<body>

</body>

</html>

运行结果图片

从例子中，我们可以发现，通过$('body').append(html)可以将html动态的加入到指定的div中，并且<script>标签中的js代码得到了正确的执行。

有了如上的基础，我们就可以将原来的iframe修改为ajax+div了。那么如何修改呢？思想依然和例子一样，就是在后台将原来iframe界面的内容渲染好，然后通过ajax请求，将渲染好的html直接返回到前端，然后append到指定的div中即可。

由于原来的iframe方式都是界面跳转，所以这时候添加一个@ResponseBody标签，然后使用Freemarker手动渲染界面（默认我们返回ModelAndView，由Spring帮我们渲染），然后将渲染好的html推送回去即可。

由于现在选项卡入口太多，所以系统进一步添加一个DesktopTabController，将所有的选项卡移动接口移动到该类（方便定位于后期的维护），然后直接给该Controller添加@ResponseBody即可。

前端的修改更加简单，直接删除head,html标签，并且删除多余的include标签，只需要引入该模块的script标签即可。但是需要注意的一点就是，变量提前声明，因为append进去的方式，会立即执行script标签中的js代码。修改如下图所示

界面修改

引入的js修改下变量声明的位置

总结

选型技术时，需要同时考虑：开发者的工作，代码执行效率，测试等。简单的只考虑效率不行，只考虑开发者也不行...整个选项卡的演变过程，基本上也是围绕着这三个目标在不断的改进...