我应该如何延迟加载ExtJS MVC控制器、视图、存储和模型

How should I lazy-load Ext JS MVC controllers, views, store, and models?

本文关键字：视图 存储 模型 控制器 MVC 延迟加载 ExtJS 我应该      更新时间：2023-09-26

我们使用ExtJS MVC作为插件/主机架构的前端技术，其中存在一个主机，并且可以通过xcopy轻松安装多个插件。每个插件都有一个ExtJS应用程序，每个插件都在页面加载时注册自己。整个应用程序是一个单页应用程序(SPA(。

我们现在遇到的主要问题是，我们安装了10多个插件，每个插件至少有10个控制器，以及50多个视图、商店和模型。因此，当我们刷新页面(F5(时，我们应该坐下来等待大约30秒，以便接近200个HTTP请求到达服务器，并返回接近3兆字节的响应。

虽然已经应用了缓存，但这根本不可取。甚至不是第一次。我想即使是一个外行也会接受这样的论点，即要想得到一些牛奶，你不应该等到农场、奶牛、谷仓、房子、道路、电力、河流等建成。

这个问题的确切答案必须是控制器、视图、存储和模型的延迟加载。然而，我们不清楚我们必须做些什么才能做到这一点，而且我们在网上也找不到一个好的、适用的答案。大多数讨论只是关于延迟加载的要求，但他们没有提到如何。例如，看看这个链接：

http://www.sencha.com/forum/showthread.php?130449-大型单页架构-ExtJS-4.0

或者这个：

http://www.sencha.com/forum/archive/index.php/t-156694.html?s=aaeec1ce30acbc9cbd2615afadec982f

如果我们使用Ext.require方法，那么我们只将控制器加载为简单的JavaScript文件，它们不会进入它们的层次结构来加载它们的存储、视图和模型。我们已经对此进行了测试。

另一方面，我们在ExtJS上找不到getController()和ControllerManager。似乎他们已经在ExtJS 4.1.3上消失了。

关于如何根据URL参数动态加载控制器的任何想法(我们可能需要一个路由引擎来解析URL并动态加载控制器(。即使是一篇有充分文档记录的文章或带有代码示例的论坛讨论也可以帮助我们。

对于您的问题，您应该在菜单点击等事件上加载控制器文件。使用外部要求。之后，你应该初始化你的控制器。

我阅读了ExtJs的源代码，并在下面实现了一个自定义的惰性负载控制器。

// this should run first time your application start
Ext.application({
    name: 'AppName',
    appProperty: 'appProp'
});
// below lines should run when you want to load controllers
// (for ex on menuitemclick)
var controllers = ['yourController', 'anotherController'];
Ext.require(controllers, function () {
    for (i = 0; i < controllers.length; i++) {
        var controllerName = controllers[i].substr(controllers[i].lastIndexOf(".") + 1);
        if (!AppName.appProp.controllers.get(controllerName)) {
            var controller = Ext.create(controllers[i], {
                application: AppName.appProp,
                id: controllerName
            });
            controller.init(AppName.appProp);
        }
    }
});

您尝试过Ext.create((吗？

http://docs.sencha.com/extjs/4.2.0/#/api/Ext方法创建

这个方法将动态加载.js文件，看起来效果很好。然而，似乎应该有一种更清洁的方法来做到这一点。

至少在4.2.0中，这是可用的。从构建应用程序教程。。。

在较大的应用程序中，您可能希望在运行时加载其他控制器。您可以使用getController方法来完成此操作。在运行时加载其他控制器时，必须记住手动调用加载的控制器上的init方法。

someAction: function() {
  var controller = this.getController('AnotherController');
  // Remember to call the init method manually
  controller.init();
}

以下是指向Ext.app.Application的此功能的文档的链接。

相关文章：