用AJAX开发智能Web应用程序之高级篇
来源:网络 更新时间:2014-12-2
一、引言
在第一部分中,我们讨论了AJAX基础——建立从脚本到服务器的通讯的能力,这正是使HTML页面具有动态能力的原因所在。然而,这就意味着我们已准备好抛弃我们自己版本的Yahoo邮件吗?不,还没有。原因在于:AJAX是一个混合的祝福。一方面,它使我们能够在Web上创建丰富的桌面级的应用程序;另一方面,如果我们把"翻页面式"的Web应用程序与客户端/服务器或Swing版本的程序进行比较,那么会看到其开发实践并不很相同。我们将需要习惯于这样的事实:构建一个丰富的UI需要时间。须知,允许用户实现更大的灵活性也就相应地需要付出更多的时间为代价。
最后的答案当然要依赖于大量的组件库、框架以及具有工业力量的开发工具。且不考虑工具,本文集中于讨论在今天对于AJAX热心者有哪些技术是可用的。在强调需要构建可重用的商业组件的同时,本文将重点分析"隐含的"JavaScript中的面向对象的力量。另外,在强调需要构建定制的UI组件的同时,本文将介绍一个简便的方法——用定制的客户端HTML标签来封装描述逻辑。
二、AJAX语言——对象面向的JavaScript
由定义来看,JavaScript是典型的AJAX语言。不同于Java,JavaScript并不强调OO风格的编码。然而,令人吃惊的是JavaScript居然全面支持所有的OO语言的主要属性:封装、继承和多态性。DouglasCrockford甚至称JavaScript是"世界上最易被误解的编程语言"。让我们回顾一下JavaScript的面向对象的地方吧。
数据类型
在Java中,一个类定义了一个数据和它的相关行为的组合。尽管JavaScript保留了class关键字,但是它不支持与常规OOP语言一样的语义。
这听起来可能觉得奇怪,但是在JavaScript中,对象是用函数来定义的。事实上,通过在下面的示例中定义一个函数,你就定义了一个简单的空类Calculator:
functionCalculator(){}
一个新的实例的创建与在Java中相同-使用new操作符:
varmyCalculator=newCalculator();
上面这个函数不仅定义一个类,而且还担当了一个构造器。在此,操作符new实现了这一魔术-实例化一个类Calculator的对象并且返回一个对象参考而不是只调用该函数。
创建这样的空类是没错,但在实际中并没有多大用处。下面,我们准备使用一个Java-脚本原型结构来填充类定义。JavaScript使用原型当作创建对象的模板。所有的原型属性和方法被参考引用地复制到一个类的每个对象中,所以它们都具有相同的值。你可以改变一个对象中的原型属性的值,并且该新值会覆盖从原型中复制过来的缺省值,但是这仅对于在一个实例中。下列语句将把一个新属性添加到Calculator对象的原型上:
Calculator.prototype._prop=0;
既然JavaScript并没有提供一个方法来从句法上表示一个类定义,那么我们将使用with语句来标记该类的定义边界。这也将使得示例代码更为短小,因为该with语句被允许在一个指定的对象上执行一系列的语句而不需要限制属性。
functionCalculator(){};
with(Calculator){
prototype._prop=0;
prototype.setProp=function(p){_prop=p};
prototype.getProp=function(){return_prop};
}
到目前为止,我们定义了并且初始化了公共变量_prop,并且为它提供了getter和setter方法。
需要定义一个静态变量?你可以把静态变量当作是为类所拥有的一个变量。因为在JavaScript中的类用函数对象来描述,所以我们只需要把一个新属性添加到该函数上:
Calculator.iCount=0;
现在,既然这个iCount变量是一个Calculator对象的属性,那么它将会被类Calculator的所有实例所共享。
functionCalculator(){Calculator.iCount ;};
上面的代码计算类Calculator的所有实例的个数。