我们使用 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 )。即使是有据可查的文章或带有代码示例的论坛讨论也可以帮助我们。
最佳答案
对于您的问题,您应该在菜单点击等事件上加载 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);
}
}
});
关于javascript - 我应该如何延迟加载 Ext JS MVC Controller 、 View 、存储和模型?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15065629/