javascript - ExtJS MVC 约定、命名和行为

Question

最近 (2.x/3.x) 我只是使用 xtype 和工厂方法来接收一个类的实例，它非常简单和快速。现在我已经开始使用 4.x 和我的第一个 MVC 应用程序。如教程中所述，MVC 模式要求我为每个我不想使用的 View 扩展一个类，即使我只使用它一次。但是Sencha自己写的best practice说:

just extend for re-useability or adding of functionality

在我的例子中，我需要注册一大堆类，即使它们可以从一个基类创建，除了一些参数，比如 title, width,...

另一点是，Controller 会按照惯例覆盖任何 StoreId，并且还需要严格的类型，这意味着类名必须以 s 结尾。但据我所知，我不能保留 Controller 商店/模型数组中的模型和商店，所以这个约定还有其他要点吗，因为它似乎不保留打字。

下一点是，在从 3.X 合并到 4.X 之后，应用程序的初始加载时间已经延长，这似乎是由于需要定义许多新类或由于所有 Controller 都得到由于 MVC 模式的默认行为，在启动时实例化。有什么方法可以不自动实例化 Controller 而只是懒惰地执行它，例如当我在应用程序 Controller 上请求它时？

是的，我知道，这是一堆问题，但我想它们都围绕着同一个主题。

编辑

After some sourcecode-digging I am no longer sure about the requirement of the s when naming a store. I thought I stumbled over this while going through the MVC tutorial. Can anyone verify this?

编辑 2

我的结论

花边渲染非常简单。首先，ApplicationController Controller 数组中不应提及 Controller。要创建此类 Controller 的实例，请使用 ApplicationController.getController(pureClassName)[请注意，每个 Controller 都包含对名为 application 的 ApplicationController 的引用] 现在您需要了解 init(application)方法和 onLaunch(application) 方法不再由 ApplicationController 调用，您需要自己执行此操作。当调用 getController() 时，ApplicationController 首先查找内部引用缓存中是否已经存在该 Controller 的实例，否则它会创建一个实例并将 Controller 名称作为 Id 注入(inject)。所以 Controller 是一种非常好的单例。 Controller 本身为注册的商店、模型和 View 创建所有的 setter/getter ，这是一个猜测，它实例化它们(至少是商店)关于店铺的命名限制，没有以s结尾的限制。

Answer 1

这些都是非常有道理的观点。

首先，必须提到的是，您不必将 MVC 与 ExtJS 4 一起使用。您仍然可以在代码中使用 ExtJS 3 样式。

我假设如果您了解 MVC 的优势并决定采用它，那么是的 - 您将不得不扩展类并且有一些开销，但不可否认，您最终会得到更清晰、更可重用的代码。不得不说，虽然您需要扩展顶级 View ，但其中的项目仍然可以使用旧样式进行编码。除此之外，在 Controller 的 init() 中，您可以修改某些 View 配置(这允许更少的类扩展，但更多的 Controller 代码)。

我必须承认，如果您有使用 ExtJS 3 的经验并且正在迁移到 MVC 风格的应用程序，您最终会发现 yield 大于所涉及的工作。

就我个人而言，这是我第一次了解到这与商店有关的业务。所以我不能对此发表太多评论。

最后，一个正确编写的 ExtJs 4 应用程序，一个使用动态加载的应用程序应该比 ExtJS 3 应用程序加载得更快。您还可以编译仅包含应用程序中使用的代码的 Ext 版本。是的，您可以在需要时实例化 Controller (及其 View 和存储)，这很有魅力:

loadPage: function(aControllerName)
{
    // save recent page in a cookie
    Ext.util.Cookies.set('RecentPage', aControllerName);

    // Dynamically load the controller
    var iController = this.getController(aControllerName);

    // Manually initialise it
    iController.init();

    // Load the page (by getting the first view of the controller).
    var iPage = this.getView(iController.views[0]).create();

    // Add the page to the content panel.
    var iContentPanel = this.getContentPanel();

    iContentPanel.removeAll(true);

    iContentPanel.add(iPage);

    iContentPanel.doLayout();
}