ExtJS MVC约定,命名和行为

时间:2012-02-28 07:36:11

标签: javascript model-view-controller extjs extjs4 extjs-mvc

最近(2.x / 3.x)我刚刚使用了xtype&用于接收类的实例的工厂方法,其速度简单快。现在我已经启动了4.x和我的第一个使用MVC的App。正如教程中所描述的那样,MVC模式要求我为每个我不想使用的视图扩展一个类,即使我只使用它一次。但Sencha自己写的最佳做法是:

  

只是扩展了可重用性或添加功能

在我的情况下,我需要注册一大堆类,即使它们可以从一个基类创建,除了title, width,...

之类的一些参数

另一点是Controller按惯例覆盖任何StoreId,并且还需要严格键入,这意味着类名必须以s结束。但据我所知,我不能在控制器存储/模型数组中保留模型和存储,因此这个约定还有其他任何一点,因为它似乎不会节省打字。

接下来的一点是,在从3.X合并到4.X之后,应用程序初始加载时间已经延长,这似乎是由于需要定义的许多新类或由于所有控制器都获得的事实而导致的由于MVC模式的默认行为而在启动时实例化。有没有办法不自动实例化一个控制器而只是懒惰,例如当我在应用程序控制器上请求它时?

是的,我知道,这是一堆问题,但我猜他们都围绕同一个主题。

修改

  

经过一些源代码挖掘后,我不再确定了   命名商店时s的要求。我以为我偶然发现了   这是在通过MVC教程时。任何人都可以验证这个吗?

编辑2

我的结论

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

2 个答案:

答案 0 :(得分:2)

这些是非常有效的观点。

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

我认为如果你了解MVC的优点并决定适应它,那么是 - 你将不得不扩展类并且有一些开销,但不可否认,你最终会得到一个更干净,更可重用的代码。必须要说的是,当您需要扩展顶级视图时,其中的项仍然可以编码为旧样式。除此之外,在控制器的init()中,您可以修改某些视图配置(允许更少的类扩展,但更多的控制器代码)。

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

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

最后,正确编写的ExtJs 4应用程序(使用动态加载的应用程序)应该比ExtJS 3应用程序加载速度更快。您还可以编译仅包含应用程序中使用的代码的Ext版本。是的,您可以在需要时实例化控制器(以及它们的视图和存储),它就像一个魅力:

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

答案 1 :(得分:1)

1.Izhaki很好地回答了关于延迟控制器初始化的问题。

2.我并没有真正关注你对商店名称的抱怨。商店名称没有限制。它们仅仅是命名约定的建议。

3. Ext.define方法非常适合定义类 - 类似于Java或其他OO语言。但这不是必需的,您只需使用Ext.create方法创建框架组件的实例并将其传递给自定义配置对象。 您还可以使用Ext.define创建基类,然后调用Ext.create('MyBaseClass',{title:'mynew tile'});以获得基类的略微修改版本。

我建议您阅读MVCClass system上的Sencha指南,并查看他们的示例,以便更好地理解。