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

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

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

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

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

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

對(duì)象的實(shí)例化

以下是JavaScript中對(duì)象實(shí)例化的例子：

// 定義Employee類

function Employee(num, fname, lname) {

this.getFullName = function () {

return fname + ' ' + lname;

}

};

// 實(shí)例化Employee對(duì)象

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

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

在這里，有三個(gè)重點(diǎn)需要注意：

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

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

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

原型繼承

下面是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();

// 實(shí)例化Employee對(duì)象

var john = new Employee('4815162342');

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

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

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

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

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

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

接下來的主題，我想談?wù)勵(lì)愔械墓泻退接凶兞俊８鶕?jù)對(duì)象中處理數(shù)據(jù)的方式不同，數(shù)據(jù)會(huì)被處理為私有的或者公有的。私有屬性并不一定意味著其他人無法訪問。可能只是某個(gè)方法需要用到。

只讀

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

function Animal(type) {

var data = [];

data[’type’] = type;

this.getType = function () {

return data[’type’];

}

}

var fluffy = new Animal(’dog’);

fluffy.getType();

// 返回 ’dog’

在這個(gè)例子中，Animal類中創(chuàng)建了一個(gè)本地?cái)?shù)組data。當(dāng) Animal對(duì)象被實(shí)例化時(shí)，傳遞了一個(gè)type的值并將該值放置在data數(shù)組中。因?yàn)樗撬接械模栽撝禑o法被覆蓋（Animal函數(shù)定義了它的范圍）。一旦對(duì)象被實(shí)例化了，讀取type值的唯一方式是調(diào)用getType方法。因?yàn)間etType是在Animal中定義的，因此憑借Animal產(chǎn)生的閉包，getType可以進(jìn)到data中。這樣的話，雖可以讀到對(duì)象的類型卻無法改變。

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

Public（公有）

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

function Animal() {

this.mood = ’’;

}

var fluffy = new Animal();

fluffy.mood = ’happy’;

fluffy.mood;

// 返回 ’happy’

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

完全私有

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

function Animal() {

var secret = 'You’ll never know!'

}

var fluffy = new Animal();

2. 寫靈活的API

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

Saner參數(shù)列表

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

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

};

這個(gè)類十分脆弱。如果在你發(fā)布代碼后想要添加一個(gè)中間名參數(shù)，因?yàn)轫樞騿栴}，你不得不在列表的最后往上加。這讓工作變得尷尬。如果你沒有為每個(gè)參數(shù)賦值的話，將會(huì)十分困難。例如：

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

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

function Person(employeeId, data) {

};

有第一個(gè)參數(shù)因?yàn)檫@是必需的。剩下的就混在對(duì)象的里面，這樣才可以靈活運(yùn)用。

var ara = new Person(1234, {

fname: 'Ara',

lname: 'Pehlivanian',

tel: '514-555-1234',

dob: '1976-05-17'

});

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

var ara = new Person(1234, {

fname: 'Ara',

mname: 'Chris',

lname: 'Pehlivanian',

tel: '514-555-1234',

dob: '1976-05-17'

});

類里面的代碼不重要，因?yàn)槔锩娴闹悼梢酝ㄟ^索引來訪問：

function Person(employeeId, data) {

this.fname = data[’fname’];

};

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

讓代碼可嵌入

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

<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的這個(gè)實(shí)例創(chuàng)建常用時(shí)間處理器

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

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

});

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

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

});

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

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

});

ts.showPanel();

});

</script>

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

總結(jié)

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