Question

我想知道在Extjs（特别是4.x）中为MVC应用程序布置文件夹结构时最正确的最佳实践。

周围有许多例子，但似乎没有普遍的共识。

总的来说，我看到很多结构如下：

http://www.slideshare.net/senchainc/structuring-your-sencha-touch-application

这种方法有点让我感到恐惧，因为视图，控制器，模型，商店等具有相同的文件名。（而不是AccountMode，AccountController，AccountView）只会导致混淆。我目前正在使用这种方法的项目，它真的很臭。我的工作效率已经下降，因为如果所有内容都具有相同的名称，我就不容易浏览代码。我花了5分钟盯着“帐户”文件，却意识到我正在盯着错误的“帐户”文件。

其次，在完成MVC超过10年后，我始终将视图和控制器紧密结合在一起。如果视图和控制器具有1对1的关系，那么它们将始终存在于同一文件夹中。这是一种更为面向对象的方法，因为包间（即文件夹）依赖性较小。文件夹应该在它们内部的类之间具有强大的相互依赖性，但是对其他文件夹中的类的依赖性较弱。

对于使用MVC的extjs文件夹结构，是否有最佳实践？

Answer 1

首先，我遇到了同样的问题。我有view/Configuration.js和store/Configuration.js以及model/Configuration.js和controller/Configuration.js。唯一的解决方案是给他们更好的名字：

view/ConfigView.js
store/ConfigStore.js
model/ConfigModel.js
controller/ConfigController.js

我知道名称的第二部分是多余的，但它帮助我总是知道我正在处理哪个文件。

但最佳做法？

由于ExtJS是由Sencha制作的，“最佳实践”通常是“Sencha所做的”。但他们在做什么？

在ExtJS框架中，他们不使用MVC，他们将所有内容都放入一个组件（视图）：模板，逻辑，错误修正等。但是，它不是一个应用程序，它是一个框架
在他们的KitchenSink示例中，他们不使用MVC，只使用View，Model和Store。但是，这不是一个企业应用程序，它是一组小例子。
有没有人见过Sencha构建的企业ExtJS应用程序的来源？我没有。

因此，作为最后的手段，我们来看看Sencha Cmd提供的示例应用程序。

在Cmd 6.0.1中，这是我使用的版本，示例应用程序是一个MVVM应用程序，命名“架构”如下：

Ext.define('{appName}.view.main.Main', {
    extend: 'Ext.tab.Panel',

Ext.define('{appName}.view.main.List', {
    extend: 'Ext.grid.Panel',

Ext.define('{appName}.view.main.MainController', {
    extend: 'Ext.app.ViewController',

Ext.define('{appName}.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',

Ext.define('{appName}.store.Personnel', {
    extend: 'Ext.data.Store',

因此，总结一下：它们没有提供文件名重复，视图控制器/视图模型位于view文件夹，而不是controllers文件夹。

不确定这是否是最佳做法，但至少我使用的方案与他们的示例应用程序并不矛盾。（请注意，示例应用程序不会让我们知道模型与存储和控制器与视图的文件名。）

更正extjs MVC的文件夹结构

1 个答案: