architecture - 在 ExtJs 中分离 Controller 和 View

Question

我正在研究 ExtJs 并试图找到组织我 future 项目的最佳方式。我从 ExtJs MVC 教程开始http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

在这个架构中有一些我不喜欢的地方: Controller “知道” View 小部件并以这种方式添加事件监听器

this.control({
            'viewport > userlist':{
                itemdblclick:this.editUser
            },
            'useredit button[action=save]':{
                click:this.updateUser
            }
        });

我们正在启动一个包含 500 多个表单的大型项目。我相信在如此大的项目中，这种方法会造成一团糟。有没有办法解耦 Controller 和 View ？

例如，在 GWT 中，他们使用 MVP 模式，其中 Presenter 不知道 View 的内部结构并通过“显示”界面与 View 进行交互。我知道，Javascript 没有接口(interface)，但可能有一些方法可以在 Extjs 中模拟它们。

我希望我的 Controller 是这样的:

editButton = viewInterface.getEditButton();
editButton.on('click', function(btn, e, eOpts) {
    eventBus.fireEvent(editUserEvent);
});

这可能吗？

Answer 1

绝对有可能。在您的 View 中创建一个方法 getEditButton 并返回您想要的任何内容。这不是问题。

然而，我的 2c 用于解耦 View 和 Controller 。我目前也在做一个相当大的项目。可能没有您的那么大，但我们将拥有大约 100 多个 View / Controller 。

我尝试使用两个主要的经验法则来构建这个项目:

1. 如果我有一些通用逻辑，无论是在 View 中还是在 Controller 中，我都会创建基类并将此逻辑移到那里。所以稍后 - 我只是扩展它以便 subview / Controller 获得相同的功能。

2. 我将与应用程序业务逻辑无关的代码留在 View 类中 - 例如，如果我有一个网格并且需要添加特殊代码来选择网格中的所有记录，或者显示记录数和状态栏内网格中选定记录的数量 - 此代码转到 View 类。所以 Controller 不知道这些“简单”的任务，只关注应用程序的业务逻辑。