Angularjs和MDI SPA应用程序有很多选项卡

时间:2014-05-28 20:59:14

标签: performance angularjs tabs mdi

我们必须实现多文档界面Web应用程序。每个文档都必须位于单独的选项卡中(但在同一页面上,它必须是SPA)。最多可同时打开50个选项卡,应用程序应该能够按模块对选项卡窗格进行分组。

我们的一个选择是使用AngularJS完成此任务。我们喜欢Angular处理局部视图的方式,通过使用模块/控制器来构造应用程序并执行依赖注入。

在挖掘了几天之后,我们发现绑定的工作方式可能存在一些问题:没有简单的方法可以防止角度观看标签,这些内容当前没有显示给用户。您可以想象当用户将有大约20个打开的标签时的情况,这整个事情变得很慢!此外,我们的应用程序非常重网格,所以对于网格我认为我们应该完全避免绑定。

我们正在考虑ng-view及其在每次激活时重新创建DOM的方式...这看起来有点过分,并且会迫使我们将所有UI状态放入视图模型中,即使是滚动条:)

您能否提出一些可能的方法来改善Angular和MDI的性能?也许我们甚至应该考虑使用其他一些ui-framework /工具集来实现相同的结果?

重要的是:

  • 模块化(AMD)
  • 依赖注入
  • 声明性绑定(我们喜欢角度和敲击如何解决这些问题)
  • MVVM / MVC
  • 创建同一控制器的多个实例的能力(例如,为网格中的每个特定项打开多个“详细信息”选项卡)

2 个答案:

答案 0 :(得分:1)

对于大型应用程序,AngularJS确实很重要,但只有在$scope内进行更改时才会如此。这段时间的大部分用于寻找dirty checking的修改。

如果将AngularJS应用程序保留在非活动选项卡中,则只能在外部事件(如WebSocket消息)之后进行脏检查。当标签为not focused时,您可以优化应用程序以删除这些监听器。

如果您遵循AngularJS的最佳实践,打开大量页面的性能问题应该不是问题。 AngularJS的更大性能问题在其范围内有大量数据,但在互联网上提出了很多解决方案。

答案 1 :(得分:1)

模块化 - Angular拥有自己的模块化规则/模式,如果你想要符合它们是好的,但是如果你想以不同的方式制作模块化的东西,例如......允许形式是自我的包含,以便它们的多个实例可以同时动态打开,这是非常困难的

依赖注入 - Angular允许你编写可以注入其他内容的代码,但是你不能注入Angular,这似乎是一个疏忽,你无法测试从Angulars中隔离的代码?

声明性绑定 - 是的,Angular将HTML中的文字与JS代码绑定的方式使得创建具有单个表单的多个并发实例的MDI变得非常困难。您确实需要使用自己的标识符(除了Angulars)动态创建表单实例,然后将您自己的标识符放在共享JS文件集的范围内(这是您想要的),然后是Angular的绑定如果继续使用Angular的绑定,将会妨碍每个实例 - 或者你可以尝试修改HTML动态获取Angular来刷新它的绑定。

基本上任何与MDI相关的事情都比使用Angular更难,而且值得关注此类项目的替代方案。