DIV CSS 佈局教程網

一、 引言

　　在第一部分中，我們討論了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的所有實例的個數。