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 代码
- var obj = {
- val: 5,
- click: function(){alert( "hello" );}
- };
如果你看不懂上面的代码在干什么,那么下面的这段代码就能完成与其相同的功能:
js 代码
- var obj = new Object();
- obj.val = 5;
- obj.click = function(){alert( "hello" );};
这就是我们熟悉的创建对象的方式。实际上,以前,我们很少这样去使用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类创建模式:
js 代码
- Divo.app.Main = function()
- {
- /* --------- private变量 --------- */
- var win;
- /* --------- private方法 --------- */
- function createWindow() {
- if (win) return; //防止重复创建
- win = new Ext.Window(... //创建窗口
- }
- /* --------- public方法 JS--------- */
- return {
- init : function() {
- createWindow();
- win.show(); //显示窗口
- }
- }; //return
- }();
- Ext.onReady(Divo.app.Main.init, Divo.app.Main, true);
对上面的代码说明如下:
(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) 单元测试