create-subclass.js

This is a function to implement inheritance using javascript, which is more concise and elegant than the commonly used inheritance.
这是一个使用javascript实现继承的方法，这个方法比常用的继承写法更精简和优雅（呵呵，我认为）。

---

repository

github

码云

Use

 var Subclass = SuperClass.create({
     //attributes
 }, {
     //prototype object attributes
 });

or

 var Subclass = SuperClass.create(function(/*arguments*/) {
     //get arguments
    return {
        //attributes
    }
 }, {
     //prototype object attributes
 });

demo

Element

function Element(ctx, style) {
    this.ctx = ctx;
    this.style = style;
}

Element.prototype = {
    paint: function () {
    },
    render: function () {
        this.paint();
    }
};

Rect inherit the Element

var Rect = Element.create({
    type: 'rect'
}, {
    shape: function () {
        var s = this.style;
        this.ctx.beginPath();
        this.ctx.fillStyle = s.color;
        this.ctx.rect(s.x, s.y, s.w, s.h);
        this.ctx.fill();
        this.ctx.closePath();
    },
    paint: function () {
        this.shape();
    }
});

TextRect inherit the Rect

var TextRect = Rect.create(function (ctx, style, textStyle) {
    return {
        textStyle: textStyle
    }
}, {
    text: function () {
        var s = this.style;
        var ts = this.textStyle;
        this.ctx.beginPath();
        this.ctx.fillStyle = ts.color;
        this.ctx.font = ts.font;
        this.ctx.textAlign = ts.textAlign;
        this.ctx.textBaseline = ts.textBaseline;
        this.ctx.fillText(ts.text, s.x + ts.x, s.y + ts.y);
        this.ctx.closePath();
    },
    paint: function () {
        this.shape();
        this.text();
    }
});

The equivalent is the following code

Element

function Element(ctx, style) {
    this.ctx = ctx;
    this.style = style;
}

Element.prototype = {
    paint: function () {
    },
    render: function () {
        this.paint();
    }
};

Rect inherit the Element

function Rect() {
    Element.apply(this, arguments);
    this.type = 'rect';
}

Rect.prototype = Object.create(Element.prototype);
Rect.prototype.constructor = Rect;
Rect.prototype.super = Element;
Rect.prototype.shape = function () {
    var s = this.style;
    this.ctx.beginPath();
    this.ctx.fillStyle = s.color;
    this.ctx.rect(s.x, s.y, s.w, s.h);
    this.ctx.fill();
    this.ctx.closePath();
};
Rect.prototype.paint = function () {
    this.shape();
};

TextRect inherit the Rect

function TextRect(ctx, style, textStyle) {
    Rect.apply(this, arguments);
    this.textStyle = textStyle;
}

TextRect.prototype = Object.create(Rect.prototype);
TextRect.prototype.constructor = TextRect;
TextRect.prototype.super = Rect;
TextRect.prototype.text = function () {
    var s = this.style;
    var ts = this.textStyle;
    this.ctx.beginPath();
    this.ctx.fillStyle = ts.color;
    this.ctx.font = ts.font;
    this.ctx.textAlign = ts.textAlign;
    this.ctx.textBaseline = ts.textBaseline;
    this.ctx.fillText(ts.text, s.x + ts.x, s.y + ts.y);
    this.ctx.closePath();
};
TextRect.prototype.paint = function () {
    this.shape();
    this.text();
};

License

MIT © porky-prince