ExtJS和AngularJS比较

• 语言: 中文（简体）
• 格式: .pdf
• 来源: files-cdn.cnblogs.com

摘要

文档详细比较了ExtJS和AngularJS两种企业级富UI设计框架，从架构、组件、测试、性能、路由、SEO、移动解决方案等多个方面进行了分析。ExtJS基于组件，具有强大的UI组件库，适合需要快速开发和浏览器兼容性的企业级应用，而AngularJS则是基于HTML的声明式编程框架，适合需要响应式设计和第三方组件集成的场景。此外，性能测试显示ExtJS比AngularJS慢3倍。两种框架在设计模式和生态系统上也有显著差异。

AI总结

### 《ExtJS和AngularJS比较》总结

#### 结论：ExtJS比AngularJS慢3倍
通过性能测试表明，ExtJS的性能较AngularJS慢3倍。测试中，ExtJS使用ext-all.js，而AngularJS使用了多个第三方组件（如angular-charts、ng-grid、angular-treeview等），所有数据请求均来自同一服务器。

---

### 两种框架的使用环境
1. **使用ExtJS的场景：**
- 需要强大的UI组件（如表格、树、表单、绘图）以节约开发时间。
- 关注浏览器兼容性问题，不希望团队花费时间调试CSS和解决兼容性问题。
- 需要专门的许可或支持。
- 开发桌面和移动应用时希望分开实现。
- 愿意支付支持费用。

2. **使用AngularJS的场景：**
- 需要更小的包体积。
- 需要响应式设计。
- 需要自动化测试支持。
- 需要集成第三方组件。
- 团队具备调试CSS和解决第三方组件问题的能力。

---

### 架构的不同
两种框架在架构上存在显著差异：
- **ExtJS：** 基于组件，遵循面向对象的设计思想和MVC/MVVM模式，代码通过扩展类、配置模型，将组件添加到容器或布局中，少直接操作DOM。
- **AngularJS：** 声明式编程，在HTML标签中添加指令，通过模板和路由配置视图，基于HTML结构操作DOM。

---

### 其他对比要点
1. **路由：**
- ExtJS 5支持路由，通过浏览器历史堆栈实现状态跟踪，支持深度链接、收藏夹和前进/后退导航。
- AngularJS通过路由将控制器、视图模板和URL关联，同样支持深度链接和浏览器历史功能。

2. **测试：**
- ExtJS依赖第三方测试框架（如Siesta、Jasmine、Mocha），自身不包含测试工具。
- AngularJS设计时考虑了可测试性，自带Karma测试工具，并支持Protractor进行端到端测试。

3. **数据绑定：**
- ExtJS 5通过绑定配置实现，早期版本需手动加载Store。
- AngularJS基于原型继承树的嵌套模型实现双向数据绑定，但当模板中绑定数量较大（如2000-3000个）时，性能会下降，需使用Bindonce等方法优化。

4. **SEO：**
- 对于单页应用，SEO通常不是核心需求。如需支持，可通过Prerender.io或生成静态内容实现。
- ExtJS支持Hashbang URLs，AngularJS可通过Prerender.io实现SEO。

5. **移动解决方案：**
- ExtJS：使用Sencha Touch开发移动应用，适合独立的移动站点或混合应用（集成Cordova/Phonegap）。
- AngularJS：适合响应式Web应用，混合应用可通过Ionic框架、Trigger.io或Cordova实现。

6. **DOM算法：**
- ExtJS：深度优先、自底向上。
- AngularJS：指令使用深度优先、自底向上算法，控制器则自上而下。

7. **脏检查：**
- ExtJS：通过Store实现脏检查，支持延迟更新。
- AngularJS：通过Digest Cycle实现脏检查，自动触发UI更新，但需手动调用$apply方法处理第三方API数据。

---

### 总结
- **ExtJS：**
- 优点：功能强大、组件丰富、浏览器兼容性好、支持MVC/MVVM模式。
- 缺点：包体积较大、DOM操作复杂，性能较慢。

- **AngularJS：**
- 优点：轻量级、响应式设计、自动化测试支持、开源且免费。
- 缺点：第三方组件依赖较多，对浏览器兼容性（如IE8）支持较弱，处理大规模数据绑定时性能下降。

两种框架各有侧重，选择需根据项目需求、团队能力和性能要求综合考虑。