extjs MVC 的正确文件夹结构答案

【问题标题】：Correct folder structure for extjs MVCextjs MVC 的正确文件夹结构
【发布时间】：2016-10-19 08:56:05
【问题描述】：

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

例子很多，但似乎没有普遍的共识。

总的来说，我见过很多这样结构的例子：

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

这种方法让我有些害怕，因为视图、控制器、模型、存储等具有相同的文件名。（而不是 AccountMode、AccountController、AccountView）只会导致混淆。我目前在一个使用这种方法的项目中，它真的很臭。我的工作效率下降了，因为如果所有内容都具有相同的名称，我就不容易浏览代码。我花了 5 分钟盯着一个“帐户”文件，却发现我在盯着错误的“帐户”文件。

其次，我从事 MVC 已有 10 多年了，我一直将我的视图和控制器放在一起。如果 View 和 Controller 具有 1 对 1 的关系，那么它们将始终一起存在于同一个文件夹中。这是一种更面向对象的方法，因为包间（即文件夹）依赖性较少。文件夹应该在它们内部的类之间有很强的相互依赖关系，但对其他文件夹中的类应该有弱的相互依赖关系。

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

【问题讨论】：

标签： model-view-controller extjs extjs4

【解决方案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 文件夹中。

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

【讨论】：