书评和采访：ExtJS in Action

Jesus Garcia 编写的《 ExtJS in Action 》是一本介绍跨浏览器 JavaScript 库 ExtJS 的书，ExtJS 用于构建富互联网应用（Rich Internet Application）。ExtJS 包含大量的组件、可扩展的组件模型，提供了易用的 API 来构建针对基于 JavaScript 的 Web 应用的完整、稳定的平台。

本书作者在 IT 和企业 web 应用开发领域拥有超过 16 年的经验。他在数个大公司部署过基于 ExtJS 的应用，如万豪国际、洛克希德马丁、摩根大通和美国金融监管局。业余时间，Jay 喜欢帮助 ExtJS 社区，他是 ExtJS 非官方雇员中最活跃的发帖者之一（超过 13000 个帖子）。

本书包括如下内容：

• 使用核心组件如布局面板构建动态 UI
• 创建动态表单，提交数据无需页面刷新
• 使用树状组件、菜单和工具栏的有用组件
• 创建定制的复合组件
• 全面解析 Ext JS 3.0

读者会了解 ExtJS 组件模型和布局，学习核心组件如 Container 类在构建复杂用户界面时作为构建模块的运行机制。本书覆盖了 ExtJS 常用类、AJAX、Observable (ExtJS 事件模型 l)、DOM 辅助类和辅助函数，并介绍了如何使用 JavaScript Object Notation (JSON)。它还探讨了定制或者扩展 ExtJS 组件的可行办法。

本书的出版商 Manning 为 InfoQ 读者提供了第三章试读《组件模型和生命周期》。

InfoQ 采访了本书作者：

InfoQ：Hi Jesus，能否介绍一下自己，以及编写这本有关 ExtJS书籍的初衷？

Jesus：我从 2006 年初就开始使用 ExtJS，当时它只是 YUI 库的一个扩展集。那时，它被称为“YUI-ext”，由一个名为 Jack Solcum 的家伙作为边缘项目开发。像许多刚接触该框架的新人一样，我最初被数据网格吸引。真正让我倾心该库的是文档，可能是最好最新的 Ajax 框架 API。

在我接触该框架不久，我决定成为一名专家，专注我的事业，成为一名独立咨询顾问。做出决定之后，我开始活跃于早期社区，花费大量时间在帮助社区上，回答人们的提问解决他们的问题。通过这种方式，我学到了比只是应用开发更多的有关框架的知识。直到现在，通过帮助别人来回馈社区仍然是我学习大量知识的一种方式。

活跃于 ExtJS 社区使我赢得了一些声誉，因此被来自 Manning 的 Michael Stephens 看中。他联系我，还有其他活跃的社区成员，来审阅一本书的提案。在阅读了提案内容表格的前几行之后，我就意识到这本书不是“Ext JS in Action”。在提交了我的想法和推荐的目录之后，Michael 举行了一个审查会议，在那里他问我是否愿意提交一个自己的目录，然后我就提交了。然后两年之后，现在我们有了这本书。

InfoQ：什么是 ExtJS，它想解决什么问题？

Jesus：Ext JS 是一个针对 Web 的 UI 库。它是市场上的轻量级工具，因为它通过抽象，支持开发人员不必强制编写 HTML 的源代码，而且允许开发人员灵活地扩展组件库或者通过简单强大的插件架构创建真实的插件。

Ext JS 解决了管理 HTML 和 CSS 的问题，提供了媲美桌面应用的 UI 外观。它支持开发人员在现有 HTML 网页中注入组件或者开发富企业级 RIA，其中一些应用于关键任务应用，如实时监控和网络基础设施的管理。

框架也包含许多实用工具，如数据存储、模板和 xTypes，进一步提高了应用开发能力。

InfoQ**：在书中，你提到 Ext JS遵循的组件和容器模型是它比其他 Ajax库与众不同的主要原因，你能详细说说吗？**

Jesus：组件和容器模型（还有其他特点）使 Ext JS 在其他同类 Ajax 库中别具一格，因为它们使库的 UI 部分结构化。没有它，Ext JS 不会这么与众不同。

组件模型为框架引入了“组件生命周期”，为组件带来了一套定义良好和可靠的行为。它分为三个阶段，初始化（Initialization）、渲染（Render）和销毁（Destruction）。初始化指组件新实例的初始化时刻。渲染阶段指组件被渲染或者绘制到屏幕上的时候。最后，销毁阶段支持组件执行清理任务，如所有注入的 HTML 节点的删除和清除事件监听器。

容器模型支持组件通过父子关系模式来管理其他模型。通过容器模型，开发人员可以轻松地创建动态 UI——利用它的 add() 或者 remove() 来添加或者删除一个或几个子元素。为了管理子元素的视觉组织，容器使用了布局（Layout）。

InfoQ**：你能透漏一下工作中如何使用 Ext JS吗？你了解其他人如何使用它吗？是否存在 RIA应用不适合采用 Ext JS****？Ext JS适合移动 web应用吗？**

Jesus：我通常使用 Ext JS 为许多客户开发应用。我最近一个任务是为客户开发界面管理成员信息。因为 Ext JS 功能齐全，所以我可以利用它开发各种应用，比如定制 UI 从 IBM 的 Tivoli Enterprise Console 和 HP Universal CMDB 中合并数据、为 EMC 的 Documentum 产品开发前端界面。我已经开发了几个应用来帮助公司制定考试内容。

开发人员可以充分利用 Ext JS 来开发 RIA 中所需的功能。这几年，我已经看到了各种各样的应用，大部分是基于业务的。

Ext JS 本身不是为移动 web 应用而定制的，但是它的兄弟 Sencha Touch 是。我已经看到并且实验了在 iPad 上运行有限功能的 Ext JS 应用。它不支持触摸功能，而且 UI 主题不是以移动为中心的。

InfoQ**：Ext JS在各种浏览器平台上的运行情况如何？你想对那些由于当前的兼容性问题或者害怕因未来升级失去兼容性而惧怕使用 Ext JS的朋友说些什么？**

Jesus：这可是个老问题了。我想说 Ext JS 在最好的环境中运行最好。一般来讲，Ext JS 在基于 Webkit 的浏览器中运行最好，在 IE 中最差。当然，浏览器还要更加努力解决这些问题，但是在 Ext JS 3.0 的最初版本中存在一些代码问题导致 IE 的缓慢性能。

众所周知，Ext JS 3.0 的最初版本的性能比 2.X 差得多，但是在后续版本中好得多。Ext JS 团队非常重视来自于客户和社区成员的反馈，并采取必要修改在不限制功能的情况下获得更好的性能。

我也提到框架的性能需要开发人员配合做大量的工作。 初级开发人员往往易犯简单错误，如所谓的“overnesting”。这种情况是指不必要的通过父组件包装子组件，并且为 UI 添加了不必要的层。另一个常见错误是加载数以千计的记录到视图中（GridPanel、DataView、ListView 或者 ComboBox），导致屏幕中出现“JavaScript is running too long”消息。

从 2.x 升级到 3.x 非常简单，在 3.x 不同版本中升级也是如此。以我的经验来说，大家遇到的大部分升级问题是他们存在代码依赖、使用或者重载了私有方法，这些方法标记为私有是有原因的。显然，这种做法不值得推荐给团队甚至资深的开发人员，你应该做些工作使升级更容易。

InfoQ**：对于开发 Ext JS应用，你喜欢哪种过程？你使用哪些工具？你觉得现在的 JavaScript/HTML工具好用吗？**

Jesus：通常我在笔记本电脑上开发应用，这样可以尽可能快地收到反馈。我遵循框架模式来开发应用。例如，我喜欢根据类的命名空间在文件系统（和项目）中安排文件。这种做法能够快速访问文件。同样的模式适用于插件、用户扩展（ux）或者应用于框架的重载。

开发 JavaScript 代码有一些优秀的工具，但是我最喜欢使用 Jetbrains’ Intellij IDEA 开发应用。虽然它的运行速度不是最快的，但是我爱上了它。它支持比如动态代码补足和重构类成员等，还有自己的 JavaScript 调试器，虽然我一般不用它。

我听过开发人员喜欢使用 NetBeans 甚至 Aptana（包装了 Eclipse）。

InfoQ:使用大型的客户端框架如 Ext JS会导致调试时有困难吗？代码遇到问题时，你如何调试？

Jesus：困难有很多原因。首先，开发人员使用 ext-all.js（框架的精简版）而不是 ext-all-debug.js （保留了空格，删除了注释）。如果异常被 JS 解释器抛出，异常消息因为 JS 的简化通常晦涩难懂。如果在 IE 中查看错误，一般看不出任何意义，增加了难度。通常，为了解决问题，可以使用解压缩的 ext-all-debug.js 来开发应用，这会使错误消息好懂些，至少可以找到异常抛出的准确行数。

一旦 ext-all-debug.js 抛出异常，我通常会查看异常发生的位置，从中找到异常对应的方法，然后找到该方法归属的类。绝大多数情况下，都是些低级错误。

因为我使用 WebKit，所以查看 ext-all-debug.js 文件成百上千的 JS 代码轻而易举。可悲的是，Firefox 的当前版本妨碍了 Firebug 达到同样的性能水平，因此几个月之前我从 Firefox 转移到了 WebKit。我也在 IE8 中尝试过，但是结果让我很崩溃。

InfoQ：在工作中使用功能测试方法吗？感觉如何？

Jesus：答案是没有。我曾经想在客户的应用开发周期中加入单元测试，但时间是个问题。花费在编写测试的时间可以节省未来修补缺陷的更多时间，但是做出初始投资对客户很困难。

InfoQ：在书中，你描述了使用 Ext JS时框架之外的若干组件，易于扩展吗？易于创建新组件吗？

Jesus：我觉得易于扩展框架，因为我从 2006 年就开始使用它了。开发 Ext JS 的时候就被设计为可扩展的，存在针对它编写的插件，而且采用了一些最佳的 JavaScript 开发模式。

扩展组件的难度水平与开发人员对 Object Oriented JavaScript 模式和框架的经验有关。你必须熟悉 OOJS（原型继承）才能够扩展组件。毕竟，如果你不理解原型继承，在 JavaScript 内扩展的概念会比较生疏。还需要能够理解例如执行上下文概念和关键字“this”的使用方法。

同样，你应该熟悉 Component、Container 和布局模式来正确的扩展组件同时避免例如 overnesting 的常见错误。熟悉框架的其他部分也有帮助。

我写这本书主要是因为看到很多初识框架的开发人员想要构建复杂的应用。然而，他们发现在完成简单任务时就磕磕绊绊，这都是因为没有必要的基础知识来完全理解和使用框架。

对于想提高 JavaScript 速度的人来说，我推荐 Dustin Diaz 的《Pro JavaScript Techniques》（Apress）。这本书会详述现代 JavaScript 编程，是你充分了解一些高级代码。

InfoQ**：随着 HTML5的出现，你认为 Ext JS会如何发展？**

Jesus：Sencha 团队的一个优点是向前看。他们努力使 4.0 兼容 HTML5 和 CSS3。Ext JS 4.0 与 Sencha Touch 共用同一个代码库，而 Sencha Touch 已经对这些技术有大量的支持。

InfoQ**：你觉得本书对于那些初识 Ext JS的人和想在 Ext JS开发中更进一步的人有哪些帮助？**

Jesus：对于 Ext JS 的新手来说，我认为深入理解 Component、Container 和 Layout 模型非常有用。我尽可能清晰地讲解这些内容，并从读者中得到了好评。

对于老手来说，我认为本书最有价值的部分是后三章（15-17）。第 15 章介绍了创建 Ext JS 扩展的基本知识，并使用现实例子开发插件。最后两章构建了一个虚构应用，使读者了解核心的决策过程，如安排命名空间和开发抽象来减少冗余代码。

不同经验水平的开发人员在阅读完本书之后都给予了积极的反馈，他们表示其中一些概念在不同的方面提供了帮助。

你可以在 InfoQ 找到更多有关 ** JavaScript 和 Rich Internet Applications **的内容。

查看英文原文： Book Excerpt and Interview: ExtJS in Action

给 InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家加入到 InfoQ 中文站用户讨论组中与我们的编辑和其他读者朋友交流。