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

好的，在前同事的帮助下解决了这个问题。有时候你只需走出自己的脑袋，然后问问合适的人。无论如何，詹姆斯是对的，因为我甚至没有首先调用这个方法。因此，我的一位同事建议在主对象函数中创建对自定义函数的引用作为选项：

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

...在stopPlotting（）方法中，我希望调用此方法：

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

像魅力一样工作

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

2 个答案: