月亮的太阳

　　在第一部分中，我们讨论了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"，我们可以存取所有的"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"的每一个实例被不断地重复创建。

　　因此，既然基于原型构建对象速度更快并且消费更少些的内存，那么我们在最强调性能的场所特别支持使用公共的变量。请注意，你可以使用命名惯例来避免名称冲突-例如，在公共的变量的前面加上该类名。

　　继承

　　乍看之下，JavaScript缺乏对类层次的支持，这很相似于面向对象语言的程序员对于现代语言的期盼。然而，尽管JavaScript句法没有象Java一样支持类继承，但是我们仍然能够在JavaScript中实现继承-通过把已定义类的一个实例拷贝到其派生类的原型当中。

　　在我们提供举例之前，我们需要介绍一个constructor属性。JavaScript保证每一个原型中包含constructor-它拥有到该构造器函数的一个参考。换句话说，Calculator.prototype.constructor包含一个到Calculator()的参考。

　　现在，下面的代码显示了怎样从基类Calculator派生类ArithmeticCalculator。其中，"第一行"取得类Calculator的所有的属性，而"第二行"把原型constructor的值恢复成ArithmeticCalculator:

function ArithmeticCalculator() { };
with (ArithmeticCalculator) {
　ArithmeticCalculator .prototype = new Calculator();//第一行
　prototype.constructor = ArithmeticCalculator;//第二行
}

　　就算上面的实例看起来象一个合成体而不象是继承，但是JavaScript引擎还是清楚这个原型链的。特别是，instanceof操作符会正确地适用于基类和派生类。假定你创建类ArithmeticCalculator的一个新实例:

var c = new ArithmeticCalculator;

　　表达式c instanceof Calculator和c instanceof ArithmeticCalculator都会成立。

　　注意，在上面示例中的基类的constructor是在初始化ArithmeticCalculator原型时被调用的，而在创建派生类的实例时是不被调用的。这可能会带来不想要的负面影响，而且为了实现初始化你应该考虑创建一个独立的函数。由于该构造器并不是一个成员函数，所以它无法通过this参考引用调用。我们将需要一个能调用超类的"Calculator"成员函数:

function Calculator(ops) { ...};
with (Calculator) { prototype.Calculator=Calculator;}

　　现在，我们可以写一个继承类-它显式地调用基类的构造器:

function ArithmeticCalculator(ops) { this.Calculator(ops);};
with (ArithmeticCalculator) {
　ArithmeticCalculator .prototype = new Calculator;
　prototype.constructor = ArithmeticCalculator;
　prototype.ArithmeticCalculator = ArithmeticCalculator;
}

　　定义定制标签

　　从结构上讲，一个定制标签是一个具有一个HTC扩展名的文件-它在＜PUBLIC:COMPONENT＞和＜/PUBLIC:COMPONENT＞标志之间对它的属性，方法和事件加以描述。

　　为了定义一个定制CHECKBOX标签，我们创建一个如下列代码片断中的文件checkbox.htc-其中，第一行负责设置该组件的标签名:

＜PUBLIC:COMPONENT NAME="cbx" tagName="CHECKBOX"＞
＜PROPERTY NAME="value" GET="getValue" PUT="putValue" /＞
//我们把组件的所有另外的属性放在这里
＜METHOD NAME="show" /＞
//我们把组件的所有另外的方法放在这里
＜EVENT NAME="onItemChanging" ID="onItemChanging"/＞
//我们把组件将向应用程序激活的所有另外的事件放在这里
＜ATTACH EVENT="oncontentready" HANDLER="constructor" /＞
//我们把组件自己处理的另外的事件放在这里
＜SCRIPT＞
//我们把所有的方法，属性getters和setters和事件处理器放在这里
＜/SCRIPT＞
＜/PUBLIC:COMPONENT＞

　　使用定制标签

　　尽管HTC文件的内容比较重要，但是这与其文件名是什么无关。值得注意的是，指向该HTC文件的URL需要被使用IMPORT指令指定-这必须在相应的定制标签第一次出现之前(在页面上)完成。下面是最简单的可能的页面使用一个定制的复选框可能看上去的样子-假定该页面和HTC文件处理同一个文件夹下:

＜HTML xmlns:myns＞
＜?IMPORT namespace="myns" implementation="checkbox.htc" ＞
＜BODY＞
＜myns:checkbox id='cbx_1' label='Hello'/＞
＜/BODY＞
＜/HTML＞

　　请注意，定制CHECKBOX是怎样在打开的HTML标签中被映射到一个非缺省的命名空间"myns"的。这个IMPORT指令实现把HTC同步加载到浏览器的内存并且还指示浏览器怎样为适当的命名空间实现名称确定的(HTC到命名空间的关联可能是多对一的)。

　　定制标签的构造器

　　最好的初始化HTC的方法是，一旦它被装载就处理oncontentready事件。因此，我们可以定义处理器函数-为了概念清晰起见，我们称之为构造器:

＜ATTACH EVENT="oncontentready" HANDLER="constructor" /＞

　　constructor()的逻辑是简单的:根据属性labelonleft的值(见下面的属性定义)按顺序连接一个常规HTML复选框和HTML标签:

function constructor() {
　//我们将把一个HTML复选框和标签添加到元素体
　//详细情形见列表2
}

　　定义定制标签属性

　　为了定义属性labelonleft，我们又在部分加上一行:

＜PROPERTY NAME="labelonleft" VALUE="true"/＞ 　　

　　请注意，这个属性并没有包含getter和/或setter方法。属性onValue和offValue不仅提供了从复选框状态到一个商业值域的映射而且不需要getters和setters:

＜PROPERTY NAME="onValue" VALUE="true"/＞
＜PROPERTY NAME="offValue" VALUE="false" /＞

　　然而，属性checked是用两个getter和setter定义的:

＜PROPERTY NAME="checked" GET="getChecked" PUT="putChecked" /＞　

　　因此，我们在＜SCRIPT＞部分建立了上面两个方法的定义。正如你所见，setter putChecked()-将在每次复选框状态改变时激发-把value属性设置为下面两个变体之一：onValue或OffValue。请注意，putChecked()将不仅可由在复选框-宿主页面中的脚本触发，而且也能通过在checkbox.htc中的相应的任何赋值操作触发。

var _value;
function putChecked( newValue ) {
　value = (newValue?onValue:offValue);
}
function getChecked(){
　return ( _value == onValue);
}