能夠?qū)懗隹删S護的面向?qū)ο驤avaScript代碼不僅可以節(jié)約金錢，還能讓你很受歡迎。不信？有可能你自己或者其他什么人有一天會回來重用你的代碼。如果能盡量讓這個經(jīng)歷不那么痛苦，就可以節(jié)省不少時間。地球人都知道，時間就是金錢。同樣的，你也會因為幫某人省去了頭疼的過程而獲得他的偏愛。但是，在開始探索如何編寫可維護的面向?qū)ο驤avaScript代碼之前，我們先來快速看看什么是面向?qū)ο蟆Ｈ绻呀?jīng)了解面向?qū)ο蟮母拍盍耍涂梢灾苯犹^下一節(jié)。

什么是面向?qū)ο螅?/b>

面向?qū)ο缶幊讨饕ㄟ^代碼代表現(xiàn)實世界中的實質(zhì)對象。要創(chuàng)建對象，首先需要寫一個“類”來定義。 類幾乎可以代表所有的東西：賬戶，員工，導航菜單，汽車，植物，廣告，飲料，等等。而每次要創(chuàng)建對象的時候，就從類實例化一個對象。換句話說，就是創(chuàng)建類的實例做為對象。事實上，通常處理一個以上的同類事物時就會使用到對象。另外，只需要簡單的函數(shù)式程序就可以做的很好。對象實質(zhì)上是數(shù)據(jù)的容器。因此在一個employee對象中，你可能要儲存員工號，姓名，入職日期，職稱，工資，資歷，等等。

對象也包括處理數(shù)據(jù)的函數(shù)（也叫做“方法”）。方法被用作媒介來確保數(shù)據(jù)的完整性，以及在儲存之前對數(shù)據(jù)進行轉(zhuǎn)換。例如，方法可以接收任意格式的日期然后在儲存之前將其轉(zhuǎn)化成標準化格式。最后，類還可以繼承其他的類。繼承可以讓你在不同類中重復使用相同代碼。例如，銀行賬戶和音像店賬戶都可以繼承一個基本的賬戶類，里面包括個人信息，開戶日期，分部信息，等等。然后每個都可以定義自己的交易或者借款處理等數(shù)據(jù)結(jié)構(gòu)和方法。

警告：JavaScript面向?qū)ο笫遣灰粯拥?/b>

在上一節(jié)中，概述了經(jīng)典的面向?qū)ο缶幊痰幕局R。說經(jīng)典是因為JavaScript并不遵循這些規(guī)則。相反地，JavaScript的類是寫成函數(shù)的樣子，而繼承則是通過原型實現(xiàn)的。原型繼承基本上意味著使用原型屬性來實現(xiàn)對象的繼承，而不是從類繼承類。

對象的實例化

以下是JavaScript中對象實例化的例子：

// 定義Employee類

function Employee(num, fname, lname) {

this.getFullName = function () {

return fname + ' ' + lname;

}

};

// 實例化Employee對象

　 var john = new Employee('4815162342', 'John', 'Doe');

　 alert('The employee’s full name is ' + john.getFullName());

在這里，有三個重點需要注意：

1 “class”函數(shù)名的第一個字母要大寫。這表明該函數(shù)的目的是被實例化而不是像一般函數(shù)一樣被調(diào)用。

2 在實例化的時候使用了new操作符。如果省略掉new而僅僅調(diào)用函數(shù)則會產(chǎn)生很多問題。

3 因為getFullName指定給this操作符了，所以是公共可用的，但是fname和lname則不是。由Employee函數(shù)產(chǎn)生的閉包給了getFullName到fname和lname的入口，但同時對于其他類仍然是私有的。

原型繼承

下面是JavaScript中原型繼承的例子：

// 定義Human類

function Human() {

this.setName = function (fname, lname) {

this.fname = fname;

this.lname = lname;

}

this.getFullName = function () {

return this.fname + ' ' + this.lname;

}

}

// 定義Employee類

function Employee(num) {

this.getNum = function () {

return num;

}

};

//讓Employee繼承Human類

Employee.prototype = new Human();

// 實例化Employee對象

var john = new Employee('4815162342');

john.setName('John', 'Doe');

alert(john.getFullName() + '’s employee number is ' + john.getNum());

這一次，創(chuàng)建的Human類包含人類的一切共有屬性——我也將fname和lname放進去了，因為不僅僅是員工才有名字，所有人都有名字。然后將Human對象賦值給它的prototype屬性。

通過繼承實現(xiàn)代碼重用

在前面的例子中，原來的Employee類被分解成兩個部分。所有的人類通用屬性被移到了Human類中，然后讓Employee繼承Human。這樣的話，Human里面的屬性就可以被其他的對象使用，例如Student（學生），Client（顧客），Citizen（公民），Visitor（游客），等等。現(xiàn)在你可能注意到了，這是分割和重用代碼很好的方式。處理Human對象時，只需要繼承Human來使用已存在的屬性，而不需要對每種不同的對象都重新一一創(chuàng)建。除此以外，如果要添加一個“中間名字”的屬性，只需要加一次，那些繼承了 Human 類的就可以立馬使用了。反而言之，如果我們只是想要給一個對象加“中間名字”的屬性，我們就直接加在那個對象里面，而不需要在Human 類里面加。

1. Public（公有的）和Private（私有的）

接下來的主題，我想談談類中的公有和私有變量。根據(jù)對象中處理數(shù)據(jù)的方式不同，數(shù)據(jù)會被處理為私有的或者公有的。私有屬性并不一定意味著其他人無法訪問。可能只是某個方法需要用到。

只讀

有時，你只是想要在創(chuàng)建對象的時候能有一個值。一旦創(chuàng)建，就不想要其他人再改變這個值。為了做到這點，可以創(chuàng)建一個私有變量，在實例化的時候給它賦值。

function Animal(type) {

var data = [];

data[’type’] = type;

this.getType = function () {

return data[’type’];

}

}

var fluffy = new Animal(’dog’);

fluffy.getType();

// 返回 ’dog’

在這個例子中，Animal類中創(chuàng)建了一個本地數(shù)組data。當 Animal對象被實例化時，傳遞了一個type的值并將該值放置在data數(shù)組中。因為它是私有的，所以該值無法被覆蓋（Animal函數(shù)定義了它的范圍）。一旦對象被實例化了，讀取type值的唯一方式是調(diào)用getType方法。因為getType是在Animal中定義的，因此憑借Animal產(chǎn)生的閉包，getType可以進到data中。這樣的話，雖可以讀到對象的類型卻無法改變。

有一點非常重要，就是當對象被繼承時，“只讀”技術(shù)就無法運用。在執(zhí)行繼承后，每個實例化的對象都會共享那些只讀變量并覆蓋其值。最簡單的解決辦法是將類中的只讀變量轉(zhuǎn)換成公共變量。但是你必須保持它們是私有的，你可以使用Philippe在評論中提到的技術(shù)。

Public（公有）

當然也有些時候你想要任意讀寫某個屬性的值。要實現(xiàn)這一點，需要使用this操作符。

function Animal() {

this.mood = ’’;

}

var fluffy = new Animal();

fluffy.mood = ’happy’;

fluffy.mood;

// 返回 ’happy’

這次Animal類公開了一個叫mood的屬性，可以被隨意讀寫。同樣地，你還可以將函數(shù)指定給公有的屬性，例如之前例子中的getType函數(shù)。只是要注意不要給getType賦值，不然的話你會毀了它的。

完全私有

最后，可能你發(fā)現(xiàn)你需要一個完全私有化的本地變量。這樣的話，你可以使用與第一個例子中一樣的模式而不需要創(chuàng)建公有方法。

function Animal() {

var secret = 'You’ll never know!'

}

var fluffy = new Animal();

2. 寫靈活的API

既然我們已經(jīng)談到類的創(chuàng)建，為了保持與產(chǎn)品需求變化同步，我們需要保持代碼不過時。如果你已經(jīng)做過某些項目或者是長期維護過某個產(chǎn)品，那么你就應該知道需求是變化的。這是一個不爭的事實。如果你不是這么想的話，那么你的代碼在還沒有寫之前就將注定荒廢。可能你突然就需要將選項卡中的內(nèi)容弄成動畫形式，或是需要通過Ajax調(diào)用來獲取數(shù)據(jù)。盡管準確預測未來是不大可能，但是卻完全可以將代碼寫靈活以備將來不時之需。

Saner參數(shù)列表

在設(shè)計參數(shù)列表的時候可以讓代碼有前瞻性。參數(shù)列表是讓別人實現(xiàn)你代碼的主要接觸點，如果沒有設(shè)計好的話，是會很有問題的。你應該避免下面這樣的參數(shù)列表：

function Person(employeeId, fname, lname, tel, fax, email, email2, dob) {

};

這個類十分脆弱。如果在你發(fā)布代碼后想要添加一個中間名參數(shù)，因為順序問題，你不得不在列表的最后往上加。這讓工作變得尷尬。如果你沒有為每個參數(shù)賦值的話，將會十分困難。例如：

var ara = new Person(1234, 'Ara', 'Pehlivanian', '514-555-1234', null, null, null, '1976-05-17');

操作參數(shù)列表更整潔也更靈活的方式是使用這個模式：

function Person(employeeId, data) {

};

有第一個參數(shù)因為這是必需的。剩下的就混在對象的里面，這樣才可以靈活運用。

var ara = new Person(1234, {

fname: 'Ara',

lname: 'Pehlivanian',

tel: '514-555-1234',

dob: '1976-05-17'

});

這個模式的漂亮之處在于它即方便閱讀又高度靈活。注意到fax, email和email2完全被忽略了。不僅如此，對象是沒有特定順序的，因此哪里方便就在哪里添加一個中間名參數(shù)是非常容易的：

var ara = new Person(1234, {

fname: 'Ara',

mname: 'Chris',

lname: 'Pehlivanian',

tel: '514-555-1234',

dob: '1976-05-17'

});

類里面的代碼不重要，因為里面的值可以通過索引來訪問：

function Person(employeeId, data) {

this.fname = data[’fname’];

};

如果data[’fname’] 返回一個值，那么他就被設(shè)定好了。否則的話，沒被設(shè)定好，也沒有什么損失。

讓代碼可嵌入

隨著時間流逝，產(chǎn)品需求可能對你類的行為有更多的要求。而該行為卻與你類的核心功能沒有半毛錢關(guān)系。也有可能是類的唯一一種實現(xiàn)，好比在一個選項卡的面板獲取另一個選項卡的外部數(shù)據(jù)時，將這個選項卡面板中的內(nèi)容變灰。你可能想把這些功能放在類的里面，但是它們不屬于那里。選項卡條的責任在于管理選項卡。動畫和獲取數(shù)據(jù)是完全不同的兩碼事，也必須與選項卡條的代碼分開。唯一一個讓你的選項卡條不過時而又將那些額外的功能排除在外的方法是，允許將行為嵌入到代碼當中。換句話說，通過創(chuàng)建事件，讓它們在你的代碼中與關(guān)鍵時刻掛鉤，例如onTabChange, afterTabChange, onShowPanel, afterShowPanel等等。那樣的話，他們可以輕易地與你的onShowPanel事件掛鉤，寫一個將面板內(nèi)容變灰的處理器，這樣就皆大歡喜了。JavaScript庫讓你可以足夠容易地做到這一點，但是你自己寫也不那么難。下面是使用YUI 3的一個例子。

<script type='text/javascript' src='http://yui.yahooapis.com/combo?3.2.0/build/yui/yui-min.js'></script>

<script type='text/javascript'>

YUI().use(’event’, function (Y) {

function TabStrip() {

this.showPanel = function () {

this.fire(’onShowPanel’);

// 展現(xiàn)面板的代碼

this.fire(’afterShowPanel’);

};

};

// 讓TabStrip有能力激發(fā)常用事件

Y.augment(TabStrip, Y.EventTarget);

var ts = new TabStrip();

// 給TabStrip的這個實例創(chuàng)建常用時間處理器

ts.on(’onShowPanel’, function () {

//在展示面板之前要做的事

});

ts.on(’onShowPanel’, function () {

//在展示面板之前要做的其他事

});

ts.on(’afterShowPanel’, function () {

//在展示面板之后要做的事

});

ts.showPanel();

});

</script>

這個例子有一個簡單的 TabStrip 類，其中有個showPanel方法。這個方法激發(fā)兩個事件，onShowPanel和afterShowPanel。這個能力是通過用Y.EventTarget擴大類來實現(xiàn)的。一旦做成，我們就實例化了一個TabStrip對象，并將一堆處理器都分配給它。這是用來處理實例的唯一行為而又能避免混亂當前類的常用代碼。

總結(jié)

如果你打算重用代碼，無論是在同一網(wǎng)頁，同一網(wǎng)站還是跨項目操作，考慮一下在類里面將其打包和組織起來。面向?qū)ο驤avaScript很自然地幫助實現(xiàn)更好的代碼組織以及代碼重用。除此以外，有點遠見的你可以確保代碼具有足夠的靈活性，可以在你寫完代碼后持續(xù)使用很長時間。編寫可重用的不過時JavaScript代碼可以節(jié)省你，你的團隊還有你公司的時間和金錢。這絕對能讓你大受歡迎。