Javascript自定義「事件」偵聽器，使用原型實現OOP

我一直在試圖圍繞這一個包裹我的頭，並且很多教程和網站都建議創建一個單獨的事件對象，這似乎有點兒只是爲了實現一個功能在對象的某個點發生而過度殺傷。Javascript自定義「事件」偵聽器，使用原型實現OOP

基本上我想有一個自定義的「onComplete」事件觸發時，正在使用的對象內調用某些方法。我有一個打開或關閉的GMaps控件對象。當它允許在地圖上對多段線進行操作時，如果關閉它，則會禁用該操作，此時我想要存儲折線數據。我試圖做的是讓對象的用戶創建他們自己的事件來監聽關閉的事件，並允許他們訪問該對象的多段線數據。我怎樣才能做到這一點？

這是我的代碼至今：

function ToggleLineDrawControl() {} 

ToggleLineDrawControl.prototype = new GControl(); 

ToggleLineDrawControl.prototype._on = false; 

ToggleLineDrawControl.prototype._button = false; 

ToggleLineDrawControl.prototype._map = false; 

ToggleLineDrawControl.prototype._overlay = false; 

ToggleLineDrawControl.prototype._plots = []; 

ToggleLineDrawControl.prototype._line = false; 

ToggleLineDrawControl.prototype._addPlotListener = false; 

ToggleLineDrawControl.prototype._onComplete = false; 

ToggleLineDrawControl.prototype.initialize = function(map) { 
this._map = map; 

var me = this; 

var container = document.createElement('div'); 

var buttonDiv = document.createElement('div'); 
this._button = buttonDiv; 
this.setButtonStyle_(); 
container.appendChild(this._button); 
this._button.appendChild(document.createTextNode('Plot')); 

GEvent.addDomListener(this._button, 'click', function() { 
    if(!this._on) { 
     this.style.backgroundColor = '#333333'; 
     this.style.color = 'white'; 
     this.firstChild.nodeValue = 'Done'; 

     me.startPlotting(); 

     this._on = true; 
    } else { 
     this.style.backgroundColor = 'white'; 
     this.style.color = '#333333'; 
     this.firstChild.nodeValue = 'Plot' 

     me.stopPlotting(); 

     this._on = false; 
    } 
}); 

this._map.getContainer().appendChild(container); 

return container; 
}; 

ToggleLineDrawControl.prototype.getDefaultPosition = function() { 
    return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 57)); 
}; 

ToggleLineDrawControl.prototype.setButtonStyle_ = function() { 
    this._button.style.textDecoration = 'none'; 
    this._button.style.color = '#333333'; 
    this._button.style.backgroundColor = 'white'; 
    this._button.style.font = 'small Arial'; 
    this._button.style.border = '1px solid black'; 
    this._button.style.padding = '2px'; 
    this._button.style.marginBottom = '3px'; 
    this._button.style.textAlign = 'center'; 
    this._button.style.width = '5em'; 
    this._button.style.cursor = 'pointer'; 
}; 

ToggleLineDrawControl.prototype.setPlot = function(latlng) { 
    var wicon = new GIcon(); 
    wicon.image = 'http://www.site.com/images/waypoint2.png'; 
    wicon.iconSize = new GSize(32, 32); 
    wicon.iconAnchor = new GPoint(8, 28); 

    var marker = new GMarker(latlng, {icon: wicon}); 

    this._map.addOverlay(marker); 

    this._plots.push(latlng); 

    this.drawLines(); 
}; 

ToggleLineDrawControl.prototype.drawLines = function() { 
    var numPlots = this._plots.length; 

    if(this._line != false) { 
      this._map.removeOverlay(this._line); 
    } 

    if(numPlots > 1) { 
     this._line = new GPolyline(this._plots, '#cc0000', 2, 0.75); 

     this._map.addOverlay(this._line); 
    } 
} 

ToggleLineDrawControl.prototype.startPlotting = function() { 
    var me = this; 

    this._addPlotListener = GEvent.addListener(this._map, 'click', function(o, l, ol) { 
     me.setPlot(l); 
    }); 
}; 

ToggleLineDrawControl.prototype.stopPlotting = function() { 
    GEvent.removeListener(this._addPlotListener); 
}; 

ToggleLineDrawControl.prototype.onComplete = function(callback) { 
    this._onComplete = callback // get this to somehow be listener event method 
};

來源

2009-10-15 qualsh

您可能需要將您的onComplete功能接近頂部，因爲這是你似乎什麼要問。

但是，我不明白流量。

如果我使用你的庫，並且我想爲onComplete傳遞一個函數作爲事件處理函數，那麼將它存儲在原型變量（this._onComplete）中，這樣每個對象只有一個回調函數。

這個被稱爲？

一旦你完成你應該調用回調，傳遞對象作爲參數： if (this._onComplete != false this._onComplete(this);

來源

2009-10-15 18:13:28

詹姆斯，感謝您的答覆。對不起，混淆了事情，但是onComplete（）方法及其在對象中的使用我懶洋洋地沒有完成，因爲我不知道該把它放在哪裏。在使用這個對象時，我想聲明它，然後分配一個自定義的方法來使用對象的範圍，以便在另一個對象的方法被使用的時候使用。我最初的想法是在運行stopPlotting（）之類的方法後運行自定義方法。 – qualsh 2009-10-16 06:53:27

好與以前的同事一點幫助解決它。有時你只需要走出你自己的頭腦，並詢問合適的人。無論如何，詹姆斯是對的，因爲我甚至沒有首先調用這個方法。所以，我的一個同事建議創建作爲一個選項的主要目標函數的自定義函數的引用：

function ToggleLineDrawControl(options) { 
    this._onComplete = options.onComplete; 
}

...並在stopPlotting（）方法，在這裏我想獲得調用此方法：

ToggleLineDrawControl.prototype.stopPlotting = function() { 
    ... 
    this._onComplete(this); 
};

就像一個魅力

來源

2009-10-16 17:27:52 qualsh

Javascript自定義「事件」偵聽器，使用原型實現OOP

回答

相關問題