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

Closure的inherits函数用父实例覆盖孩子的prototype。

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

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!");
};

原型属性未在自定义OL3控件的构造函数中定义

1 个答案: