JavaScript 物件導向的寫法

這邊的範例來自 Professional JavaScript for Web Developers

Factory Paradigm

下面的寫法讓你做出一個 oCar 的物件。但可能你需要的產生很多 Car 物件，這種方式只能一個個寫...

var oCar = new Object; oCar.color = 'red'; oCar.doors = 4; oCar.mpg = 23; oCar.showColor = function() { alert(this.color); };

那麼我們來做個簡單的包裝吧～

function createCar() { var oCar = new Object; oCar.color = 'red'; oCar.doors = 4; oCar.mpg = 23; oCar.showColor = function() { alert(this.color); }; return oTempCar; }; var oCar1 = createCar(); var oCar2 = createCar();

這樣是有一點物件導向的味道了，但是我們如果不用 new 這個關鍵字，感覺缺乏了 Semantic 的意義。

Constructor paradigm

如前述的問題，我們改寫一下，讓 Car 函式成為一個建構式，可以很方便地用一個 new 的關鍵字製造出許多的 Objects

function Car(sColor,iDoors,iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.showColor = function() { alert(這款車的顏色是 ' + this.color); }; }; var oCar1 = new Car('red', 4, 23); var oCar2 = new Car('blue', 3, 25); oCar1.show();

Hybrid Constructor / Prototype Paradigm

上述的寫法是目前最容易看到的寫法之一。但是有些人會考量到效能面，如 showColor() 這個方法，每次 instantiate 時，裡面所有的屬性與方法都會被複製一份。其實我們可以讓這個方法只產生一次、而且被共用。

function Car(sColor,iDoors,iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.drivers = new Array('Mike','Sue'); }; // 我們把 showColor 獨立出來 Car.prototype.showColor = function() { alert(這款車的顏色是 ' + this.color); };

雖然這樣的效能比較好，但我個人是比較喜歡包裝在一個 constructor 內，在撰寫期間比較容易觀看。

Prototype paradigm

眼尖的人會看到 Hybrid 這個字，所以我還是介紹一下 Prototype 的寫法

//先有一個空的 function function Car() { }; //再利用 prototype 的方式幫這個 Car() 新增屬性及方法 Car.prototype.color = 'red'; Car.prototype.doors = 4; Car.prototype.mpg = 23; Car.prototype.showColor = function() { alert(這款車的顏色是 ' + this.color); }; //無法用參數... var oCar1 = new Car(); var oCar2 = new Car();

這種寫法有一個很討厭的缺點，就是沒辦法利用參數設定屬性。必須在 Instantiate 物件後再 Assign。我是從來沒用過這個寫法！

Object Literal

剛剛我們看到了以 Function 當做是一個 Class 類別，以這個 Class 類別作基底，產生 ( Instantiate ) 出一個個的物件 ( Instances )。其實對於物件，我們可以有著更多好玩的寫法。

var oYAHOO = { 'bu':['Search & Community','MIEF','PC','EC'], 'employee':[ {'name':'aaron','role':'product manager'}, {'name':'midoli','role':'f2e engineer'}, {'name':'beckie','role':'f2e engineer'}, {'name':'joseph','role':'f2e engineer'}, {'name':'alex','role':'f2e engineer'}, {'name':'gina','role':'f2e engineer'} ], 'enemy':null, 'employee_total':350, 'spirit':['fun','innovative'], 'web2dot0':function() { //do something !!!!! } };

這邊的 oYAHOO 經過宣告後就是一個獨立的物件

裡面的任何一個屬性，我們都可以用 dot notation 的方式來做存取，如 oYAHOO.bu 會取得陣列, oYAHOO.employee[0].name 會取得字串 ('aaron'), oYAHOO.enemy 會得到空值 (null), oYAHOO.employee_total 會得到整數, oYAHOO.next_action 會得到一個 function

另外你也可以透過如陣列索引的方式存取 oYAHOO[0] 會與 oYAHOO.bu 相同

這樣的格式，就是我們所稱的 JSON (JavaScript Object Notation)，目前看起來似乎是儲存資料用的比較多，但其實它也可以被拿來當作是一種我們物件導向程式的寫法喔！稍後再提！

現狀

目前連 dot com 的寫法都尚未統一，我只能就看過的幾種寫法提一些建議

單純的 Constructor 寫法

我目前就是採用這種方式，沒有跟 Prototype 或 Factory 混合使用。

最近花了一點時間在玩 Flickr 的 Open API，因為使用方式其實還蠻複雜的，所以我就整理成單獨一個 Js Libray 以方便後續程式的製作，在這邊當成範例。

function Flickr(sApiKey,sFrob,sPermission,sProxyUrl,sSecret) { // 做一些控制及判斷 if(!sPermission){sPermission = 'read';}; if(!sProxyUrl){sProxyUrl = 'service/proxy.php?ypath=';}; // 因為 this 容易產生誤解，所以指定為 oComponent var oComponent = this; oComponent.api_key = sApiKey; oComponent.api_sig = '' oComponent.auth_token = ''; oComponent.frob = sFrob; oComponent.permission = sPermission; oComponent.proxy_url = sProxyUrl; oComponent.secret = sSecret; oComponent.username = ''; oComponent.nsid = ''; oComponent.feed_xml = ''; oComponent.service_url = 'http://www.flickr.com/services/rest/'; // 這個 Function 不需要給外界使用，所以採 Private 的方式 var getRequestUrl = function(sMethod,sParameters) { if(sMethod==''&&sParameters==''){return false;}; sParameters = (sMethod!='')?('?method=' + sMethod + '&' + sParameters):('?' + sParameters); if(sParameters.substr(sParameters.length-1,1)=='?'){sParameters = sParameters.substr(0,sParameters.length-1);}; sParameters = sParameters + '&api_sig=' + oComponent.getSignature(sParameters); return oComponent.proxy_url + encodeURIComponent(oComponent.service_url + sParameters); } // 公開方法：取得 Authentication 的 URL oComponent.getLoginLink = function() { oComponent.api_sig = hex_md5(oComponent.secret + 'api_key' + oComponent.api_key + 'perms' + oComponent.permission); return 'http://flickr.com/services/auth/?api_key=' + oComponent.api_key + '&perms=' + oComponent.permission + '&api_sig=' + oComponent.api_sig; }; // 公開方法：取得 Signature oComponent.getSignature = function(sParameter) { sParameter = sParameter.replace('?',''); var aParameter = sParameter.split('&'); aParameter.sort(); var sSignature = oComponent.secret; for(var i=0,j=aParameter.length;i<j;i++){ var sName = aParameter[i].split('=')[0]; var sValue = aParameter[i].split('=')[1]; sSignature += sName + sValue; }; oComponent.api_sig = hex_md5(sSignature); return oComponent.api_sig; } }

撰寫完我們所需要的物件後，接下來當然就是要拿來用了！

//先準備好 Flickr 物件所需要的參數 var sFrob = getParamValue(window.location.href,'frob'); var sPermission = 'write'; var sProxyUrl = 'service/proxy.php?ypath='; var sApiKey = '91899b8fbff2fdd4f29633138c79edad'; var sSecret = 'c52425a326a9ed8a'; var dLogin = document.createElement('div'); var dUpload = dFlickrBody.getElementsByTagName('div')[0]; //就可以去新增一個 Flickr 物件了！ oFlickr = new Flickr(sApiKey,sFrob,sPermission,sProxyUrl,sSecret);

Dustin Diaz's Style

最近還看到一種不錯的寫法，但是還沒有機會實做 ( 線上 LightBox 的範例 )

// new 代表執行、具像化 YAHOO.example.LightBox = new function() { //Private var $D = YAHOO.util.Dom; var $E = YAHOO.util.Event; var $ = $D.get; // 看到這邊一定會很困惑，簡單來說這個 function 「執行」後會傳回 init, lightbox, close 三個子物件 // 就會有 YAHOO.example.LightBox.init(), YAHOO.example.Lightbox.lightbox(), YAHOO.example.LightBox.close() 等兩個方法、一個事件 return { //公開方法 init : function() { var overlay = document.createElement('div'); overlay.id = 'overlay'; var lightbox = document.createElement('div'); lightbox.id = 'lightbox'; overlay.style.width = $D.getViewportWidth()+'px'; overlay.style.height = $D.getViewportHeight()+'px'; document.getElementsByTagName('body')[0].appendChild(overlay); document.getElementsByTagName('body')[0].appendChild(lightbox); var lightboxes = $D.getElementsByClassName('lightbox','a','doc'); $E.on(lightboxes, 'click', this.lightbox); $E.on(lightbox, 'click', this.close); }, //公開事件 lightbox : function(e) { var target = $E.getTarget(e, true); if ( target.tagName.toLowerCase() == 'img' ) { var img = target.parentNode.getAttribute('rel'); $('overlay').style.display = 'block'; $('lightbox').innerHTML = '<img src="'+img+'" alt="" />'; $('lightbox').style.display = 'block'; } $E.stopEvent(e); }, //公開方法 close : function() { $('overlay').style.display = ''; $('lightbox').style.display = ''; } }; }; //http://developer.yahoo.com/yui/docs/event/YAHOO.util.Event.html#onAvailable //第三個參數是 scope YAHOO.util.Event.onAvailable('doc', YAHOO.example.LightBox.init, YAHOO.example.LightBox, true);

這個範例不算是新增一個物件、他只是一個普通的 function，但是我們可以利用同樣的方法去寫出一個物件來，好處是他把 Public 與 Private 區分得很清楚，利用 dot notation 的方式執行，效能可能也會比較快。

觀察 JS OO Performance

http://www.hedgerwow.com/360/dhtml/js_performance_1.html

回家功課：Toggle

http://localhost/phpweb/Joshua/class/chapter13/Toggle.html

JS OO Editor : APTANA

http://www.hedgerwow.com/360/doc/aptana-how-to/demo.html