Appendix_Ext JS 4 Cookbook_Exploring Further.pdf

### 极致探索：Ext JS 4框架应用结构与最佳实践 #### 概述 《Ext JS 4 Cookbook—进一步探索》提供了额外20个有用的技巧和建议，旨在帮助开发者更好地掌握Sencha的Ext JS 4框架。这些额外的内容遵循了书中相同的格式，覆盖了广泛的议题，有助于拓宽读者对该框架的认识。 本章节主要介绍了如何创建应用程序的目录结构，并根据不同的开发模式（即模型-视图-控制器（MVC）模式和非MVC模式）给出了具体的指导。此外，还提供了一些实用的步骤来帮助开发者构建一个组织良好、易于维护的应用程序，并利用Ext JS SDK工具轻松地创建和部署优化后的应用程序。 #### 创建应用程序目录结构 为了确保应用程序结构清晰、便于维护并能够方便地在不同项目间共享组件，本书推荐采用以下两种目录结构： 1. **非MVC模式** - enhancementLog - app - enhancement - EnhancementGrid.js - app.js - extjs - resources - css - images - index.html 2. **MVC模式** - enhancementLog - app - controller - Enhancement.js - model - Enhancement.js - store - Enhancement.js - view - enhancement - Enhancement.js - app.js - extjs - resources - css - images - index.html #### 准备工作 为了顺利进行开发，建议在开发计算机上安装并运行Web服务器（如Apache或IIS）。 #### 如何操作 1. **非MVC模式** 如果不采用MVC模式，则可以使用上面给出的非MVC模式的目录结构。此结构将所有的业务逻辑、视图和控制器代码都放在`app`文件夹下，并且所有相关的资源文件（如CSS和图像）都放在`resources`文件夹下。 2. **MVC模式** 若采用MVC模式，则应该使用上面给出的MVC模式的目录结构。在此结构中，将控制器、模型和存储库代码分别放在`controller`、`model`和`store`文件夹下。这有助于更好地组织代码，并遵循MVC设计模式的原则。 #### 实现原理 - **enhancementLog** 文件夹用于存放应用程序的所有文件。 - **app** 文件夹包含了应用程序的类（按照各自的分组放在子文件夹中），并遵循命名约定，详情请参阅后面的“更多信息”部分。 - **extjs** 文件夹包含了Ext JS框架及其关联文件。 - **resources** 文件夹是为应用程序所需的图片、附加CSS和其他静态资源准备的。 - **index.html** 是应用程序的入口点。 #### 更多信息 - 在MVC模式下，每个逻辑组件（控制器、模型、存储库和视图）都有自己的目录结构，这样可以帮助开发者更好地分离关注点，并使代码更易于管理和维护。 - 对于非MVC模式，尽管所有的业务逻辑和视图都放在同一个目录下，但仍然可以通过良好的命名约定和文件结构来保持代码的清晰度。 - 使用Ext JS SDK工具可以在发布前对应用程序进行优化，例如压缩代码和合并文件，从而提高应用程序的性能。 #### 结论 通过遵循上述指南，开发者不仅可以构建出结构良好、易于维护的应用程序，还能利用Ext JS SDK工具轻松创建和部署优化后的应用程序。无论采用MVC模式还是非MVC模式，这些指导原则都将极大地提升开发效率和项目的可维护性。