extjs4 - ExtJS 3 代码架构：组织类文件并动态加载它们的最佳方式

Question

我正在对遗留 Web 应用程序进行现代化改造，其前端基于ExtJS 3.x。

目前，用户界面依赖于数千行的大文件，嵌套的匿名函数太多，每个文件都封装在一个全局的`Ext.onReady()̀中。它丑陋，不可读且不可维护。

为了维护代码并使其现代化，我想通过以下方式逐步重构它：

1. 使用命名空间
2. 爆炸大文件：每个文件一个类（网格，存储，表格......）
3. 以良好的目录结构组织类文件（app/module/grid|store|...）
4. 动态加载类文件（可能使用 Ext.Loader.load() ？）
5. 如果可能的话（在下一步中），使用 minifier优化加载，作为资产。

所有这些问题似乎都在 ExtJS 4 中原生解决了，它的类加载器、它的依赖系统 ( require)、它的ApplicationSingleton 和它的结构文件夹约定......

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

• extjs 3 在 extjs 4 中“像”组织代码的最佳实践是什么？
• 你有清楚的例子说明这些问题吗？

Answer 1

Ext3 与 4 完全不同。代码组织实际上取决于开发人员。我个人会避免动态加载以支持缩小整个应用程序。这就是 ext4 在生产应用程序中为您提供的。他们实际上只是为了调试目的而打算动态加载。我以前用 Ext3 走过动态加载/模块路线，很遗憾。可以将 4 内置到班级系统中。

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

2. 你是正确的，你不应该有大文件或配置对象，但不要太过分。尝试将事物分组到逻辑类中。网格可以是包含其他作为视图有意义的组件的类的一部分。

3. 如果您确实想稍后升级到 4，我建议您尝试至少在商店和视图上稍微模拟一下结构。3 并没有真正强加任何结构。

4. 我会避免使用 3 进行动态加载。见上文。

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