javascript - 我应该如何延迟加载 Ext JS MVC Controller 、 View 、存储和模型？

Question

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

我们现在遇到的主要问题是，我们安装了 10 多个插件，每个插件至少有 10 个 Controller ，以及 50 多个 View 、存储和模型。因此，当我们刷新页面 (F5) 时，我们应该等待将近 30 秒，以便大约 200 个 HTTP 请求到达服务器，并返回大约 3 MB 的响应。

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

这个问题的明确答案必须是 Controller 、 View 、存储和模型的延迟加载。然而，我们并不清楚我们必须做什么才能做到这一点，而且我们无法在网络上找到一个好的、适用的答案。大多数讨论只是关于延迟加载的要求，但他们没有提到如何。例如看这个链接:

http://www.sencha.com/forum/showthread.php?130449-Large-Single-Page-Architecture-in-ExtJS-4.0

或者这个:

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

如果我们使用 Ext.require 方法，那么我们只加载我们的 Controller 作为简单的 JavaScript 文件，它们不会进入它们的层次结构来加载它们的商店、 View 和模型。我们已经对此进行了测试。

另一方面，我们在 Ext JS 上找不到 getController() 和 ControllerManager。似乎他们已经离开了 Ext JS 4.1.3。

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

Answer 1

对于您的问题，您应该在菜单点击等事件上加载 Controller 文件。与 Ext.require。在你这样做之后你应该初始化你的 Controller 。

我阅读了 ExtJs 源代码并在下面实现了自定义延迟加载 Controller 。

// 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);
        }
    }
});