Javascript 自定义“事件”监听器，使用原型实现 OOP

Question

我一直在努力解决这个问题，许多教程和网站都建议创建一个单独的事件对象，这对于仅实现一个功能在某些情况下发生似乎有点矫枉过正指向对象。

基本上，我希望在正在使用的对象中调用某些方法时触发自定义“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
 };

Answer 1

您可能希望将 onComplete 函数移到顶部附近，因为这似乎是您要问的问题。

但是，我不明白流程。

如果我使用你的库，并且我想传入一个函数，作为事件处理程序，用于 onComplete，你将它存储在原型变量 (this._onComplete) 中，因此每个对象只有一个回调函数。

这在哪里被称为？

完成后，您应该调用回调，将对象作为参数传入： if (this._onComplete != false this._onComplete(this);

Answer 2

好的，在一位前同事的帮助下解决了这个问题。有时你只需要跳出自己的头脑，问对的人。无论如何，James 是对的，我什至一开始都没有调用该方法。因此，我的一位同事建议在主对象函数中创建对自定义函数的引用作为选项：

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

... 在 stopPlotting() 方法中，我希望调用此方法：

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

像魅力一样工作