How does the inheritance model of KineticJS work?

问题:

I am a little new to JavaScript, and I know that there are different inheritance models that can be used. I have a project I used KineticJS for and I noticed in their changelog that they changed the inheritance model with the release of v3.10.3 of the project, so that we can 'more easily extend or add custom methods to Kinetic classes'

I have done some searching for this, but I cannot seem to find a clear example of this anywhere. I was wondering if anyone could tell me what would be the proper way to add both properties and methods to Kinetic classes, and how I may extend them t create my own custom classes? Is the inheritance model used in KineticJS a common one in javascript?

回答1:

I would recommend following the method that is done inside the KineticJS source. This blog post explains how but is a little outdated so I'll include an up to date example that also shows how to add properties to your custom shapes.

The code below shows gives an example of creating a new Shape.Arc object. This sample shows how to add both new functions and properties.

var Shape = {};
(function () {
    Shape.Arc = function (config) {
        this.initArc(config);
    };
    Shape.Arc.prototype = {
        initArc: function (config) {
            Kinetic.Shape.call(this, config);
            this._setDrawFuncs();
            this.shapeType = 'Arc;'
            drc.ui.utils.setupShape(this);
        },
        drawFunc: function (context) {
            context.beginPath();
            context.arc(0,0, this.getRadius(), this.getStartAngle(), 
                this.getEndAngle(), true);
            context.fillStrokeShape(this);
        }
    };
    Kinetic.Util.extend(Shape.Arc, Kinetic.Shape);

    //Add properties to shape.
    //The code below adds the getRadius(), getStartAngle() functions above.
    Kinetic.Factory.addGetterSetter(Shape.Arc, 'radius', 0);
    Kinetic.Factory.addGetterSetter(Shape.Arc, 'startAngle', 0);
    Kinetic.Factory.addGetterSetter(Shape.Arc, 'endAngle', 180);
})();

It is important that it is wrapped in an anonymous function so more than one instance can be created.

To create an arc:

var arc = new Shape.Arc({
                radius: radius,
                x: centreX,
                y: centreY,
                startAngle: 0,
                endAngle: Math.PI * 2
            });

回答2:

You can use different ways.

1 Kineticjs way. Example from kineticjs source:

Kinetic.Circle = function(config) {
    this._initCircle(config);
};

Kinetic.Circle.prototype = {
    _initCircle: function(config) {
        this.createAttrs();
        // call super constructor
        Kinetic.Shape.call(this, config);
        this.shapeType = 'Circle';
        this._setDrawFuncs();
    },
    drawFunc: function(canvas) {
      /*some code*/
    }
    /* more methods*/
};
Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape);

2 Also you can inheritance it with coffeescript: coffeescript Class But in js it looks not good:

var Gallery,
 __hasProp = {}.hasOwnProperty,
 __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

Gallery = (function(_super) {

__extends(Gallery, _super);

function Gallery(config) {
  Kinetic.Stage.call(this, config);
}

Gallery.prototype.add = function(item) {
  console.log(item);
  return Gallery.__super__.add.call(this, item);
};

Gallery.prototype.method = function() {
  return console.log('test');
};

return Gallery;

})(Kinetic.Stage);