Extjs4 ExtJS3代码体系结构：组织类文件并动态加载它们的最佳方法

我正在更新一个传统的web应用程序，其前端基于extjs3.x

目前，用户界面依赖于数千行的大文件，其中嵌套的匿名函数太多，每个文件封装在一个全局“Ext.onReady（）̀”中。它很难看，无法阅读，也无法维护

为了维护代码并使其现代化，我希望通过以下方式逐步对其进行重构：

使用名称空间

分解大文件：每个文件一个类（网格、存储、表单…）

以良好的目录结构组织类文件（app/module/grid | store |……）

在需要时动态加载类文件（可能使用Ext.Loader.load（）？）

如果可能的话（在下一步中），使用minifier优化加载

所有这些问题似乎都在ExtJS 4中解决了，它的类加载器、依赖系统（

require

）、

应用程序

单例及其结构文件夹约定

在ExtJS 3中，它似乎更混乱。所以：

• 在ExtJS3中，组织ExtJS4中“类似”的代码的最佳实践是什么
• 你有清楚的例子来说明这些问题吗

---

Ext3与4完全不同。代码组织实际上取决于开发人员。我个人会避免动态加载，而倾向于缩小整个应用程序。这就是ext4在生产应用程序中提供的功能。他们实际上只打算出于调试目的进行动态加载。我以前使用Ext3使用过动态加载/模块，这是一个遗憾。它可以与4与它内置到类系统

如果您使用的是更高版本的3，请使用Ext.define执行名称空间。它将在内部为您执行Ext.ns，并使升级到4变得更容易

您不应该有大文件或配置对象，这是正确的，但也不要太过火。试着把事情分成逻辑类。网格可以是类的一部分，该类包含作为视图有意义的其他组件

如果您确实想在以后升级到4，我建议您至少尝试在存储和视图中模拟一下该结构。3实际上没有强加任何结构

我会用3避免动态加载。见上文

绝对缩小。通过网络传输的数据不仅会少得多，而且通过消除每个脚本的get的所有开销，您还可以获得巨大的节约。Gzip可能也有点帮助

---

好的，谢谢你有用的回复。第2点似乎是一个好方法，但将“视图”组件（网格、表单、工具栏等）与有组织的“监听器”类（即ExtJS4中的控制器）分开对我来说有点困惑。关于这一点的另一个想法是，因为在3中没有控制器，所以我所说的视图将包括通常在控制器中的逻辑。只要付出足够的努力或涉及到另一个框架，您就可以得到这种类型的分离，但由于您只是在重构，我会像以前一样将其作为类的一部分。