iframe对我的MVC网络应用场景的好坏

Question

我一直在研究内部网Web解决方案,这些解决方案将由系统的一组特定用户使用 - 例如供应链管理.没有搜索引擎优化或营销 - 只有易于使用和简单,吸引他们,使他们的任务简单.

我在ASP.Net上使用MVC2.我将用通用术语解释我的场景.我有一个页面,其中有一个标签视图.第一个选项卡从主表加载记录,其他选项卡加载某些详细信息表的数据.理想的例子是:

• 选项卡1:添加/编辑客户(主)记录
• 标签2:为客户添加/编辑订单
• 选项卡3:为订单添加/编辑项目(取决于选项卡2)
• 选项卡4:为该客户添加/编辑不同的地址

我正在使用jQuery ui tab.现在根据我对iframe的了解 - 如果我设计这个页面(View)将第一个标签及其内容包含在一个页面(View)中,其余的标签都有iframe,我在其中使用单独的页面(Views).简而言之 - 所有依赖选项卡都有各自的页面.

我看到的好处 -

1. 该页面变为v.light并且快速,因为当用户正在使用选项卡1时,其他选项卡将加载其iframe.
2. 从功能上讲,每个选项卡必须有自己的添加/编辑和列表独立.例如,如果我正在添加地址,那么只会刷新我的地址iframe,其余的标签/页面不需要回发并重新加载数据.
3. 如果所有内容都在一个页面中(View),则具有通用保存/取消功能将需要对象层次结构的v.complex内存中缓存.我可以使用用户控件(即.ascx),但仍然可以在一个动作中处理所有内容,就像巨大而复杂.
4. 我不用担心SEO或书签或动态尺寸.相反,我正在获得SOC(关注点分离),所有内容都正在分发v.well,主要的是它变得非常快,因为回发是分开的.

..所有这一切,如果我使用iframe :)但是,我没有看到很多人喜欢iframes: iframes是一个糟糕的主意吗？

如果是这样 - 是否有一个等效的jQuery替代品？我希望它具有iframe的优点,并且至少可以通过url和单独的回发来动态加载内容.我不想创建一个凌乱的AJAX blob,它可以处理事情,但使后端同样复杂.

请让我知道你的想法 - 我不想知道iframe有多好/坏,我只是想知道什么符合我的要求,以及iframes有更好的替代方案..对于我的场景.

编辑#1:我得到了支持浏览器的iframe列表 -

http://www.webmaster-resources101.com/articles/view/417/

编辑#2:我得到的东西可能是一个更好的选择,而不是iframe的垫脚石 -

它是两个jQuery插件的组合,是着名的jQuery选项卡插件,另一个是adhoc插件,可以控制容器的回发.

jQuery ui tab:http: //jqueryui.com/demos/tabs/

jquery-hijack:http: //code.google.com/p/jquery-hijack/

这可以吗？还有其他更好的选择吗？

Answer 1

TL; DR

请让我知道你的想法 - 我不想知道iframe有多好/坏,我只是想知道什么符合我的要求,以及iframes有更好的替代方案..对于我的场景.

AJAX解决了客户端 - 服务器通信问题.有很多客户端库使ajax非常容易.例如,Backbone与开箱即用的RESTful服务集成.

AJAX的替代品是COMET和WebSockets.

彻底的推理

1.页面变为v.light和快速,因为当用户正在使用选项卡1时,其他选项卡将加载他们的iframe.

• iframe阻止主页面的加载

如果你想使用onload处理程序,你必须等待所有iframe加载.

完全相同的概念适用于按顺序加载HTML.我不认为HTML加载是一个明显的瓶颈.我无法想象使用iframe会有明显的速度提升.

但是,使用合理的HTML和延迟加载/分页可能会显着提高速度.

2.功能上,每个选项卡必须有自己的添加/编辑和列表独立.例如,如果我正在添加地址,那么只会刷新我的地址iframe,其余的标签/页面不需要回发并重新加载数据.

每个选项卡都应该有自己的表单,而不是你可以回发.如果用户有JavaScript,那么您使用ajax.

3.如果所有内容都在一个页面中(视图),则具有通用保存/取消功能将需要对象层次结构的v.complex内存中缓存.我可以使用用户控件(即.ascx),但仍然可以在一个动作中处理所有内容,就像巨大而复杂.

不.使用骨干/脊柱.实现客户端MVC,它非常简单,结构良好.

我不用担心SEO或书签或动态尺寸.相反,我正在获得SOC(关注点分离),所有内容都正在分发v.well,主要的是它变得非常快,因为回发是分开的.

你还在回帖,而不是使用视觉上较慢的ajax.使用适当的HTML5技术,包括客户端MVC,它将分发得非常好,速度非常快.

缺点:

• 跨iframe沟通是一种正确的痛苦.

它会减慢你的速度,并且是一种痛苦的发展.iframe中的所有内容都是硬连接在一起的,因为它们都与一个客户有关.

您将如何处理主标签中的客户更改？您是否要重新加载其他3个iframe以使用正确的数据重新填充它？

那是非常昂贵和缓慢的

• 不是语义的

可以使用此元素的上下文:预期嵌入内容的位置.

您的标签不是嵌入内容.只有普通的HTML表单,它们应该是.

• iframe中缺少代码重用,因为每个代码都有自己的代码池.

您也无法重复使用元素和全局数据,因为每个iframe都是沙盒.这意味着扩展第五个选项卡会很麻烦,因为您必须开发一个全新的选项卡,而不是插入现有功能.

我相信你的主要问题是没有理解有很多工具可以编写高质量的javascript应用程序来解决你的问题.

使用脊柱或脊柱或敲击.您可能还想考虑您选择的模板引擎(我会推荐EJS或Jade)