javascript - 未在自定义 OL3 控件的构造函数内定义原型(prototype)属性

Question

我正在尝试在 ol3 中创建自定义控件。我见过this example并决定制作一些类而不是整个页面上的一大堆代码。所以我有这样的东西:

var MeasureLength = function ( opt_options ) {
    var options = opt_options || {};

    var button = document.createElement( 'button' );
    button.innerText = 'M';

    button.addEventListener( 'click', this._trigger, false );

    var element = document.createElement( 'div' );
    element.className = 'measure-length ol-control';
    element.appendChild( button );

    ol.control.Control.call( this, {
        element: element,
        target: options.target
    } );
};

MeasureLength.prototype._trigger = function ( e ) {
    e.preventDefault();
    alert("Activating!");
};

ol.inherits( MeasureLength, ol.control.Control );

问题是 _trigger 没有被调用。使其工作的一种方法是将 _trigger 放在构造函数中:

var _trigger = function ( e ) {
    e.preventDefault();
    alert("Activating!");
};
button.addEventListener( 'click', _trigger, false );

但我不喜欢那样，因为代码又堆成一堆，所有 OOP 都崩溃了。

所以我的问题是:当您有很多代码时，在 ol3 中创建自定义控件的最佳做法是什么？

Answer 1

闭包的 inherits 函数通过父实例覆盖子进程的 prototype。

如果您在调用 inherits 后附加 _triggered 属性，它应该在您的子构造函数中可用:

var MeasureLength = function ( opt_options ) {
    // should now be available
    console.log(this._trigger);
};

ol.inherits( MeasureLength, ol.control.Control );

MeasureLength.prototype._trigger = function ( e ) {
    e.preventDefault();
    console.log("Activating!");
};