?

原文地址：How to Write Maintainable OO JavaScript Code

利用面向對象的方法編寫javascript能幫你省錢，而且也會讓你的代碼看起來更酷。不相信？要么你或者別人會回來維護你的代碼。而容易維護的代碼更容易節省如金錢般寶貴的時間。也會讓你在團隊中更受歡迎，因為你剛剛讓他們從頭疼中解脫出來。在我們寫面向對象代碼之前，需要先大致了解一下什么是OO。如果你覺得你對OO已經足夠了解，可以直接跳過這段。

什么是OO

面向對象編程可以比較基本地展現你代碼中抽象自現實物質的對象。在代碼中創建一個對象，我們需要先創建一個類。類幾乎可以表示任何東西：賬戶，雇員，導航菜單，車輛，植物，廣告，飲料，等等。然后，每次你創建一個對象，你要從一個類中繼承下來。換句話說，你創建了類的一個實例，從而提供了一個可以操作的對象。實際上，使用對象的最佳時機就是當你要應付多個食物。否則，一個簡單的函數型程序也會表現的一樣好。對象本質上是一個數據的容器。比如在雇員的對象中，你可以存進他們的雇工號，名字，起始時間，頭銜，薪資，特權等等…對象也包括了一些函數（也叫做方法）去操作數據。方法也可以用來充當一個中間人來確保數據完整。這個中間人通常用來在存儲前轉換數據。比如，一個方法可以接受一個任意格式的數據然后把這個數據轉換成標準數據并存儲進去。最后類可以繼承自其他類。繼承機制允許你去重用其他類的代碼。比如，銀行賬戶類和影音商店帳號類可以都繼承自一個基礎帳號類，這個基礎帳號的類可以提供一些配置信息，帳號創建時間，分支信息等等。然后，每一個繼承出來的類都可以定義自己的匯報和租金，控制數據結構和方法。

注意：javascript OO是不同于其他語言的OO的

在前一節我已經指出了一個基于類的面向對象編程的基本特點。我把它成為基于類的編程，因為javascript并不遵守這些規則。javascript類是以函數的形式表現，繼承方法是用基于原型的方式實現。原型繼承和其他類的繼承有很大的區別，他們是繼承自含有原型屬性的對象。

對象的實例化

這里有一個實例化對象的例子。

// Define the Employee class function Employee(num, fname, lname){this.getFullName = function () {return fname + " " + lname;}};// Instantiate an Employee objectvar john = new Employee("4815162342", "John", "Doe");alert("The employee's full name is " + john.getFullName());

有一些地方必須得注意一下：

1.我將類名的首字母大寫了。這個重要的區別可以讓人們知道這是一個用來實例化的類，而不是作為一個普通方法來調用的。

2.我使用”new”操作符來實例化類。如果在實例化的時候忘了寫上new會導致直接執行這個函數。

3.getFullName這個方法是對外開放的，因為這個方法是注冊在this對象上的，而fname和lname是私有的變量，不對外開放。Employee函數創建的閉包允許getFullName函數去訪問fname和lname，而讓其他方法都無法直接訪問到fname和lname。

原型繼承

這里有一個原型繼承的例子

// Define Human classfunction Human(){this.setName = function (fname, lname) {this.fname = fname;this.lname = lname;}this.getFullName = function () {return this.fname + " " + this.lname;}}// Define the Employee classfunction Employee(num) {this.getNum = function () {return num;}};// Let Employee inherit from HumanEmployee.prototype = new Human();// Instantiate an Employee objectvar john = new Employee("4815162342");john.setName("John", "Doe");alert(john.getFullName() + "'s employee number is " + john.getNum());

我創建了一個Human類，里面包括了一些人類應該有的屬性–我也在Human類里設置了fname和lname，因為所有的人類，不僅僅是雇員才有名字。然后我讓雇員類的原型指向Human對象，這樣就擴展了雇員類的屬性。

通過繼承的方式重用代碼

在前一個例子里，我將原來的Employee類分割成兩個。我把所有一個人類應該有的屬性都轉移到Human類里，然后讓Employee類去繼承Human類的屬性。這樣的話，Human類里有的屬性可以繼承給其他對象，比如Student, Client, Citizen, Visitor等等。這是一個非常棒的方式去重用代碼，這樣我們就不用重復地給每一個對象設置重復的屬性。而且如果我們想增加一個屬性，比如say，或者middle name，那么我們只需要修改一次就可以讓所有的繼承自Human類的類都擁有這個屬性。相反，如果我們只想增加一個middle name屬性給一個對象，我們可以直接修改這個對象，而不用去修改Human

公有和私有屬性

我比較喜歡去提及類里的公有和私有變量。根據你對數據不同的操作，你會想把數據分為公有數據和私有數據。一個私有的屬性并不代表其他人不想訪問，只是你希望別人能通過你提供的一個方法來操作數據。

只讀屬性

有時候，你只想讓一個值在對象被創建的時候只定義一次。這個值定義之后，你不想任何人來修改這個值。為了做到這個，你可以創建一個私有變量，然后在實例化這個類的時候設置它的值

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

在這個例子里，我在Animal類里創建了一個數組data。當一個Animal對象被實例化的時候，type的值會傳進來，然后設置data的值。這個值不能被重寫，因為他是Animal類私有的。讀取type值的唯一一個方式就是實例化之后調用你提供getType方法。因為getType是在Animal類內部定義的，它可以訪問data。這樣，人們就可以讀取這個對象的type值，但是不能修改。

但是有一點很重要，這個讓類內部值只讀的方法在另外一個對象繼承其之后會失效。每一個對象的實例都可以共享這些只讀的變量，然后對其進行重寫。最簡單的解決方法就干脆讓這個屬性都變成公有屬性算了。如果你一定要讓它們保持私有，你可以用Philippe的方法

公有方法

有些時候，你希望一些屬性能夠被讀取，也能被修改。那么，你需要通過這樣的方法來讓屬性開放出來

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

現在在我們的Animal類里開放了一個叫做mood的屬性，它可以被讀取也可以被修改。你可以分配一個函數去操作這個屬性。小心不要讓一個值指向屬性，不然你會因為你設置的值而破壞這個屬性。

完全私有

最終，你或許也發現在某個時候，你需要一個完全私有的局部變量。這種情況下，你可以使用像第一個例子那樣，不過不需要創建公有方法。

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

寫出一個靈活的API

現在我們已經把類的創建講完了，我們需要對其進行進一步修改，這樣我們就可以跟進項目的需求變化。如果你修改了任意一個項目，或者長期維護一個產品，你會經常遇到項目需求的變化。這是現實工作中肯定存在的。有時候，你還在寫代碼的時候可能就會因為需求變化而讓代碼都作廢了。你可能突然會需要給標簽表單一個動畫，或者通過Ajax調用抓取數據。雖然不可能預測到未來的變化，但是我們仍然需要努力去寫出能夠盡量適應未來可能需求的代碼。

Saner參數列表

有一個為未來作準備的方法就是設計參數列表。這是一個很重要的方法來解決那些不確定的需求。你需要避免這樣的參數列表：

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

這樣一個類是非常脆弱的。如果你在代碼已經發布之后想添加一個middle name參數。因為次序的問題，你不得不在列表的最后來加入這個。這樣做顯得非常笨拙。如果你并沒每一個參數的值，那么，傳遞參數會很麻煩。比如：

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都完全被移除。因為對象不需要特地的順序，所以添加一個middle name參數只需要直接把它扔進去。

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']返回一個值，那么它就被賦值了。否則，它就沒有被賦值。

讓類插件化

隨著時間的推進，產品需求或許會是要在類里添加特定的行為。而這個行為經常和你的類核心方法沒有關系。也有可能只有一個實施類的需求，比如當抓取外部數據時，讓tab標簽對應的內容消失。你也許可以試著把這些功能放進你的類，但是他們并不屬于這個類。一個tab效果的職責去管理tab標簽。動畫效果和數據抓取完全是兩個分離開來的方法。需要在tab之外維護。唯一一個方法去讓你的tab適應未來需求，讓臨時方法調用自外部，就是允許人們去在你的代碼中添加插件。換句話說，允許人們去掛載行為， 就像onTabChange, afterTabChange, onShowPanel, afterShowPanel等等。這樣的話，他們就可以很簡單的掛載你的onShowPanel事件，寫一個控制方法來讓一塊內容漸漸消失，而且也減輕了大家的壓力。javascript庫可以讓你非常輕松的完成這件事情，不過你自己來完成也不會太難。這里有一個基于YUI3的簡單例子：

<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'); // Code to show the panelthis.fire('afterShowPanel');};};// Give TabStrip the ability to fire custom eventsY.augment(TabStrip, Y.EventTarget);var ts = new TabStrip();// Set up custom event handlers for this instance of TabStripts.on('onShowPanel', function () {//Do something before showing panel});ts.on('onShowPanel', function () {//Do something else before showing panel});ts.on('afterShowPanel', function () {//Do something after showing panel});ts.showPanel();});</script>

這個例子有一個簡單的含有showPanel方法的TabStrip類。這個方法會綁定了兩個事件，onShowPanel和afterShowPanel。將Y.EventTarget合并到你的類中就可以實現這樣的綁定。完成之后，我們實例一個TabStrip對象，然后分配一個對應事件控制方法。這就是一個典型的代碼，用于控制實例中獨特的行為，也不會污染目前的類。

總結

如果你有計劃在同一頁面，同一站點或者多個項目中重用代碼，想要通過類的形式將其整理和組織。面向對象的javascript非常自然地提供了更加好的組織和重用能力。只要你稍微深謀遠慮一下，你就可以確定你的代碼在長期內都是足夠靈活的。寫出可重用，適應未來的javascript會節約你，你的團隊和你的公司的事件和金錢。它當然也能讓你變的更酷

總結

以上是生活随笔為你收集整理的怎样写出可维护的面向对象javascript（译）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。