怎樣編寫可維護的物件導向 JavaScript 程式碼

能夠寫出可維護的物件導向JavaScript程式碼不僅可以節省金錢，還能讓你很受歡迎。不相信？有可能你自己或其他什麼人有一天會回來重複使用你的程式碼。如果能盡量讓這個經歷不那麼痛苦，就可以省下不少時間。地球人都知道，時間就是金錢。同樣的，你也會因為幫某人省去了頭痛的過程而獲得他的偏好。但是，在開始探索如何編寫可維護的物件導向JavaScript程式碼之前，我們先來快速看看什麼是物件導向。如果已經了解物件導向的概念了，就可以直接跳過下一節。

什麼是物件導向？

物件導向程式設計主要透過程式碼代表現實世界中的實質物件。要建立對象，首先需要寫一個「類別」來定義。 類幾乎可以代表所有的東西：帳戶，員工，導航菜單，汽車，植物，廣告，飲料，等等。而每次要創建物件的時候，就從類別實例化一個物件。換句話說，就是創建類別的實例做為物件。事實上，通常處理一個以上的同類事物時就會使用到物件。另外，只需要簡單的函數式程式就可以做的很好。對象實質上是資料的容器。因此在一個employee物件中，你可能要儲存員工號，姓名，入職日期，職稱，工資，資歷，等等。

物件也包含處理資料的函數（也稱為「方法」）。方法被用作媒介來確保資料的完整性，以及在儲存之前對資料進行轉換。例如，方法可以接收任意格式的日期然後在儲存之前將其轉換成標準化格式。最後，類別還可以繼承其他的類別。繼承可以讓你在不同類別中重複使用相同程式碼。例如，銀行帳戶和音像店帳戶都可以繼承一個基本的帳戶類，裡麵包括個人信息，開戶日期，分部信息，等等。然後每個都可以定義自己的交易或借款處理等資料結構和方法。

警告：JavaScript物件導向是不一樣的

在上一節中，概述了經典的物件導向程式設計的基本知識。說經典是因為JavaScript並不遵守這些規則。相反地​​，JavaScript的類別是寫成函數的樣子，而繼承則是透過原型實現的。原型繼承基本上意味著使用原型屬性來實現物件的繼承，而不是從類別繼承類別。

物件的實例化

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

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

個字母要大寫。這表明該函數的目的是被實例化而不是像一般函數一樣被呼叫。

2 在實例化的時候使用了new操作符。如果省略掉new而只呼叫函數則會產生很多問題。

3 因為getFullName指定給this操作符了，所以是公共可用的，但是fname和lname則不是。由Employee函數產生的閉包給了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());

這一次，創建的Human類，包含人類的一切共有屬性——我也將fname和lname放進去了這次，創建的Human類，因為不只是員工才有名字，所有人都有名字。然後將Human物件賦值給它的prototype屬性。

透過繼承實現程式碼重用

在前面的例子中，原來的Employee類別被分解成兩個部分。所有的人類通用屬性被移到了Human類別中，然後讓Employee繼承Human。這樣的話，Human裡面的屬性就可以被其他的物件使用，例如Student（學生），Client（顧客），Citizen（公民），Visitor（遊客），等等。現在你可能注意到了，這是分割和重複使用程式碼很好的方式。處理Human物件時，只需要繼承Human來使用已存在的屬性，而不需要對每種不同的物件都重新一一建立。除此之外，如果要新增一個「中間名字」的屬性，只需要加一次，那些繼承了 Human 類別的就可以立刻使用了。反而言之，如果我們只是想要給一個物件加上「中間名字」的屬性，我們就直接加在那個物件裡面，而不需要在Human 類別裡面加。

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

接下來的主題，我想談談類別中的公有和私有變數。根據物件中處理資料的方式不同，資料會被處理為私有的或公有的。私有屬性並不一定意味著其他人無法存取。可能只是某個方法需要用到。

只讀

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

function Animal(type) {
var data = [];
data['type'] = type;
this.getType = function () {
return data['type'];
}
}
var fluffy = new Animal('dog');
fluffy.getType();
// 返回 'dog'

在这个例子中，Animal类中创建了一个本地数组data。当 Animal对象被实例化时，传递了一个type的值并将该值放置在data数组中。因为它是私有的，所以该值无法被覆盖（Animal函数定义了它的范围）。一旦对象被实例化了，读取type值的唯一方式是调用getType方法。因为getType是在Animal中定义的，因此凭借Animal产生的闭包，getType可以进到data中。这样的话，虽可以读到对象的类型却无法改变。

有一点非常重要，就是当对象被继承时，“只读”技术就无法运用。在执行继承后，每个实例化的对象都会共享那些只读变量并覆盖其值。最简单的解决办法是将类中的只读变量转换成公共变量。但是你必须保持它们是私有的，你可以使用Philippe在评论中提到的技术。

Public（公有）

当然也有些时候你想要任意读写某个属性的值。要实现这一点，需要使用this操作符。

function Animal() {
this.mood = '';
}
var fluffy = new Animal();
fluffy.mood = 'happy';
fluffy.mood;
// 返回 'happy'

这次Animal类公开了一个叫mood的属性，可以被随意读写。同样地，你还可以将函数指定给公有的属性，例如之前例子中的getType函数。只是要注意不要给getType赋值，不然的话你会毁了它的。

完全私有

最后，可能你发现你需要一个完全私有化的本地变量。这样的话，你可以使用与第一个例子中一样的模式而不需要创建公有方法。

function Animal() {
var secret = "You'll never know!"
}
var fluffy = new Animal();

2. 写灵活的API

既然我们已经谈到类的创建，为了保持与产品需求变化同步，我们需要保持代码不过时。如果你已经做过某些项目或者是长期维护过某个产品，那么你就应该知道需求是变化的。这是一个不争的事实。如果你不是这么想的话，那么你的代码在还没有写之前就将注定荒废。可能你突然就需要将选项卡中的内容弄成动画形式，或是需要通过Ajax调用来获取数据。尽管准确预测未来是不大可能，但是却完全可以将代码写灵活以备将来不时之需。

Saner参数列表

在设计参数列表的时候可以让代码有前瞻性。参数列表是让别人实现你代码的主要接触点，如果没有设计好的话，是会很有问题的。你应该避免下面这样的参数列表：

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

这个类十分脆弱。如果在你发布代码后想要添加一个中间名参数，因为顺序问题，你不得不在列表的最后往上加。这让工作变得尴尬。如果你没有为每个参数赋值的话，将会十分困难。例如：

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

操作参数列表更整洁也更灵活的方式是使用这个模式：

function Person(employeeId, data) {
};

有第一个参数因为这是必需的。剩下的就混在对象的里面，这样才可以灵活运用。

var ara = new Person(1234, {
fname: "Ara",
lname: "Pehlivanian",
tel: "514-555-1234",
dob: "1976-05-17"
});

这个模式的漂亮之处在于它即方便阅读又高度灵活。注意到fax, email和email2完全被忽略了。不仅如此，对象是没有特定顺序的，因此哪里方便就在哪里添加一个中间名参数是非常容易的：

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'] 返回一个值，那么他就被设定好了。否则的话，没被设定好，也没有什么损失。

让代码可嵌入

随着时间流逝，产品需求可能对你类的行为有更多的要求。而该行为却与你类的核心功能没有半毛钱关系。也有可能是类的唯一一种实现，好比在一个选项卡的面板获取另一个选项卡的外部数据时，将这个选项卡面板中的内容变灰。你可能想把这些功能放在类的里面，但是它们不属于那里。选项卡条的责任在于管理选项卡。动画和获取数据是完全不同的两码事，也必须与选项卡条的代码分开。唯一一个让你的选项卡条不过时而又将那些额外的功能排除在外的方法是，允许将行为嵌入到代码当中。换句话说，通过创建事件，让它们在你的代码中与关键时刻挂钩，例如onTabChange, afterTabChange, onShowPanel, afterShowPanel等等。那样的话，他们可以轻易地与你的onShowPanel事件挂钩，写一个将面板内容变灰的处理器，这样就皆大欢喜了。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(&#39;event&#39;, function (Y) {
function TabStrip() {
this.showPanel = function () {
this.fire(&#39;onShowPanel&#39;);
// 展现面板的代码
this.fire(&#39;afterShowPanel&#39;);
};
};
// 让TabStrip有能力激发常用事件
Y.augment(TabStrip, Y.EventTarget);
var ts = new TabStrip();
// 给TabStrip的这个实例创建常用时间处理器
ts.on(&#39;onShowPanel&#39;, function () {
//在展示面板之前要做的事
});
ts.on(&#39;onShowPanel&#39;, function () {
//在展示面板之前要做的其他事
});
ts.on(&#39;afterShowPanel&#39;, function () {
//在展示面板之后要做的事
});
ts.showPanel();
});
</script>

这个例子有一个简单的 TabStrip 类，其中有个showPanel方法。这个方法激发两个事件，onShowPanel和afterShowPanel。这个能力是通过用Y.EventTarget扩大类来实现的。一旦做成，我们就实例化了一个TabStrip对象，并将一堆处理器都分配给它。这是用来处理实例的唯一行为而又能避免混乱当前类的常用代码。

总结

如果你打算重用代码，无论是在同一网页，同一网站还是跨项目操作，考虑一下在类里面将其打包和组织起来。面向对象JavaScript很自然地帮助实现更好的代码组织以及代码重用。除此以外，有点远见的你可以确保代码具有足够的灵活性，可以在你写完代码后持续使用很长时间。编写可重用的不过时JavaScript代码可以节省你，你的团队还有你公司的时间和金钱。这绝对能让你大受欢迎。