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

Question

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

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

我的结论

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

Answer 1

这些都是非常有效的观点。

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

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

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

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

最后，一个正确编写的 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();
}