ajax+div=iframe应用

设计初衷目标

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

 ajax+div=iframe应用_第1张图片

涉及的元素

可拖动的布局,比如:

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.每个浏览器一般有规定,同时只能加在Niframe

缺点

1.需要js变量提前声明

管理界面

 ajax+div=iframe应用_第2张图片

管理界面

 

管理界面

 


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

       Ajax+div开发选项卡,需要了解下htmldom操作,下面我们看看下面的代码:

ajax+div

 

运行结果图片

 ajax+div=iframe应用_第3张图片

       从例子中,我们可以发现,通过$('body').append(html)可以将html动态的加入到指定的div中,并且

你可能感兴趣的:(框架开发)