ajax|web|程序|高级
下载本文源代码
一、 引言
在第一部分中，我们讨论了AJAX基础——建立从脚本到服务器的通讯的能力，这正是使HTML页面具有动态能力的原因所在。然而，这就意味着我们已准备好抛弃我们自己版本的Yahoo邮件吗？不，还没有。原因在于：AJAX是一个混合的祝福。一方面，它使我们能够在Web上创建丰富的桌面级的应用程序；另一方面，如果我们把"翻页面式"的Web应用程序与客户端/服务器或Swing版本的程序进行比较，那么会看到其开发实践并不很相同。我们将需要习惯于这样的事实：构建一个丰富的UI需要时间。须知，允许用户实现更大的灵活性也就相应地需要付出更多的时间为代价。
最后的答案当然要依赖于大量的组件库、框架以及具有工业力量的开发工具。且不考虑工具，本文集中于讨论在今天对于AJAX热心者有哪些技术是可用的。在强调需要构建可重用的商业组件的同时，本文将重点分析"隐含的"JavaScript中的面向对象的力量。另外，在强调需要构建定制的UI组件的同时，本文将介绍一个简便的方法——用定制的客户端HTML标签来封装描述逻辑。
二、 AJAX语言——对象面向的JavaScript
由定义来看，JavaScript是典型的AJAX语言。不同于Java，JavaScript并不强调OO风格的编码。然而，令人吃惊的是JavaScript居然全面支持所有的OO语言的主要属性：封装、继承和多态性。Douglas Crockford甚至称JavaScript是"世界上最易被误解的编程语言"。让我们回顾一下JavaScript的面向对象的地方吧。
数据类型
在Java中，一个类定义了一个数据和它的相关行为的组合。尽管JavaScript保留了class关键字，但是它不支持与常规OOP语言一样的语义。
这听起来可能觉得奇怪，但是在JavaScript中，对象是用函数来定义的。事实上，通过在下面的示例中定义一个函数，你就定义了一个简单的空类Calculator：
| function Calculator() {} |
一个新的实例的创建与在Java中相同-使用new操作符：
| var myCalculator = new Calculator(); |
上面这个函数不仅定义一个类，而且还担当了一个构造器。在此，操作符new实现了这一魔术-实例化一个类Calculator的对象并且返回一个对象参考而不是只调用该函数。
创建这样的空类是没错，但在实际中并没有多大用处。下面，我们准备使用一个Java-脚本原型结构来填充类定义。JavaScript使用原型当作创建对象的模板。所有的原型属性和方法被参考引用地复制到一个类的每个对象中，所以它们都具有相同的值。你可以改变一个对象中的原型属性的值，并且该新值会覆盖从原型中复制过来的缺省值，但是这仅对于在一个实例中。下列语句将把一个新属性添加到Calculator对象的原型上：
| Calculator.prototype._prop = 0; |
既然JavaScript并没有提供一个方法来从句法上表示一个类定义，那么我们将使用with语句来标记该类的定义边界。这也将使得示例代码更为短小，因为该with语句被允许在一个指定的对象上执行一系列的语句而不需要限制属性。
| function Calculator() {}; 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的所有实例所共享。
| function Calculator() {Calculator.iCount++;}; |
上面的代码计算类Calculator的所有实例的个数。
封装
通过使用如上面所定义的"Calculator"，我们可以存取所有的"class"数据；然而，这增加了派生类中命名冲突的危险性。我们明显地需要封装以把对象看作自包含的实体。
数据封装的一种标准语言机制是使用私有变量。并且一个常用的仿效一个私有变量的JavaScript技术是在构造器中定义一个局部变量；这样以来，该局部变量的存取只能经由getter和setter来实现-它们是该构造器中的内部函数。在下列实例中，_prop变量在Calculator函数中定义并且在函数范围外不可见。其中有两个匿名的内部函数（分别被赋予setProp和getProp属性）让我们存取"私有"变量。另外，请注意，这里this的使用-十分相似于在Java中的用法：
| function Calculator() { var _prop = 0; this.setProp = function (p){_prop = p}; this.getProp = function() {return _prop}; }; |
常常被忽视的是在JavaScript中作如此封装所付出的代价。须知，这种代价可能是巨大的，因为内部函数对象对于该"class"的每一个实例被不断地重复创建。
因此，既然基于原型构建对象速度更快并且消费更少些的内存，那么我们在最强调性能的场所特别支持使用公共的变量。请注意，你可以使用命名惯例来避免名称冲突-例如，在公共的变量的前面加上该类名。
[1] [2] [3] [4] 下一页