JBoss Seam (POJO without EJB) 后台 + ExtJS 前台完整例子（四）

1.引言

今天是一个有意义的日子，因为 Ext 2.0 最终版本刚刚发布。我要向Jack Slocum及其开发团队致敬，我也要利用这个机会，向整个ExtJS社区表示感谢。有人把ExtJS称为 “世界上最棒的AJAX开发平台”，我认为这个赞誉一点也不过分。ExtJS 让程序员们梦想成真，而且带来了全新的基于HTML/CSS/JavaScript的开发理念和方法。

本文从对JavaScript（以下简称JS)的重新认识开始，介绍本项目中与ExtJS相关的基础内容。

2.重新认识JS

我使用过很多年的JS，一直认为不能使用太多的JS，否则应用系统会变得很难开发和维护。问题的症结在于我和很多人一样，没有认识到JS实际上是十分动态的通用面向对象编程语言。

请看下面这段代码：


如果你看不懂上面的代码在干什么，那么下面的这段代码就能完成与其相同的功能：



这就是我们熟悉的创建对象的方式。实际上，以前，我们很少这样去使用JS。要用好ExtJS，首先应该
重新熟悉并掌握JS的面向对象编程(OOP)方法，并充分发挥其作为动态类型语言(Dynamically Typed Language)的优势。

有关这方面的更详细的资料，请参见下列文章和书籍：
（1）JS：世界上最被误解的语言
（2）OOP in JS
（3）Extending JS Objects and Classes
（4）《Pro JS Techniques》（本书作者John Resig是JQuery的创建者）
（5）《JavaScript: The Definitive Guide, 5th Edition》

3.JS类创建模式

在本项目中，你会到处看到类似下面这样的JS类创建模式：

对上面的代码说明如下：
（1）变量 win 演示了类的私有属性的用法。
（2）createWindow() 是私有方法，只能在类的内部被调用。
（3）init() 是公共方法，可以在类的外部被调用。
（4）在用户界面中，界面对象通常只有一个实例。Divo.app.Main 是典型的单例(Singleton）对象。
（5）Ext.onReady 可以保证在页面DOM构建好以后，再执行Divo.app.Main单例对象的init方法。

有关上述 JS类创建模式的详细阐述，请参见下列文章：
（1）JavaScript Class pattern
（2）How to achieve private, public, and privileged members in JavaScript
（3）Private Static Members in Javascript

有关用JS实现单例模式的详细介绍，请参见下列文章：
（1）Design Patterns in JavaScript - Singleton Design Pattern
（2）Creating a JavaScript Singleton object

5.JS文件的组织形式

使用ExtJS编程，客户端界面元素和行为，将全部用JS实现，因此会产生大量的JS代码。良好的JS文件组织形式，有助于生产出可维护的应用。

我推荐的JS文件组织形式，是基于命名空间(namespace)概念的。考虑到运行效率，命名空间的深度控制在两级。第一级命名空间名统一为Divo（你可以修改为自己的名字）, 第二级命名空间对应到系统模块，例如：Divo.app.Main 表示App模块的主控程序单例对象。

与命名空间规则对应，同一个模块的所有JS文件，应该存放在同一个目录中，一个JS文件代表一个类或一个单例对象。例如：

app\sample\main.js （主控程序）
app\sample\hotel-list.js （酒店列表）
app\sample\change-password-form.js （修改密码对话框）

6.JS编程风格和规范

保持编程风格一致性，并实施相应的编程规范，是团队开发的基本要求。我推荐下列基本的JS编程风格和规范:
（1）层叠样式表类名约定为小写，单词之间用“-”分隔。
（2）HTML标记中的ID属性值约定为小写，单词之间用“-”分隔。
（3）js/css/image 文件名约定为小写，单词之间用“-”分隔。
（4）JS 变量名约定以小写开头，多个单词情况下，首字母大写。
（5）JS 方法名约定以小写开头，多个单词情况下，首字母大写。
（6）使用下列习惯写法，使JS代码保持简洁：

var tb = []; //定义空数组
var obj = {}; //定义空对象

（7）为了提高JavaScript执行效率，应该避免过多的点操作符，例如：下列程序:

pTree.getSelectionModel().on('selectionchange', onProjectSelected,this, true);
pTree.getSelectionModel().on('beforeselect', onProjectSelect, this, true);

应该改为:

var selModel = pTree.getSelectionModel();
selModel.on('selectionchange', onProjectSelected,this, true);
selModel.on('beforeselect', onProjectSelect, this, true)

7. 结语

在开始用ExtJS开发前，程序员应该重新检查自己的JS语言掌握程度，补上动态的面向对象编程方面的基本知识。在以后的介绍中，将陆续展开讲解各个功能点上ExtJS的使用。

附：下面是本系列所有文章的完整列表：
（1）下载示例项目并安装运行
（2）建立Eclipse开发环境
（3）熟悉项目中与JSF相关内容
（4）重新认识JS
（5）ExtJS之表单(Form)
（6）ExtJS之布局(Layout)
（7）ExtJS之网格(Grid)
（8）Java后台和前台的通讯机制
（9）Seam框架简化Java开发
（10）分层架构设计
（11）安全性
（12）单元测试